Skip to Main Content

Annotating Designs for Accessibility

taught by: Sarah Pulis
co-presented by: Claire Webber


Session Summary

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. Sarah and Claire will cover how to add accessibility annotations in components, patterns and complete wireframes using popular design tools such as Figma.


Description

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.

The annotations we will used are based of Jack Nicolai’s accessibility bluelines which are available in design products such as Sketch and Figma. Worked examples will show how annotations can be added to design system components and patterns as well as in wireframes or visualdesigns.At the end of this class, you will be able to:

  • describe the benefits of using accessibility annotations

  • know what to annotate on wireframes, designs and in design systems

  • apply accessibility annotations in design tools such as Figma


Practical Skills

  • What accessibility annotations to use at the design stage
  • How to annotate your designs in tools such as Figma
  • The benefits of using accessibility annotations