Skip to main content

Accessible UI Patterns

Sara Soueidan

Full-day workshop • Monday, April 15th
Accessibility doesn’t have to be hard or time-consuming. Once you learn how to think and code inclusively, writing accessible markup becomes second nature, and part of your everyday coding workflow.

In this workshop you will learn how to build UI components with inclusivity baked right into them from the start.

You’ll learn some of the most important basic accessibility principles. Then, we’ll walk through some of the most common UI patterns and learn what it takes to make them accessible. (You’ll be pleasantly surprised at how little is sometimes needed to do so!)

You’ll learn about ARIA attributes and when and how to use them correctly to make UI elements screen reader-friendly. Through practice, you’ll get familiar with some of the most important and most used ARIA attributes.

Some of the components and patterns we’ll cover include:

  • SVG Icons and icon-based buttons,
  • Color swatches (for design systems),
  • Navigation systems:
    • Mobile navigation,
    • Pagination,
    • Breadcrumbs.
  • Forms:
    • Custom checkboxes and radio buttons,
    • Toggle switches,
    • Tooltips and interactive hints,
    • Validation and error messages,
    • File inputs,
    • And a few more if time allows.
  • Content accordions.

You’ll learn by building most of the above patterns yourself, and testing some of them using your operating system’s screen reader.

For each pattern, we’ll cover basic, easily tweakable CSS styling, and minimal JavaScript functionality wherever needed, all in the context of progressive enhancement, ensuring that your content is fully accessible even in worst case scenarios.

Target audience:

Front-End Developers and UI/UX designers comfortable writing HTML and CSS, have at least basic knowledge of SVG. You should also be comfortable writing or understanding basic JavaScript.

What hardware/software do you need?

Please bring your own laptop, with your favorite text editor.

Time & Location

This full-day workshop will be hosted at (link: locations text: Fort Mason) and will take place before the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Monday, April 15th.

Schedule for Monday, April 15th

9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End, Networking

Save 100 USD when signing up for the conference and a workshop!

Register for this workshop →

On the web
https://www.sarasoueidan.com/
On Twitter
@sarasoueidan
Workshop Includes
  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil