A11y Annotations for Mobile – Design

Text reads "Accessibility: Annotation Library" with a11y annotations that mark the Twitter logo as "AllyName: Twitter Logo", "Accessibility" as H1, and "Annotation Library" as H2

A11y Annotations for Mobile


Summary

Twitter needed an efficient, scalable way for designers to communicate accessibility needs to the developers, that assumed no prior accessibility experience and supported a mobile-first design process. So, we designed and released the first comprehensive kit of accessibility annotations that included mobile via Twitter’s Design System.

The kit has been copied over 1k times by the Figma community, shared by the a11y community, and used by Twitter employees for emerging features.

→ Go to A11y Annotations on Figma

Role

Lead accessibility designer and researcher partnering with Joey Banks

One thing I like about the @TwitterA11y annotation library is that it uses symbols with its annotations. I also like that they have variants for light and dark backgrounds. I’m trying to observe what different libraries do well and integrate them.

@annaecook

New #Ally annotation drop from @lauren_race and @joeyabanks 🔥

@getstarkco

woah this is awesome! hoping more design teams will release resources like this that help push accessibility forward ❤️

@tiffanyxjiang

Motivation

Problem

WCAG 2.1 is a long, technical document with a steep learning curve for designers. Accessibility annotations (Deque, Indeed) help designers understand WCAG criteria but, until now, there were no annotations for mobile (iOS, Android).

Objectives

  1. Create a comprehensive set of accessibility annotations that go beyond just web to support mobile-first design practices
  2. As a hands-on design exercise, teach designers accessibility by doing (“I hear and I forget, I see and I remember, I do and I understand.” —Xunzi (340 – 245 BC)

Process

  1. Joey Banks and I co-designed an initial set of annotations for web
  2. We usability tested that set with engineers at Twitter and asked them what was missing
  3. We implemented their feedback and expanded the set to include mobile (iOS, Android)
  4. We recorded educational Loom videos with Twitter engineers to educate those new to using a11y annotations
  5. We published the kit on Figma, making it available to the design community

Initial Figma Prototype

Web


Usability Testing

Recruiting

We sourced 3 participants who were engineers at Twitter and were interested in making their products more accessible.

Procedure

We showed participants the initial Figma prototype for web and used tasks and thinking aloud. We concluded by asking follow-up questions about how the annotations worked and did not work for them.

Tasks

  1. Describe what you see in the Figma file, components page, and what information you think you can find
  2. Have a look at each annotations section. What do you think these are and what do you think you can do with them?

Key Questions

  1. From your perspective, what went well with using the annotations?
  2. Will you describe any areas of the annotations that you had questions about?
  3. What is one aspect of the annotations that you think you’d use during your design or dev process?
  4. What is one aspect that you think you would not use?
  5. Did you notice any parts of the annotations that were confusing or difficult to use?

Design Feedback

Key Takeaways

  1. The iOS and Android engineers asked us to expand the web set to include mobile. These would need to be designed from scratch, since annotations for mobile were nonexistent
  2. Annotations would need to be manually adapted to point to components and be compatible with dark mode
  3. Needed more education on how to use the annotations and why they supported accessibility

Design Recommendations

  1. Adapted Apple’s Accessibility for UIKit and Android For Developers documentation to create annotations for mobile
  2. Add Figma variants for light and dark, arrow position, and annotation type to increase usability for designers
  3. Create educational Looms to demonstrate how to use the annotations

Final Figma Prototypes

iOS


Android


Web


Educational Videos

To support designers wanting to learn how to use accessibility annotations, we recorded a series of educational videos linked to in the Figma file for each type of corresponding annotation. This allowed designers to learn on their own time and at their own pace.

Scroll to top