The Alt Text Viewer

Designing a cross-platform system that allows low vision users to read an image’s alt text without activating a screen reader.

Platform: Desktop / iOS

Role:  UX Researcher and UI Designer

Project Type: Social Media Feature Add-On, Vibe-Coded Google Chrome Extension

Industry: Accessibility, Social Media, AI

Tools: Figma, Claude, Zoom, Descript, Whimsical

View Prototype

Click the button below the image
to display its alt text

Alt Text

Summary:
A new way for viewing alt text

What if there were a way to make Alt Text accessible to everyone?

People who have low vision use a wide variety of tools, from magnification to screenreaders, to accomplish their day-to-day needs,

For sighted and low vision users, Alt text is inaccessible without a screen reader. It is displayed when a screenreader user navigates over an image, but not everyone uses a screenreader all the time. Thus, alt text is actually hidden for people who might learn information from an image that they cannot see.

Inspired by a suggestion from a friend who has low vision, we built a tool that could make alt text visible to everyone. We explored where it should be visually displayed relative to the image it is describing (above? below? on top of?). We then build a chrome extension using Claude that displays Alt text visually, and can be activated for a low vision user's complete desktop browser experience.

Explore four ways alt text can be delivered to the user below.

Background:

What is alt text?

Alternative (alt) text is a textual substitute for non-text content in web pages. - webaim.org

Read More About Alt Text

Alternative text serves several functions: Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images. If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image. Search engines use alternative text and factor it into their assessment of the page purpose and content.

About Blindness and Low Vision:

As said by one user during our usability study:
“Blind people are not a monolith. Everybody does things a little differently."

Only 15% of legally blind people are totally blind. That's 3 out of every 20.

Read More About Blindness and Low Vision

Blindness is a spectrum; people who have low vision have varying degrees of visual acuity. How they see at any given moment is influenced by the relative brightness of the world around them, time of day, room lighting, eye fatigue, and more.

About Accessibility in General:

Accessibility is the design of products, devices, services, vehicles, or environments to be usable by disabled people. Accessibility is also a cornerstone of great design.

Read More About Accessibility In General

There are a variety of reasons why accessibility is a deeply important consideration in digital design. For starters, it’s simply the right thing to do - it is a way to break a cycle of exclusionary practices towards people with disabilities and provide an experience that they can use. It’s also a tenet of good design. Design is fundamentally the practice of making the world a more friendly and usable place for all. All too often, sighted designers prioritize the visual world alone - focusing on pixel-perfect experiences but not necessarily creating accessible ones. These two things should go hand-in-hand. Lastly, there is a strong business case for Accessibility. According to The World Economic Forum, “By 2030 the global assistive technology market is expected to be worth $31.22 billion. 3.5 billion people will be using assistive products by 2050.”

Isn't there already a simple way to display Alt Text visually for low vision users?

No, not really. In part this is because many of the conversations around alt text are rooted in compliance and SEO, not the low vision end user's experience.

Our comparative analysis explored existing Alt Text plugins and services, all of which do very different things.

Read the Full Report

User Interviews:
Everybody's needs are different

Panel Size

5 Participants

All participants were legally blind and had low vision, with vision conditions including retitinitis pigmentosa, retinopathy prematurity, and achromatopsia.

Alt Text Affinity Map

Click to view the full affinity map

Mode

20-40 minute interviews

Interviews discussed screen readers, AI, image description, alt text, and other accessibility concerns.

A few key quotes from our user interviews:

“Text is a very simple, predictable thing... an image could be anything!”

“If the alt text is too long, I’ll just turn on VoiceOver instead.”

“[Visually displaying Alt Text] is a gateway drug for sighted people to get more accustomed to the idea of accommodations.” 

Summary of a key findings:

Every user has different needs. No two people use the same combination of accessibility tools or settings across multiple devices.

Most users use mobile as their primary way of navigating the web and social media.

AI vs. Humans. Whoever's writing it, the user wants to know!

Read More

User and Task Flows:
One Image, Many Options

Full User Flow - showing different branching paths for the user's mind map

Based on user research, our user flow needs to account for the myriad ways that a user could choose to interact with an image.

Some users in some circumstances wouldn’t bother with an alt text button. Several factors are at play - including their environment, level of interest in a specific post, what information they’re hoping to obtain etc. They might look at the image and decide they want more information, so they push an Alt Text display  button or activate a screen reader. 

Task flow of specific Alt Text button flow

Our task flow needed to focus on this specific new feature - adding an Alt Text Display button, and what that experience might look and feel like.

Our user interviews taught us that, if the Alt Text was generated by AI, users wanted some kind of clear notification that a human played no part in writing it. 

Our First Prototype:
Simplify, and Magnify

Our first prototype displayed two images side-by-side in a Facebook post. One displays an image whose Alt Text was written manually by a real person, and the other was written by AI. The user clicks the "Alt" button on the bottom right to switch between displaying the alt text and the image.

Iterative Feedback

Click a button to view the iterations our users recommended.

Additional Notes

The next prototype should utilize large print, and the button shouldn't block the image.

Low vision users recommended we build the next iteration of the prototype around a low vision user’s native iOS large size text settings. We received a screenshot from one low vision user which proved to be the springboard for our second prototype.

Lastly, the button shouldn't block the image itself - because the user might be missing valuable information that is obscured by the button.

High Fidelity Prototyping:
An A/B Test


The most significant changes made in our next prototype?

Large print text, a monochromatic high-contrast button, and a new "person" icon.

Like our first prototype, this one also is an A/B test - though we're testing different things. The two tasks that the users were asked to accomplish, though nearly identical, presented both: a way to compare how alt text was displayed and a springboard for a conversation around AI vs. Human generated content.

Which one would users prefer?

Version A?

A. Alt text overlayed on top of the image

Click the alt text button below to display its alt text

Version B?

B. Alt text displayed beneath the image

Click the alt text button below to display its alt text

There are pros and cons for each approach.

Displaying Alt Text on top of the image keeps the text within a predictable boundary, and introduces fewer variables as the text's container is defined by the dimensions of the image. However, in order to read the text, we would need to darken the image in a consistent way, rendering the image unviewable while the user is reading.

Displaying Alt Text below the image allows the user to read the text at the same time as they are viewing the image, which is a distinct difference. However, it may nudge the surrounding content around awkwardly to accommodate alt text of inconsistent lengths.

Usability Testing:
B as in Best

Key Findings:

We have a winner - Version B it is!

One Size doesn't fit all. But there are use cases for an Alt Text Visualizer.

Avoid All Caps in Alt Text

Iterations and Next Steps:
The tip of the iceberg

Having settled on a layout for Alt Text display button and its physical relationship to its associated image, we revised our prototype to reflect those changes.

Our final prototype displayed both images using the same approach (alt text displays below the image, not on top of it), as dictated by user testing.

Here is our final high fidelity prototype (Click to Open)

Down the Road

Several nice-to-have features should be considered, were this button to find its way onto social media platforms in earnest. These include:

  • An activation switch in the app's Accessibility settings menu, to turn the feature on and off.


  • Cross platform, and Cross-Meta compatibility including full iOS and Desktop functionality, responsive for all screens with a consistent design approach across Instagram, Threads, and Whatsapp.


  • Create Post + Write Your Own Alt Text. Encouraging users to write their own alt text when uploading an image, similar to the approach found in Bluesky (see below).

Bluesky's platform for posting images encourages users to write alt text for their images in a way that no other social media platform does. The copy and UI make an strong case for the user to write their own alt text, and adoption has likely increased as a result

  • Additional layers of AI analysis built into AI-generated alt text display. This would allow the user to get more granular information about the image - allowing them to choose general or microscopic levels of detail, for example.


  • Alt text display for multiple images at once. Currently the tool is designed to showcase alt text for posts that display a single image. How would the tool display alt text for an image carousel?


  • “No Alt Text” button - a version of the button that alerts the user when no alt text (either AI-generated or user-written) is present.

Custom Chrome Extension:
Try it today

We took user feedback from usability testing and pointed it toward designing and developing a Chrome Extension in Claude that allows the user to toggle the display of Alt Text on or off.

We're calling it the ATV - Alt Text Viewer

Want to try it out yourself? Download the ATV below and follow these steps to install the ATV on your desktop browser.

DOWNLOAD

The ATV in action