Making your design system documentation accessible
Brienne Wong
Many organizations recognize the importance of adding accessibility to the UX of their products. According to the United Nations website, 15 percent of the world’s population (about 1 billion people) have a disability. When your company prioritizes accessibility, it benefits everyone.
While our article Create an accessible design system discussed the benefits of creating an accessible design system, the accessibility of your design system documentation is also essential. Accessible documentation can help your team members with impairments navigate your design system information easily. Discover how you can build accessible affordances into your design system documentation.
Accessibility recap
Accessibility for web and digital products guarantees alternative solutions for people with impairments. Alternative equivalents can help them complete tasks like navigating a website.
Whether situational, temporary, or permanent, impairments can include:
- Vision (e.g., color blindness, partial vision loss, and complete blindness)—people may have trouble reading text or seeing images.
- Hearing (e.g., total hearing loss or partial deafness)—people may have trouble hearing audio or video files.
- Motor skills (e.g., broken arm, arthritis, or missing limbs)—people may have trouble navigating a website due to limited mobility.
- Cognition (e.g., traumatic brain injury or neurodiversity)—people may have trouble processing the information on a website.
Users of your design system could have one or more impairments. When making the documentation accessible, there’s no one size fits all solution. We recommend providing multiple solutions, so all impairments have alternative equivalents.
Accessible documentation and an accessible design system
While some people may be aware of the importance of creating an accessible design system, they may not realize that making your design system documentation accessible is also necessary.
When accessibility is implemented in the documentation, it makes it easy for people with and without impairments to read and navigate the site.
Ways you can make your documentation accessible.
Here are some ways you can make your documentation accessible for your teammates.
Designing for vision impairments
- Add alt text to images
- Ensure adequate color contrast for your styleguide (You can change colors in the Appearance section in the Styleguide Settings.)
- Ensure the proper color contrast for any images used in your style guide
- Use a typeface and font size that’s legible to everyone
Designing for hearing impairments
- Include captions for videos
Designing for motor impairments
- Provide keyboard-only navigation
Designing for cognitive impairments
- Write in concise and plain language
- Use heading levels to create a hierarchy of information
- Use bullet points and shorter sentences to make things easier to understand
What zeroheight is doing to address accessibility
Like many others, zeroheight is continuously improving the accessibility of our product. So far, what we’ve implemented includes, but isn’t limited to:
- Included semantic HTML for viewer-facing content
- Improved the color contrast of the UI
- Added underlines for text links
- Added ARIA labels and other accessibility properties to all input fields
- Enabled keyboard navigation for viewer-facing content
- Ensured our search is accessible
- Included HTML list structure in footer links
- Enabled skip to content link to improve keyboard navigation
- Added alt text field for images, images in tables, and Rules block
If you would like to share any feedback on the accessibility of our product, reach out to us on our zheroes Slack channel. We’re always looking to improve.
Final thoughts
Implementing accessibility into your design system documentation is a significant step toward creating an accessible user experience for everyone. When your documentation is accessible, your readers can quickly build accessibility into your products.