A11y Annotations for Mobile
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.
The kit has been copied over 900 times by the Figma community, shared by the a11y community, and used by Twitter employees for emerging features.
→ Go to A11y Annotations on Figma
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
woah this is awesome! hoping more design teams will release resources like this that help push accessibility forward ❤️@tiffanyxjiang
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).
- Create a comprehensive set of accessibility annotations that go beyond just web to support mobile-first design practices
- 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)
- Joey Banks and I co-designed an initial set of annotations for web
- We usability tested that set with engineers at Twitter and asked them what was missing
- We implemented their feedback and expanded the set to include mobile (iOS, Android)
- We recorded educational Loom videos with Twitter engineers to educate those new to using a11y annotations
- We published the kit on Figma, making it available to the design community
Initial Figma Prototype
We sourced 3 participants who were engineers at Twitter and were interested in making their products more accessible.
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.
- Describe what you see in the Figma file, components page, and what information you think you can find
- Have a look at each annotations section. What do you think these are and what do you think you can do with them?
- From your perspective, what went well with using the annotations?
- Will you describe any areas of the annotations that you had questions about?
- What is one aspect of the annotations that you think you’d use during your design or dev process?
- What is one aspect that you think you would not use?
- Did you notice any parts of the annotations that were confusing or difficult to use?
- 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
- Annotations would need to be manually adapted to point to components and be compatible with dark mode
- Needed more education on how to use the annotations and why they supported accessibility
Final Figma Prototypes
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.