Web Accessibility Annotation Kit
Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. This can help prevent many accessibility issues earlier and create more usable digital experiences.
After 2 years of testing with over 65 design teams at CVS Health®, we’re releasing our Web Accessibility Annotation Kit to the public. It's made specifically for web-based experiences. Additional resources will be published soon, including an extensive iOS Accessibility Annotation Kit.
This resource was built with organizations in mind. Anyone can use the kit, but as an asset library used by design teams, it thrives. Customizations and style changes can be made easily, and it comes with tools to help ensure that components don’t break and no data is lost when publishing your own library updates.
Types of annotations
This kit makes it more easy and efficient than ever before to fill out common properties for all types of elements. Included in the kit are multiple formats of annotation components for the following:
Buttons - Interactive elements that perform an action such as submitting a form or opening a dialog.
Headings - Semantic levels within a page’s section hierarchy.
Images - Describe informative or mark decorative images.
Landmarks - An important section of a page.
Links - Interactive elements that navigate to web pages, files, or anything that changes a URL.
Inputs - Fields and controls for forms to accept data from users.
Focus order - A sequential order of focusable components that preserves meaning and operability.
Reading order - The sequential order in which assistive technology will read content.
Notes - Any details that don’t fit into the other annotation categories.
Utilities - Several references to aid in the developer experience.
How to use
This resource is designed to be published as a Figma library to provide a single set of annotations for your organization or team. Once published, you can use the kit by managing the libraries in your design files.
If you are not on a paid Figma plan, you can still use the kit by copying and pasting the components locally into your design file.
Support
This kit is brought to you by the CVS Health® Inclusive Design team. Visit our GitHub repository for in-depth documentation on how to use the kit, submit issues for things you would like to see added or fixed, as well as a changelog of recent updates. Note that as this is an open-source tool, we’re unable to provide direct support.
Originally at Figma.com