# 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:
- Making sure the "Accessibility Kit" library is turned on in your file.
- Duplicating your mock and annotate on a separate space from other work.
- Renaming the duplicate "Accessibility Annotation".
- Search for "accessibility" in assets panel to see all accessibility-related annotations.
- 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).
# Examples
Use annotations to help indicate when the flow of focus may not be clear because the page is not linear.