Annotating Designs for Accessibility

Creating annotations and highlights are a great example of functionality that makes our product accessible to people with disabilities while streamlining the UX for all users.

Accessibility annotations are notes on your wireframe that specifically address information and behavior related to accessibility, such as how interactive items should be announced by assistive technology, such as screen readers. Accessibility annotations help you communicate critical information to stakeholders and developers.

Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design phase, as well as communicate your accessibility requirements to developers and testers will add accessibility annotations in components, patterns and complete wireframes using popular design tools such as Figma.

Accessibility annotations can help designers think through accessibility requirements and provide a way to clearly communicate decisions to developers and testers. Annotations can be used to show focus and content order, provide information about content structure such as headings and landmarks, and semantic information such as roles, states and names.

In reality, designers still don’t think enough about accessibility. Developers implement patterns based on visual designs without necessarily having enough information about the intended behavior. Product owners don’t always know what to look for to determine whether they have something accessible. Ideally, you will think about accessibility from the beginning of the design process and communicate it across teams. Some of the considerations are on content, visual, and technical levels. Thinking about accessibility needs to happen across several different roles and departments, so communication is key!