Accessibility.png

Making technology inclusive

Accessible design is not about making technology for people with disabilities. It’s about making it inclusive, for all of us, because disability is not a personal health condition, it’s a mismatched human interaction.

Overview

As a UX designer, I use WCAG 2.1 guidance to make the products accessible.

Some of my focus areas:

  • roles and screen reader labels,

  • tab order,

  • landmarks and headings,

  • screen reflow,

  • color contrast,

  • pattern consistency and clear language.

Business goal

Create products that meet the requirements of the leading global accessibility standards, including EN 301 549, U.S. Section 508, Web Content Accessibility Guidelines (WCAG).

Role and duration

Accessibility champion: collaborating with developers to ship accessible products, consulting designers on creating accessible designs.

Since I learned about accessibility.

 

Example of the deliverables

Here’s an example of a work in progress. I worked on the admin experiences and was an accessibility champion of our design team. Not every single pattern is straightforward, so it’s important to find the optimal solution together with the engineering team.

 

Roles and screen reader labels

ARIA roles, states, and properties define the role of the interactive element. Labels provide more context about the element. For example, roles and labels describe whether an element is a link or button, whether it has a menu, and what action to expect from it.

Labels.png
 

Tab order

Tab order specifies keyboard-only interaction. It applies only to interactive elements, e.g., buttons, navigation, tables, etc.

Accessibility.png
 

Landmarks

Landmarks help assistive technology users orient themselves to a page and help them navigate easily to various sections of a page.

Landmarks.png
 

Reflow and 400% zoom

People use products on different devices, and regardless of this, we want the experience to be consistent. In addition to this, we should account for 400% zoom, so we support people with low vision who need to enlarge text and read it in a single column.

Reflow.png
 

Conclusion

Making technology accessible and inclusive is not an easy task. It takes a time to understand the requirements and find good examples. It also involves a lot of collaboration between design, engineering, and PM teams. But when we strive for this, everyone benefits.