Text Alternative

A text alternative is text that serves as a substitute for non-text content on the web. Non-text content includes images, icons, audio files, video, charts, graphs, animations, CAPTCHAs, and any other content that is not plain text. The text alternative conveys the same information or serves the same purpose as the non-text content, making it accessible to people who cannot perceive the original format. Text alternatives are one of the most fundamental concepts in web accessibility. They bridge the gap between visual or auditory content and the text-based interfaces that assistive technologies depend on. Screen readers convert text to speech. Braille displays convert text to tactile output. Neither can process an image or audio file directly, but both can handle the text that describes it. WCAG Success Criterion 1.1.1 (Non-text Content) is a Level A requirement, the most basic level of conformance, reflecting the fundamental importance of text alternatives. It applies to virtually every web page because nearly all pages contain some form of non-text content.

The web is rich with visual and auditory content. Photos communicate brand identity. Icons indicate functionality. Charts present data. Videos explain concepts. Audio recordings deliver podcasts and music. For the hundreds of millions of people worldwide with visual, auditory, or cognitive disabilities, this content is inaccessible without text alternatives. A blind user encountering an image without alt text hears nothing useful. The screen reader may announce the file name ("IMG_3847.jpg") or skip the image entirely. Either way, the information the image conveys is lost. A deaf user watching a video without captions misses the spoken dialogue and narration. A user with a cognitive disability may need a simple text summary to understand a complex infographic. Text alternatives also benefit people without disabilities. Search engines cannot index images or audio; they rely on text alternatives to understand and rank non-text content. Users on slow connections who disable image loading see alt text in place of images. Users who browse with images disabled for privacy or bandwidth reasons depend on alt text for context.

Different types of non-text content require different forms of text alternatives: **Images** use the `alt` attribute to provide text alternatives. The content of the alt text depends on the image's purpose: ```html <!-- Informative image: describe what it shows --> <img src="team-photo.jpg" alt="The development team at the 2026 company retreat"> <!-- Functional image: describe the action --> <img src="search-icon.png" alt="Search"> <!-- Decorative image: empty alt to be skipped --> <img src="decorative-border.png" alt=""> <!-- Complex image: brief alt plus detailed description --> <img src="revenue-chart.png" alt="Q3 2025 revenue chart" aria-describedby="chart-desc"> <div id="chart-desc"> Revenue grew from $2.1M in July to $2.8M in September, a 33% increase driven primarily by enterprise sales. </div> ``` **Video content** requires multiple text alternatives: captions for spoken dialogue and significant sounds, audio descriptions for visual-only information, and transcripts that combine both. **Audio content** requires transcripts that provide a text version of the spoken content, sound effects, and speaker identification. **Icons and symbols** used as interactive elements need text alternatives through `aria-label`, visually hidden text, or the `alt` attribute if using `<img>`. **CAPTCHAs** must provide alternative versions accessible to different disability groups, such as an audio CAPTCHA alternative to a visual one. **Guidelines for writing effective text alternatives:** - **Consider the context.** The same image may need different alt text depending on the page context. A photo of a building on a real estate listing needs detailed description; the same photo as a decorative header does not. - **Convey function, not just appearance.** For functional images like buttons and links, describe what happens when the user interacts, not what the image looks like. - **Be concise.** Aim for the shortest description that captures the essential information. Avoid phrases like "image of" or "picture of" since the screen reader already announces the element as an image. - **Don't omit the alt attribute.** An absent `alt` attribute is different from an empty one. Missing `alt` causes screen readers to announce the file name. Empty `alt=""` correctly signals a decorative image. - **Provide long descriptions for complex content.** Charts, graphs, infographics, and diagrams often need more detail than a brief alt text can provide. Use `aria-describedby`, a linked description page, or a `<details>` element.