This workshop focuses on understanding and removing barriers from the user experience (UX) of people with disabilities.

Mandatory pre-workshop tasks

  • Complete these setup tasks for your platform
  • Bookmark how to enable/activate them
  • Write down the keyboard shortcut next to your machine

PC

Chromebook

Apple MacOS

Apple iOS

Android

Automated tools

Assistive technology: Low vision, motor and blindness (1hr)

This section will introduce you to assistive technologies in a useful order.

Low vision (Interactive)

  • This workshop begins with low vision.
  • Why? Over half the people who use your products are adjusting default font sizes or contrast on their desktop and handheld devices.
  • Go to this page magnify this form and fill it in (Do not use Cmd + to zoom in)

On your own time

  • Increase the text size on your handheld or desktop device

Motor (Interactive)

Automated tools (Interactive)

Blindness (Screen reader demo)

UX stands for User Experience

  • Product managers: Accessibility isn’t some vague standard, it’s the best way to ensure a good UX for all people (not just those with disabilities)
  • Designers: The most important design artifact isn’t the Figma file, or even the annotations. It’s the conversation it facilitates about UX with the devs.
  • Developers: Accessibility isn’t about adding tabindex and ARIA, it’s about UX.

Helping people read stuff is good UX

People don’t come here to look at your glorious UI design. They are here to consume words that will solve their own problems.

Workshop 1: Page structure (30min)

Documentation

On your own time

Workshop 2: Alternative text (30min)

Documentation

Helping people click stuff is good UX

We set expectations visually that help people understand and trust our product. We must do the same for people using a screen reader.

If it goes somewhere, it’s a link. If it does something, it’s a button.

Documentation

Helping people have a conversation is good UX

Inputs allow people using our product to talk to us. Our job is to make sure we aren’t making it difficult to speak by choosing the right inputs.

Workshop 4: Text inputs are harder than you think (1hr)

Documentation

Helping people refine the conversation is good UX

Radio buttons, checkboxes, switches and selects allow you to have a precise conversation with people using the product.

Workshop 5: Input mental models (1hr)

Single selection

Documentation

Multiple selection

Documentation

System settings

Documentation

What is it?

But what happens when a control doesn’t look like one of these?

Sometimes interrupting the conversation is good UX

There are good reasons to stop the flow, but let’s do it the right way.

Workshop 6: Complex content interactions (1hr)

Stopping everything

Documentation

Intentionally hiding content

Documentation

Workshop 7: Things going wrong can be good UX (1hr)

Further reading