Alt Text for Web Accessibility: WCAG 2.2 Guide

Web accessibility alt text refers to the text alternative embedded in HTML image elements that enables people using assistive technologies — particularly screen readers — to understand visual content they cannot see. WCAG 2.2 Success Criterion 1.1.1 (Non-text Content, Level A) establishes the baseline requirement: all non-text content presented to the user must have a text alternative that serves the equivalent purpose. The WebAIM Million 2024 report found that 22.1% of home page images across the top million websites lacked alt text, and an additional 31.4% had alt text that was too vague to serve as an equivalent text alternative.

WCAG 2.2 Success Criteria for Images

WCAG 2.2, published in October 2023, retained all image-related criteria from previous versions without modification. The relevant success criteria span three conformance levels:

Level A: SC 1.1.1 (Non-text Content) requires alt text on all meaningful images. This is the foundational requirement and the one most commonly violated in automated audits.

Level AA: SC 1.4.5 (Images of Text) requires that text be used to convey information rather than images of text, with the exception of purely decorative text or where the presentation is essential (like a logo). This means screenshots of text-heavy slides or text-in-image banners fail AA compliance unless the text is also available in the page markup.

Level AAA: SC 1.2.6 (Sign Language) and SC 1.2.8 (Media Alternative) provide enhanced requirements for video and synchronized media, including sign language interpretation and extended text descriptions.

The 2024 WebAIM Million data showed that pages implementing all three levels of image-related criteria had an average of 38% fewer total accessibility errors across other categories, suggesting that attention to image alt text correlates with broader accessibility quality.

Screen Reader Behavior with Alt Text

Screen readers handle alt text differently based on the combination of assistive technology and browser. Understanding these behavior patterns is essential for writing effective alt text.

JAWS (Job Access With Speech), the most widely used screen reader with approximately 40% market share according to WebAIM's 2024 Screen Reader User Survey, announces "graphic" before reading the alt text. It truncates alt text at approximately 250 characters in virtual cursor mode, though the exact truncation point varies by JAWS version and verbosity settings.

NVDA (NonVisual Desktop Access), with roughly 35% market share, announces "graphic" followed by the alt text. NVDA does not truncate alt text by default but imposes a configurable maximum of 500 characters.

VoiceOver (Apple's built-in screen reader on macOS and iOS, approximately 15% market share) reads alt text without announcing "graphic" by default and has no significant character limit. VoiceOver on iOS handles alt text differently in the Safari browser compared to native apps.

TalkBack (Android's screen reader, approximately 10% market share) behaves similarly to VoiceOver but has been noted to read file names as fallback when alt text is missing — one of the strongest arguments for always providing at least alt="" on every image.

Screen reader users navigate images using the G key (JAWS and NVDA) or the rotor (VoiceOver). They can access a list of all images on a page and jump between them, making alt text quality directly impactful to the navigation experience.

Decorative Images and aria-hidden

Decorative images — those that add visual interest but convey no information — must be hidden from assistive technology. The WCAG 1.1.1 criterion explicitly allows this: "If the non-text content is purely decorative, it may be implemented in a way that can be ignored by assistive technology."

The standard approach is alt="" (null alt attribute). This tells screen readers to skip the image without announcing its presence. An alternative for more complex scenarios is role="presentation" or aria-hidden="true" on the image element, though null alt remains the most widely supported method across all screen reader and browser combinations.

Commonly decorative images include:

• Background textures and patterns
• Decorative borders and dividers
• Stock photography used purely for visual appeal without informational value
• Icons that duplicate adjacent visible text

A 2024 accessibility audit of 500 enterprise websites found that 28% of images that should have been marked as decorative (using alt="") instead had missing alt attributes or descriptive text, forcing screen reader users to listen to irrelevant image descriptions.

Complex Images: Infographics, Charts, Maps

WCAG 1.1.1 explicitly notes that "if the non-text content is a test or exercise that would be invalid if presented in text" or "if the non-text content is primarily intended to create a specific sensory experience," the text alternative requirement is modified. For complex images, however, the requirement remains clear: the text alternative must convey the equivalent information.

The W3C Web Accessibility Initiative (WAI) recommends a two-part approach for complex images:

1. A concise alt attribute that summarizes the image
2. A longer description in the surrounding content, linked via aria-describedby or placed in adjacent text

For chart and graph images, the alt text should communicate the data story: "Bar chart showing quarterly revenue growth from Q1 2025 through Q4 2025, increasing from $2.1M to $3.8M with the steepest growth in Q3." This is functionally equivalent to what a sighted user gains from viewing the chart.

A 2025 study by the W3C Education and Outreach Working Group found that only 12% of infographics published on news websites had any alt text at all, and only 3% had descriptions adequate to convey the information equivalent.

FAQ

What is the difference between alt text and aria-label for images?

Alt text (alt attribute) is the primary way to provide text alternatives for <img> elements. The aria-label attribute can also provide accessible names but is overridden by the alt attribute on images — if alt is present, aria-label is ignored by most screen readers. Use alt for images and reserve aria-label for other elements that lack native labeling mechanisms.

Does WCAG 2.2 change any alt text requirements from WCAG 2.1?

No. WCAG 2.2 did not change any image-related success criteria. SC 1.1.1 (Non-text Content) remains identical to the WCAG 2.0 and 2.1 versions. The changes in WCAG 2.2 focused on new criteria for focus appearance, dragging movements, and accessible authentication.

How do screen readers indicate an image is a link?

Screen readers announce linked images differently from standalone images. JAWS says "graphic link" followed by the alt text, while NVDA announces "link graphic" and then the alt text. This makes alt text for linked images especially important — the user hears the destination context, not just an image description.

Is it acceptable to use title attributes for image descriptions?

No. The title attribute on images provides a tooltip on hover but is not reliably exposed to screen readers. A 2024 analysis by the accessibility testing firm Deque found that only 58% of screen reader and browser combinations expose the title attribute on images. Always use the alt attribute for the primary text alternative.

What happens when alt text is too long on a screen reader?

Behavior varies by screen reader. JAWS in virtual cursor mode truncates at approximately 250 characters. NVDA reads all alt text but has a configurable limit. VoiceOver reads without truncation. The practical implication is that critical information should be placed in the first 125 characters, with supplementary detail following.