Skip to content

Bridging the Alt-Text Web Accessibility Gap with LLMs

April 8, 2024

Alt-Text Filler: A Chrome Extension for the Inclusive Web

At UWaterloo, my colleagues and I embarked on a project to address a pressing issue in web accessibility: the lack of descriptive alt-text for images. This project culminated in the creation of Alt-Text Filler, a Chrome extension that leverages AI to automatically generate alt-text for images, enhancing web accessibility for visually impaired users.

Chrome Web Store & GitHub repository

Why Alt-Text Matters

Web accessibility is a critical component of creating an inclusive internet. Alt-text, short for 'alternative text,' provides descriptions for images, enabling screen readers to convey the content and context of visuals to visually impaired users. Despite its importance, millions of images online either lack alt-text or have inadequately descriptive tags.

For example, a recent analysis of Canadian governmental websites revealed that up to 44% of images had empty alt-text, posing significant barriers for accessibility. This widespread noncompliance with the Web Content Accessibility Guidelines (WCAG) underscores the need for practical solutions.

Enter Alt-Text Filler

Alt-text Filler Chrome Extension

Alt-Text Filler is a Chrome extension I developed with a collective group of peers to address this gap. It leverages OpenAI’s GPT-4 Vision Preview to automatically detect missing or insufficient alt-text on web pages and replace it with detailed, context-sensitive descriptions.

Key Features:

  • Automated Detection: Scans web pages for images lacking alt-text.
  • AI-Generated Descriptions: Uses GPT-4 Vision Preview to create accurate and nuanced image descriptions.
  • Customizable Output: Users can adjust the level of detail or add specific prompts for enhanced descriptions.
  • Seamless Integration: Inserts the generated alt-text directly into the page for immediate accessibility improvements.

How It Works

1. Installation:

  • Install the extension from the Chrome Web Store.
  • Pin the extension for easy access.
  • Add your OpenAI API key to enable AI-powered functionality.

2. Functionality:

  • The extension scans the active webpage to identify images lacking alt-text.
  • GPT-4 Vision Preview generates descriptive alt-text, incorporating context from the surrounding webpage.
  • Users can review and customize descriptions, tailoring them to their specific needs.

3. Examples in Action:

Alt-text Filler Chrome Extension

Here are a few examples of how the extension transforms web images:

  • Before: An empty alt-text for a photo of two people on a beach.
    After: "Two people wearing hats, sitting on rocks at a beach with green hills and a cross at the top in the background."
  • Before: A blank alt attribute for a world map visualization.
    After: "A world map showing differences in flood prediction relative to GLOFAS for a 2-year event, including years and detailed data."

Research and Insights

The development of Alt-Text Filler was guided by two key studies:

  1. Survey of Alt-Text Quality:
    Respondents rated AI-generated alt-text as highly accurate and more descriptive compared to existing examples. This validated the effectiveness of using GPT-4 Vision Preview for accessibility.

  2. Accessibility Compliance Analysis:
    Using a custom web scraper, I analyzed 75 Canadian governmental websites. Although 96% of images were technically WCAG-compliant, only 90% had sufficiently descriptive alt-text. This highlights the importance of tools like Alt-Text Filler.

Going Beyond Basic Alt-Text

Alt-Text Filler isn’t limited to filling gaps—it also enhances existing descriptions. With additional prompts, users can request specific details, such as:

  • Colors: "A red bicycle leaning against a green tree on a sunny day."
  • Emotional Tones: "A cheerful group of friends enjoying a picnic."
  • Scene Context: "A bustling street market with vendors selling fresh produce."

These features provide a richer experience for screen reader users, making content more engaging and informative.

Conclusion

Alt-Text Filler bridges a crucial gap in web accessibility by automating the process of generating and improving alt-text. This extension empowers content creators, developers, and everyday users to prioritize inclusivity, ensuring that everyone can access and enjoy the web.

Try it for yourself!

Install Alt-Text Filler from the Chrome Web Store.

For developers or contributors interested in exploring the project further, visit the GitHub repository.