Twitter Alt Text Features – Design

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

Context

Problem

Only 0.06% of images on Twitter have image descriptions (or alt text) for screen reader users. For the few images with descriptions, the only way to access them is with a screen reader.

Summary

I designed and evaluated an alt text badge on Twitter, indicating images with alt text and displaying the alt text visually, supporting non screen-reader users who magnify content or want more context around an image. Afterwards, we launched an alt text reminder to encourage adoption. Both features have more than tripled alt text frequency on the platform.

Platform: iOS, Android, Responsive Web

Timeframe: Q4 2021 – Q1 2022

Constraints: I navigated usability testing while Figma was inaccessible to screen reader users, and—coming out of 10 years of Adobe Creative Suite expertise—becoming proficient in Figma within a set timeframe

Role: Responsible and accountable for all accessibility design. Additionally, I stepped in to fill our team’s a11y researcher gap

How do you balance design intervention with positive change?

Process

Magnifying glass icon

Generative Research

I began by investigating what other companies were doing and partnering with a quant researcher to ask our customers how valuable these features would be to them

Pencil and ruler icon

Prototyping

I leveraged an engineering prototype to usability test how the feature functioned before engaging Twitter’s Design System. Then I designed the first alt text reminder for feedback from Twitter’s head of design

User interview icon

Usability Testing

I conducted usability testing for the badge and alt text reminder to see if customers could use them with little friction. With feedback from customers, I designed how the features would look and function across devices

Generative Research

I began by familiarizing myself with Twitter’s current alt text user experience. You could add alt text to images in the composer, but there was no way to tell if posted images had alt text without a screen reader nor was there a reminder in case you forgot to add it.

Twitter composer view of a Chiang Mai statue with a small round ALT button and paintbrush in the bottom right-hand corner
View of the Twitter alt text editor which overlays on top of the image

Next, I conducted a competitive analysis to determine what other social platforms were doing well with alt text adoption and where they could improve.

Competitive Analysis Key Takeaways

  • Some competitors (3/9) rely on automated alt text, which can misidentify components critical to context like race, gender, disability, etc.
  • Most competitors (6/9) allow users to add custom alt text but the feature is hard to find.
  • Some competitors (3/9) remind users to add alt text but all come from activists or academics.

I wanted data to show that sometimes user friction, like the reminder, is worth it if it removes access barriers. So, I partnered with a quantitative researcher to field a survey, to a random sample of 581 Twitter users, to quantify customer need. The majority (70%) of respondents felt that an alt text reminder was at least very valuable to their experience. This finding motivated my design work.

A bar graph that answers the question: "How valuable is a reminder to add alternative text to images that you want to include in a Tweet?" It shows that 7% of customers thought it was not at all valuable to their experience, 7% thought it was slightly valuable to their experience, 28% thought it was very valuable to their experience, and 42% thought it was extremely valuable to their experience

Prototyping

Alt Text Badge

Before jumping into the badge in Figma, I found out from the engineering manager that one of the a11y web engineers already had a working prototype of the alt badge. I saw this as an opportunity to—not only collaborate with the engineer—but to usability test how the badge functioned before engaging Twitter’s Design System.

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 the engineer created allowed me to usability test in a screen reader-friendly environment

Alt Text Reminder

Working the Design Systems team I was embedded in, I designed the first prototypes in Figma.

Twitter’s primary design rule: don’t slow down customers from tweeting. This presented some major challenges with encouraging accessible media creation, while keeping Twitter’s business objective.

So, I kept it lightweight and supportive to increase alt text awareness, added education to improve alt text writing skills, and included an a11y icon for friendliness. I presented the work to Twitter’s head of design to get feedback on the overall principle that we wanted to maintain when designing a11y features, balancing design constraints with positive change.

Proposed solutions of 1) a modal sheet that lets you add a description, reminds you later, and lets you turn the reminder off; 2) an inline prompt for a habit-building lightweight reminder; 3) a modal sheet reminder when the user tries to retweet images without alt text along with a mockup of Twitter's accessibility settings
The first round of prototypes for the alt text reminder
Other Explorations
A half modal sheet that reads "Describing your image makes Twitter accessible to the 1 in 6 people with. a disability" with short instructions on how to write good alt text by telling a story, summarizing text, and not including photo credits
With our content designer, I tried a version motivating with disability prevalence statistics and avoiding alt text misuse
A half modal sheet that reads "Help make Twitter accessible to everyone" with short instructions on how to describe what's happening, use up to 1,000 characters, and summarize text
I tried friendly bullet icons to help customers parse out simple instructions for effective alt text writing
Composer inline prompt that reads "Don't forget to add descriptions. to make your images accessible. Select the +Alt button"
I tried an inline callout in composer, intervening with customers about to post their images without alt text

Usability Testing

Recruiting

I partnered with Design Ops, 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). For the alt badge, we used usertesting.com and for the reminder we used a screener survey.

Procedure

For the alt text badge, I showed participants an early prototype of a tweet of an image with alt text that displayed the badge. For the reminder, I showed participants prototypes in Figma.

Alt Badge Tasks
  1. Read alt text for an image without using a screen reader
  2. Close the alt text badge modal
Alt Badge 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?
Reminder Tasks
  1. Read the alt text reminder prompt
  2. Use the prompt’s directions to write alt text for an image of the NY marathon
Reminder Key Questions
  1. What do you think alt text does?
  2. What do you think the alt text reminder does?
  3. Do you prefer the term “alt text” or “image description”?

Alt Badge Key Findings

  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

Reminder Key Findings

  1. All participants (5/5) reported that the the alt reminder directions were easy to use and were able to write effective alt text, though a few questions came up around how short is “keeping it short” and what constitutes “good” alt text
  2. All participants (5/5) understood the purpose of the alt text reminder
  3. All participants (5/5) preferred “image description” over “alt text” because it was easier to understand

Final Design

Implementing Action Items from Research

Through several iterations I identified and implemented action items from key findings:

Alt Badge

  • Kept alt badge as-is—in pill form—to avoid covering more of the media
  • Used a “Dismiss” button, instead of an “X”, for clarity
  • Applied Twitter’s Design System to make sure the UI was consistent with design standards

Reminder

  • Prioritized “image description” over “alt text” for clarity and accessibility
  • Focus the language less around novice education and more around a11y practitioners who simply don’t want to forget to tweet without alt text

iOS Timeline

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.

iOS On Click

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 Timeline

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.

Android On Click

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.

Responsive Web Timeline

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.

Responsive Web On Click

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.

iOS 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".

Android Reminder

An Android modal sheet overlay over a 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".

Responsive Web Reminder

A responsive web overlay over a 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".

Outcomes

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

Moved the Needle

Before launch in Q1 2022, only .06% of images on Twitter had alt text. After we shipped, alt text adoption more than tripled, increasing images with alt text to .26%. We moved the needle but we clearly still have a long way to go.

Set an Industry Baseline

The badge has been adopted by President Biden’s account and adapted for Slack’s consumer product, setting an industry baseline for how alt text should be presented visually to non-screen reader users.

President Biden's Twitter with the half modal sheet activated that reads "President Biden, Secretary Raimondo, and President Yoon of South Korea pose for a photo with others outside a Samsung factory
Biden’s Twitter account using the alt text badge (I also sent this screenshot to my dad <3)
Screen shot of a Slack conversation in the a11y channel. An image with an alt badge is activated reading out the alt text in a modal overlay
Slack’s version of the alt text badge.
An animated GIF of a cursor clicking a small black badge with an italicized "I" in the middle, which pulls up a modal that displays the alt text: "Georgina Kleege holds a white cane on her left shoulder and pets a multisensory white cat pillow that purrs and smells like cat shampoo, while 3 students observe."
WordPress has added their version of the alt text badge.

Fulfilled a Promise to #DisabilityTwitter

We also fulfilled a promise to the disability community on Twitter, shipping two highly-requested features—the badge and reminder—asked for even before the team was formed.

Alt Text Badge

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

Alt Text Reminder

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
Scroll to top