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.