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.

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.

Managing components

Components are listed in the Assets panel. Click any component and drag it from the panel onto your canvas. Some components are more customizable than others. Buttons, for example, contain kinds, options, and states that can be modified. You can find this information in each component’s documentation. Visit Figma’s documentation to learn more about how to add components to your designs.

Integrating styles

All of the foundational styles for colors, typography, elevation, and grid will fully integrate into Figma when you enable the DDS v2 libraries. You can access library styles in the Properties panel by selecting the style you want to update. Visit Figma’s Style documentation to learn how to work with styles on your canvas.

Reviewing updates

You may see a notification that prompts you to review or dismiss component updates. Carefully review the updates before accepting them—they may break your layout or design and you will not be able to undo those changes. Select Review from the notification and choose the updates you would like to apply. Visit Figma’s documentation to learn how to review and accept updates from libraries.

Resources

Figma

Accessibility annotation kit

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

Techniques for ARIA landmarks

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