Specify the accessibility of your designs by using annotations

  • Beginner

Update of the article from

What is it about? #

Accessibility annotations specify how the various components on a screen should be interpreted by assistive tools (like a screen reader) and help to anticipate several accessibility error risks. while some annotations can be added directly by designers during the graphic design phase, others require technical expertise.
This is the main benefit of this activity, which encourages a cross-disciplinary reflection on accessibility (designer, product manager, accessibility expert, developer, etc.).
Without these specifications, technical accessibility rests solely on the shoulders of developers, while it must be, above all, a team effort.

What should be annotated? #

Some information that can be added to your designs:

  • Text alternative for images
  • Title of each page
  • Headings (HTML tags h1, h2...)
  • Semantics (lists, paragraphs, quotations...)
  • list of the different page regions (landmarks)
  • Interactive components (links, buttons...)
  • Reading order of components with screen reader
  • Focus order
  • Forms (labels, mandatory fields, error messages...)
  • Keyboard shortcuts (for example, Esc to close a dialog box)
  • Skip links...
Design example with accessibility annotations

How to do it? #

Whatever software is used, annotating mockups is really easy. For example, you can use numbered bullet points that link to a detailed description. There are also annotation kits or plugins that offer stickers with different colors and shapes that allow you to quickly annotate your designs. The best tool is the one that best suits your way of working. It may vary depending on the profiles and size of your team. Annotation kits, as plugins, provide a foundation that you should feel free to adapt to your needs.

Design example with annotations and reading order

Ressources #

There are specific tools or plugins for major design/mockup tools like Figma, Sketch, Zeplin. 
For any other tools, you can also use the annotation kit, which has specific icons usable in all environments.

Some examples of information that can be added to your designs:

Some Figma plugins to add accessibility annotations: