getting-started icon

Accessibility Annotation Kit

The Accessibility Annotation Kit enables designers to indicate accessibility-related specs and behavior consistently for handoff. It also contains tips and guidelines to help designers consider accessibility earlier in the product lifecycle.

About the annotation kit

The Accessibility Annotation Kit consists of several annotation components, available as both assets and as a sticker sheet. It was created in partnership with the Dell Design System team to help you:

  • Identify areas within your designs that may need considerations for accessibility.
  • Empower to create accessibility requirements around those areas.
  • Document those requirements in a way that other members of your team can understand and act upon.
  • Drive conversations with members of your team around accessibility throughout the product lifecycle.

Helpful tips

  1. For help enabling the Accessibility Annotation Kit library in Figma, refer to our Getting Started with Figma guide.

  2. Place each type of annotation components in their own named layer within the document, where they can be turned off or on individually for maximum understandability. This will also help you maintain organized layers.

  3. For maximum clarity, you may find it helpful to group all these layers together, with a title of “Accessibility Annotations” or similar.

  4. Discuss your annotations with your team as early as possible. If necessary, point them to this page to make sure they understand their purpose. Consider adding a legend in your document if it helps create understanding and alignment.

Resources

Accessibility annotation kit

View the accessibility annotation kit's sticker sheet in Figma.

Accessible landmarks

Read Scott O'Hara's article on using accessible landmarks to help users navigate websites and applications.

Techniques for ARIA landmarks

Read techniques provided by WCAG 2.1 to properly use landmarks to identify regions of a page.