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.
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).
Use annotations to help indicate when the flow of focus may not be clear because the page is not linear.