How I audit components for accessibility
Over the past few years working on design systems, I've picked up some tips and tricks that can help me ensure a higher level of accessibility in the components I build. This blog post is for you if you want to build more accessible components, and you're not sure where to start.
WCAG stands for web content accessibility guidelines. The spec outlines four major concerns, which are often shortened to P.O.U.R.
Additionally, I look up the component I'm trying to build on www.w3.org to find accessibility guidelines for specific UX patterns. For example, you can look up the guidelines for building a tab panel. Doing this allows me to write clear acceptance criteria for my Jira ticket and improves my ability to QA my component later.
Finally, once I've fixed all the low-hanging fruit, I manually run through the following steps:
- Test for different visual deficiencies using Storybook
- Run through component using keyboard according to wai-aria practices
- Turn off my screen and navigate component using VoiceOver
Following these guidelines does not catch 100% of accessibility issues, but it is a massive improvement over just clicking around and saying I'm done.
Do you want design systems tips and tricks sent to your inbox?