Weave accessibility design into your design process (part 2)

#Accessibility #UX #Designprocess

Ruoqian Li

and

Xuan Zhu

Sep 24, 2020

Step 1,2, 3 can be found in Weave accessibility design into your design process (Part 1)

Step 4: Deliver design with accessibility specifications

As mentioned above, a specification can help you communicate with Engineering partners. There are 4 types of specifications I find most useful. I will use damei.com as an example.

I. Page layout and responsiveness specification

A responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts, and will help you meet W3C reflow requirements.

“Users with low vision have sought ways to resize the text without adding horizontal scrolling to the page. Additionally, fixed, non-fluid sizes cause overlapping or cut-off text when a web page’s text is resized. Responsive design principles, including fluid layouts, benefit users with disabilities on desktops as well as on mobile devices.” - Jonathan Avila (article source)

Besides, a responsive design also supports users who are zooming in on what is effectively a very small desktop viewport. When designed correctly, such a page won’t get a horizontal scroll and everything will be bigger. View examples.

II. Alternative text specification

For visual elements like icons, buttons, and tabs, alternative text is needed so that the screen reader can read out the name of these elements. We can use a label spec to communicate with the engineer team on labels and text equivalents of the visual elements.

III. Page headings specification

Heading can help users quickly understand the page hierarchy and navigate through the page easily. Similar to labels, we need to specify the heading levels as well as the heading names.

Best practice for headings:

All pages should at least have an H1 heading. Only one H1 on any page, and it should identify where in the app/website you are.
Headings are ranked from H1 to H6. Do not skip heading levels (e.g. don't skip from H2 to H5; OK to skip from H5 to H2, though).
Use headings to reflect page structure, but not for style (that's what CSS is for!).
Avoid using typographic styles for both headings and non-headings.

IV. Keyboard specification

Defining the focus order is how a designer can define the experience for people who only have access to the regular or special keyboard.

After the focus order is defined, ask yourself:

Can you complete all functions with a keyboard only?
Can you access all interactive components by clicking on "Tab" only?
Is the tab order logical (usually top to bottom, left to right)?
Is there always a focus indicator to show you where you are?

Step 5: Uplevel the accessibility design with your team

It took me 6 months to get familiar with the W3C and WAI (Web accessibility initiatives) standards. To help other designers speed up, I proposed to establish an accessibility pattern library for my team.

With this library, we can collectively document the commonly used components like navigation menu or profile icons. This can help facilitate cross-functional alignment, increase design efficiency. Most importantly, it can help us gain confidence in our own design.

Design for accessibility is designing for ourselves

Thank you for joining this journey with me and hopefully, it can help you kickstart accessibility design for your product area. Like Christine Ha (first-ever blind contestant and season 3 winner of “MasterChef” USAt) said in her TED talk.

“To advocate for disabled people is the same as advocating for women, for ethnic minorities, and for the differently-abled. Aging is inevitable, and life is surprising. When the time comes to our grandparents, children, and ourselves, don’t you want this world to be ready and designed for you?”

Special thanks to

Jeff Zundel, who spent relentless effort in onboarding me and the rest of the LinkedIn Design Team to accessibility design. Without his help, I would not have started this amazing journey.

Darren Chan, who provided me unconditional trust and support in exploring accessibility patterns and always inspired me for excellence.

Shi Pu, who helped proofread this article and made the content engaging.