Design system annotations, part 1: How accessibility gets left out of components

Jan Maarten

The Accessibility Design team created a set of annotations to bridge the gaps that design systems alone can’t fix and proactively addresses accessibility issues within Primer components.

GitHub

•

Jan Maarten

•11 min read•intermediate•

--

•View Original

HTMLReact

Overview

The article discusses the importance of accessibility annotations in design systems, highlighting how organizations vary in their accessibility practices. It emphasizes that having accessible components does not guarantee accessible designs and introduces GitHub's Annotation Toolkit as a solution to improve collaboration and accessibility in design processes.

What You'll Learn

1

How to integrate accessibility annotations in your design process

2

Why accessible components alone do not ensure accessible designs

3

When to use GitHub’s Annotation Toolkit for better collaboration

Prerequisites & Requirements

Basic understanding of accessibility principles(optional)
Familiarity with Figma for design annotations

Key Questions Answered

How do accessibility annotations improve design systems?

Accessibility annotations provide critical context for developers, ensuring that designs are implemented with accessibility in mind. They help close communication gaps between designers and developers, reducing the risk of accessibility issues and costly rework.

What are the limitations of relying solely on accessible components?

Relying solely on accessible components can lead to designs that are not fully accessible due to issues like improper heading structures or lack of context for assistive technologies. This highlights the need for thorough documentation and annotations to guide implementation.

What is the purpose of GitHub's Annotation Toolkit?

GitHub's Annotation Toolkit is designed to facilitate the use of accessibility annotations in design projects, making it easier for designers to document important accessibility details without needing specialized knowledge. This toolkit aims to streamline the design process and improve accessibility outcomes.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Design Tool

Figma

Used for creating and annotating design components in the GitHub Annotation Toolkit.

Key Actionable Insights

1
Integrate accessibility annotations into your design workflow to enhance collaboration and reduce errors.
By using annotations, teams can ensure that all necessary accessibility details are communicated effectively, minimizing the risk of oversight during the development process.

2
Regularly audit your design system for accessibility compliance to identify and address potential issues.
Conducting audits helps maintain a high standard of accessibility across all components, ensuring that your design system evolves to meet user needs.

3
Utilize the GitHub Annotation Toolkit to streamline the annotation process and make it accessible for all team members.
This toolkit allows designers to easily document accessibility details, fostering a culture of inclusivity and awareness within the team.

Common Pitfalls

1

Assuming that accessible components automatically lead to accessible designs can result in significant oversight.

This misconception can lead to designs that fail to meet accessibility standards, highlighting the importance of thorough documentation and user testing.

2

Neglecting to include context-specific annotations can create confusion for developers during implementation.

Without clear annotations, developers may misinterpret the intended functionality or accessibility requirements of design components.

Related Concepts

Accessibility In Design Systems

Importance Of Annotations In Design

User Testing For Accessibility