February 01, 2021reactaccessibility
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:
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.
Whether you're new to design systems or a seasoned pro, this newsletter is for you.
Join over 70 developers learning about design systems now: