Twitter Alt Text Features
We designed and evaluated an alt text badge on Twitter, indicating images with alt text and displaying the alt text visually. Afterwards, we launched an alt text reminder to encourage adoption.
Before launch in Q1 2022, only .06% of images on Twitter had alt text. The badge has more than tripled that number post-launch, increasing images with alt text to .26% as of Q3 2022. The badge has been adopted by President Biden’s account and replicated on Slack.
Thank you, can’t wait for this to roll out to everyone. It will be a huge step forward for the Blind community #Accessibility@victordimanet
As a low vision user having a pop out box which I can access quickly really helps. And as an accessibility advocate it’s useful to have public evidence of who isn’t using alt text!@BlondeHistorian
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
We began with an engineering prototype so screen reader users could access it (Figma was inaccessible at the time)
Design for Mobile & Web
With feedback from 5 participants, I designed how the badge would look and function on Figma across responsive web, Android, and iOS
As a fast-follow, an alt text reminder—that needed to balance education and intervention—helped increase adoption on the platform
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).
I showed participants an early prototype on Twitter—designed by an engineer on my team to avoid Figma’s inaccessibility at the time—by adding them to the allow list. I 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, most (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
Final Figma Prototype
Alt Text Reminder
Saw this new feature was available when I opened Twitter this morning, turned it on immediately! Describe your images! Make Twitter more accessible!@emily_ladau
I could not be happier, and this wouldn’t have happened without all of you proving that there was a demand. The bot will remain active after the general release, but I will be checking on it less often. I’ll be redirecting my energy to working on a library for sharing alt text.@AltTxtReminder