Announcing a new Web Accessibility Annotation Kit from Inclusive Design

The CVS Health® Inclusive Design team has created new Figma annotation kits for multiple platforms. Today, we are releasing the first of these tools for annotating web accessibility. Our hope is that the Design and Accessibility disciplines use and improve on them so that the internet as a whole may become more accessible.

Download the Web Accessibility Annotation Kit on the Figma Community.

Over the past two years, we have tested and refined this annotation kit with 65 design teams across the CVS Health digital enterprise. Our teams have used it to make 150,000+ annotations within 1,100+ design files. Read our Web Accessibility Annotation Kit case study for a behind-the-scenes view into how we built the kit and what we learned along the way.

This accessibility annotation kit focuses on everyone, from those creating annotations to those consuming them. It’s highly configurable and easy to use — even for novices. To me, its best feature is how it helps build accessibility maturity across disciplines through common vocabulary and patterns.

– Charles Hall
Domain Expert, Inclusive Design & Accessibility
Invited Expert, W3C Accessibility Guidelines Working Group

This kit has immensely helped our Inclusive Design team’s efforts to standardize an efficient annotation process while providing numerous benefits to our organization and our users:

Organizational benefits

• Provided a centralized and consistent approach to discuss and document design intent across disciplines.
• Increased chance that accessibility issues are identified and resolved earlier. Thus, fewer iterations needed in development and fewer issues discovered during testing.
• Reduced total accessibility issues overall, with less re-work or remediation needed.

End-user benefits

• Helped reduce or eliminate access barriers.
• Improved experiences for people using assistive technologies and customized system preferences.
• Helped produce designs with the expected interface behavior of the web platform.

This kit was built with organizations of any scale in mind. While anyone can use the kit, it thrives as a Figma asset library used by design teams. Customizations and style changes can be made easily, and we’ve added visual regression testing tools to help ensure that nothing breaks when publishing your own library updates.

What’s in the kit

Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. Ideally, developers find annotated experiences easy to read and understand, but this isn’t always the case. Designing this kit to be as accessible, intuitive, and legible as possible for all, we followed three guiding principles:

1. Multiple methods to differentiate annotations from designs by using accessible colors, fonts, and visual styles.
2. Multiple methods to identify and differentiate annotations by using clear labels, icons, and outlines that help avoid relying on color alone.
3. Flexible and robust components built without restrictions on dimensions, fonts, and directional references. Customize it easily and scale it quickly with minimal risk of data loss when using or updating components.

This kit makes it easier and more 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.

Visit our GitHub repository for in-depth documentation on how to use the kit, view release notes, and submit issues for things you would like to see added or fixed.

Resources

• Behind the scenes of creating a new Web Accessibility Annotation Kit
• Documentation, support, and release notes on GitHub
• Follow CVS Health on the Figma community

Credits

This kit is brought to you by the CVS Health® Inclusive Design team.

• Jan Maarten, Sr. Accessibility Designer
• Daniel Henderson-Ede, Sr. Accessibility Designer
• Kevin Oliveira, Sr. Accessibility Designer

© 2023 CVS Health and/or one of its affiliates. All rights reserved.