Accessibility in Design Systems

Creating websites and products that are accessible to all is essential for enhancing the user experience.

At Knapsack, accessibility is a top priority in all design and development processes. We believe that every product should be inclusive and accessible to all users, and that accessibility features can actually make the experience better for everyone regardless of how they interact with the world.

To achieve this goal, we follow the four guiding principles of the Web Content Accessibility Guidelines (WCAG). These principles ensure that our products are perceivable, operable, understandable, and robust for all users.

Perceivable

This means that information and user interface elements are presented in a way that can be understood by everyone, regardless of their abilities. This includes things like providing alternative text for images, captions for videos, and making sure the site is compatible with assistive technologies like screen readers.

It’s important that colors and contrast are used effectively on the website, so that users can distinguish between different elements and read text easily. This can include using high-contrast colors for text and background, and avoiding color combinations that may be difficult for users with color blindness or low vision.

Example of colors as seen with various types of color blindness

Operable

In order to make sure that everyone can use your site, it's important to design it in a way that works well with different tools and technologies. It’s important to make sure that people can navigate the page using a keyboard or other input devices, such as touch screens or voice commands.

Additionally, any time limits should be adjustable, and any moving or blinking content should have controls to pause or stop it. You can leverage the prefers-reduced-motion media query to turn off animations altogether for users who have this option enabled.

Using the prefers-reduced-motion media query

Understandable

Making your website understandable is crucial for delivering an excellent user experience. This involves using clear and concise language, avoiding technical terms and jargon, and providing support and help documentation. The text content should be easy to read and understand, using language that is accessible to those with an eighth-grade reading level.

The user interface should be intuitive and predictable, by making sure that controls and other page features do not change context unexpectedly. Navigation should be consistent across different pages, and the input process should be designed to minimize mistakes and help users enter correct information. Any errors should be clearly reported and instructions should be provided for data input, along with suggestions.

Using help text, notifications, and error handling that is consistent across features helps your users navigate your forms.

Robust

To achieve robustness, it is important to use standard HTML tags and semantic markup when possible to convey the meaning of the content to both human readers and assistive technologies. This means using HTML tags that are specifically designed to convey the structure and meaning of the content, rather than just the appearance. For example, using header tags (H1, H2, etc.) to indicate headings or figure tags to indicate media content.

By incorporating standard HTML tags and semantic markup, a website can become more robust, creating a more accessible and user-friendly experience for all users.

Avoid “div soup” and use semantic markup that allows screen readers to parse your site more easily

Conclusion

At Knapsack we believe that accessible products create a better experience for all users and our design system infrastructure enables teams across the globe to create accessible products more efficiently and effectively.

By following the principles of the Web Content Accessibility Guidelines, we can all do our part in creating a more inclusive digital world.

Get started

See how Knapsack helps you reach your design system goals.

Get started

See how Knapsack makes design system management easy.