Twitter Alt Text Badge – Design

Screen shot on a blue background of a tweet from "Twitter User" which shows a statue in Thailand and a small alt badge in the lower left-hand corner

Twitter Alt Text Badge

Summary

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

Role:
Accessibility designer and researcher

Problem

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

Objectives

  1. Increase alt text adoption by exposing it to non-screen reader users
  2. Support users who only want to retweet content that has alt text
  3. Determine if our solution is easy to use and understand

Solution

An alt text badge, which marks which images have alt text and provides users with an option to show alt text visually

Twitter iOS with @lauren_race tweeting an image of a statue in Thailand with a small alt badge in the bottom left-hand corner
A modal overlay on iOS that appears when the user taps the alt badge and displays the text: "Image description. An aged statue deep in the thick jungle of Chiang Mai, Thailand. There is a blue sky over many green trees"

Design Process

  1. We usability tested an early prototype created by one of the team’s engineers
  2. With feedback from 5 participants, we designed how the badge would look and function on Figma, using Twitter’s design system
  3. I partnered with our team’s content designer to make sure language was clear, concise, and accessible

Usability Testing

Recruiting

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)

Procedure

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.

Screenshot of a tweeted image of an accessibility design exhibition with a small alt badge in the lower left-hand corner. It was tweeted at 11:01 am on 9/13/21 on an iPhone
The tweet of an image with alt text that we showed participants

Tasks

  1. Read alt text for an image without using a screen reader
  2. Close the alt text badge modal

Key Questions

  1. How do you think you could expose the alt text here?
  2. What do you think you can do with this modal?
  3. How did that go for you? What do you think about exposing alt text to all users?
  4. How did that go for you [closing the modal]? Did you have any issues?

Design Feedback

Key Takeaways

  1. When tasked with exposing alt text, the majority of (4/5) participants knew to click on the alt badge without help
  2. All participants (5/5) noted that the alt badge was small and hidden
  3. All participants (5/5) knew how to close the alt badge modal using the “Dismiss” button
  4. All participants (5/5) preferred “image description” over “alt text” because it was easier to understand

Design Recommendations

  1. Keep the alt badge as-is, in pill form, to avoid covering more of the media
  2. Use a “Dismiss” button, instead of an “X”, for clarity
  3. Apply Twitter’s design system to make sure the UI is consistent with design standards

Figma Prototype

iOS

Android

Web

Outcome

Moving the Needle

As of June 2022, Twitter has gone from .06% before launch to 1.3% in alt text usage post launch on the platform. A small step but the needle is moving!

Press

TechCrunch
The Verge (during testing)
The Verge (after launch)
Can I Play with That?
Mashable

Twitter is finally allowing us to see if other people’s images have alt text! #DisabilityTwitter @TwitterA11y

@the_tattooedjew

What’s more important than a Twitter ‘edit’ button? Accessible posts. Alt text. Don’t tweet without it.

@lindseyjfine

I can natively see alt text in the app now. Way to go, @TwitterA11y (and whoever else was involved)

@lrthreads
Scroll to top