Twitter Alt Text Badge
We designed and evaluated an alt text badge which 1) indicated whether an image has alt text; and 2) exposed the alt text visually in modal
Accessibility designer and researcher
Only 0.06% of images on Twitter have image descriptions (or alt text) and are accessible to screen reader users. Adoption rates are low due to general awareness of alt text
Further, some Low Vision users use screen magnifiers and benefit from visual alt text
- Increase alt text adoption by exposing it to non-screen reader users
- Support users who only want to retweet content that has alt text
- Determine if our solution is easy to use and understand
An alt text badge, which marks which images have alt text and provides users with an option to show alt text visually
- We usability tested an early prototype created by one of the team’s engineers
- With feedback from 5 participants, we designed how the badge would look and function on Figma, using Twitter’s design system
- I partnered with our team’s content designer to make sure language was clear, concise, and accessible
We used usertesting.com to source 5 participants, 18+, with an even balance of gender identities, who had experience using Twitter and a range of experience using alt text on Twitter (from having experience with alt text to no experience)
We showed participants an early prototype on Twitter, designed my my team’s engineers, by adding them to the allow list. We showed them a tweet of an image with alt text that displayed the badge.
- Read alt text for an image without using a screen reader
- Close the alt text badge modal
- How do you think you could expose the alt text here?
- What do you think you can do with this modal?
- How did that go for you? What do you think about exposing alt text to all users?
- How did that go for you [closing the modal]? Did you have any issues?
- When tasked with exposing alt text, the majority of (4/5) participants knew to click on the alt badge without help
- All participants (5/5) noted that the alt badge was small and hidden
- All participants (5/5) knew how to close the alt badge modal using the “Dismiss” button
- All participants (5/5) preferred “image description” over “alt text” because it was easier to understand
- Keep the alt badge as-is, in pill form, to avoid covering more of the media
- Use a “Dismiss” button, instead of an “X”, for clarity
- Apply Twitter’s design system to make sure the UI is consistent with design standards
What’s more important than a Twitter ‘edit’ button? Accessible posts. Alt text. Don’t tweet without it.@lindseyjfine