Twitter Alt Text Features – Extended

Side-by-side iOS screens display the ALT badge. The "before" screen displays the badge in the lower left-hand corner of an image of a statue in Thailand on the Twitter timeline. The "after" screen shows that exact same image with a bottom sheet modal pulled up visually displaying the alt text for the statue.

Twitter Alt Text Features

Summary

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.

Role

Lead accessibility designer and researcher

Press

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

Alt Text Reminder
TechCrunch
The Verge (during testing)
The Verge (after launch)
Digital Trends
Social Media Today
A11y Weekly

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

@the_tattooedjew

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

Motivation

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

Process

User interview icon

User-Centered Design

We began with an engineering prototype so screen reader users could access it (Figma was inaccessible at the time)

Pencil and ruler icon

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

Pointer finger with string tied around icon

Reminder Fast-Follow

As a fast-follow, an alt text reminder—that needed to balance education and intervention—helped increase adoption on the platform

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

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.

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 prototype of the alt text badge that we showed participants was created by an engineer, to sidestep Figma’s inaccessibility at the time of the study.

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, most (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

Final Figma Prototype

iOS

Twitter timeline on iOS with a tweet from @lauren_race of a picture of an aged statue deep in the thick jungle of Chiang Mai, Thailand. There is a blue sky over many green trees. A small badge that reads "ALT" sits in the lower left-hand corner of the image.
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". At the bottom is a "Dismiss" button.

Android

Twitter timeline on Android with a tweet from @lauren_race of a picture of an aged statue deep in the thick jungle of Chiang Mai, Thailand. There is a blue sky over many green trees. A small badge that reads "ALT" sits in the lower left-hand corner of the image.
A modal overlay on Android 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". At the bottom is a "Dismiss" button.

Web

Twitter timeline on the web with a tweet from @lauren_race of a picture of an aged statue deep in the thick jungle of Chiang Mai, Thailand. There is a blue sky over many green trees. A small badge that reads "ALT" sits in the lower left-hand corner of the image.
A modal overlay on web 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". At the bottom is a "Dismiss" button.

Alt Text Reminder

A Twitter user tweeting, "Morning espresso I must have." There's a modal sheet overlay over the composed tweet that reads: "Don't forget to make your image accessible. Good image descriptions are concise yet detailed. Be sure to summarize or write out any text in the image itself. Your description makes Twitter accessible to people with disabilities, and everyone who wants more context. You can turn off this reminder in Accessibility Settings." Beneath are two buttons that read, respectively, "Add descriptions" and "Not this time".
We used a modal sheet to add a light intervention that was educational and supportive for those new to writing alt text
The accessibility settings in iOS, with toggles for reduce motion, video autoplay, open links in Reader View, and "Receive image description reminder".
Accessibility settings in the Twitter iOS app

Apparently it’s being rolled out from today. I hope lots of people will use this awesome new #AltText reminder feature! What a wonderful accessibility present for my birthday, thanks @TwitterA11y

@BlondeHistorian

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