# Annotations

Learn about Benevity's accessibility annotation best practices

# Using Annotations

The annotation kit is a great tool to help designers and developers communicate on complex accessibility-related implementations.

It can be used to start a conversation, help clarify a question, or rapidly iterate in real time before coding starts. It's not required for every mock and it's not a replacement for collaboration.

# How To

Prep your Figma file by:

  1. Making sure the "Accessibility Kit" library is turned on in your file.
  2. Duplicating your mock and annotate on a separate space from other work.
  3. Renaming the duplicate "Accessibility Annotation".
  4. Search for "accessibility" in assets panel to see all accessibility-related annotations.
  5. Creating a new layer to add your annotations to allow you to turn them off and on easier in future.

# Tab Order

Users should be able to navigate to all interactive elements on the page in a logical order using only their keyboard.

The tab key moves through the list of interactive items in the order of the DOM unless programatically altered with tabindex. The tab order should not be changed unless there is a good technical reason. Check out these best practices and use cases for using tab index (opens new window).

Want to learn more about tab order accessibility?

Want to learn more about tab order accessibility?

Read about best practices from the Universal Design Center.

# Examples

Use annotations to help indicate when the flow of focus may not be clear because the page is not linear.