Designing digital products for accessibility as a User Experience Designer, Part 2

This is the second of a two-part series on designing for digital accessibility.

How do you design solutions that help people with disabilities?

In part one of this series, we covered the various challenges designers face when trying to design digital products for accessibility and understood the problem we are trying to solve. Now here are some tactical steps that helped our team solve this problem:

1. Use various assistive technologies to interact with your product

Nothing will help you build more empathy and give you a deeper understanding of the challenges users with disabilities face than experiencing it for yourself.

Depending on your product, identify the various technologies users may rely upon to interact with your product, and then become familiar with each.

Screen readers

• Screen readers are one of the most complex assistive technologies to make products more accessible. So, you may find more resources related to this than any other assistive technologies.
• Voiceover is a free screen reader built into Mac computers.
• And NVDA is a free screen reader for Windows devices.

Keyboards

• Many users, including those who are pro users of your product might rely solely on keyboard use for efficiency and speed.
• Screen reader users also need to use keyboards to navigate and interact with your product.
• So, challenge yourself to get your work done by using just your keyboard for a set amount of time.

An illustration on keyboard accessibility support by Pablo Stanley

2. Give your personas disabilities

Adding people with disabilities is a good way to remind yourself that your users will not always be fully abled. It also provides helpful context when thinking about how your product might be consumed.

Give personas temporary and permanent disabilities. Created using toolkit by Pablo Stanley

3. Audit existing products/features

Identify the various components and their interactions across different flows. Try to ensure the components are consistent to the most possible extent depending on the similarities between the flows.

Though you should be striving for this in general, this WCAG guideline states that it takes people with disabilities longer to complete a flow. So, it becomes even more important to make sure you are not forcing them to relearn how to perform a similar task in different flows.

4. Learn basic accessibility attributes

Just like you would understand mouse interactions or touch gestures, gain an understanding of how accessibility attributes can impact the experience.

• Accessibility attributes (like ARIA attributes) are essentially additional attributes specified in the code to help assistive technologies understand how to behave. Similar to how standard HTML elements like <button> let browsers know that it should be clickable, ARIA attributes define how an assistive technology needs to relay it to someone using it.
• Here’s an interesting article showcasing how a simple language attribute that when switched from English to Czech makes a screen reader announce English text in a Czech accent.

5. Create accessibility annotations

• Accessibility annotations are specs that help developers understand and build exactly how a designer intends a user to interact with the product or feature.
• Here’s a really great toolkit by Jack Nicolai that explains how to do this.

Example of an accessibility annotation based on an annotation toolkit by Jeremy Elder

6. How much effort does it take? (In case someone asks 😉 )

■ The biggest effort comes down to designers, developers, content strategists, quality engineers and even product managers understanding what it truly means for a product to be accessible.

■ The effort requires an initial time investment to building this base knowledge across these disciplines to ensure:

• That a product manager defines stories that make products/features accessible.
• That a designer provides guidelines for making experiences accessible.
• That a content strategist provides not just the static visible content but also other forms of content like Alt-text, closed captions etc.
• That a developer implements the right ARIA attributes behind the scenes.
• That a quality engineer finally tests the product for the various assistive technologies supported.

Jack Nicolai’s toolkit goes into further detail for each of these.

■ In most cases, making an experience accessible requires very little UI change. There might be some patterns or interactions that would instead benefit from redesigning. We’ve done this in some places and it ultimately ended up simplifying the experience for ALL users.

7. Scaling the process going forward

• Make your UI libraries accessible to simplify and scale the process.
• Create accessibility annotation templates to help designers quickly provide specs for any design.

As designers, we all know the importance of understanding our users. But, in doing so, we often think most about it in terms of the roles, responsibilities or goals of our users. It’s time to start taking into account their varying abilities as well.

By adopting the tactics above, our team was not only able to meet the WCAG 2.0 standards for most of our existing features, but also helped us become more proactive in thinking accessibility first while designing newer features. Hope this post saves you some time and gives you an idea of where to start if this is your first time embarking upon a journey to make your products accessible to all. 😃