WCAG compliance

Scope

WCAG applies to all non-text content, which includes photographs, illustrations, icons, logos, SVGs, infographics, charts, and image-based controls. It also covers motion and time-based media such as animated GIFs, CSS/SVG/SMIL animations, audio, video, and synchronised media. Requirements focus on ensuring that information conveyed visually or through motion and sound is also available through text alternatives or equivalent programmatic structures.

Images serve multiple roles: decorative, informative, functional (acting as controls), and complex (data visualisations and charts). Each role has different expectations for text alternatives and semantics. Decorative images can be hidden from assistive technologies, while informative and functional images require accurate, succinct alternative text or accessible names that communicate purpose or outcome rather than appearance.

Animated and moving content introduces additional criteria around user control, flashing thresholds, and reduced motion preferences. Audio and video content intersect with captioning, transcripts, audio description, and user controls. Even CSS background images and icon fonts fall within scope if they convey meaning or act as interactive affordances, because their information must be available to assistive technologies and meet contrast requirements when they function as UI components.

WCAG 2.x success criteria relevant to images

The following Success Criteria most directly affect images, icons, animations, and time-based media. They span Levels A and AA and influence how content is named, described, contrasted, and controlled by users.

• 1.1.1 Non-text Content (A): Provide text alternatives for all images; mark purely decorative images so they are ignored by assistive tech.
• 1.4.5 Images of Text (AA): Use real text instead of images of text, except for essential cases like logos.
• 1.4.11 Non-text Contrast (AA): Ensure a 3:1 contrast ratio for graphical objects and UI component states (icons, focus indicators, infographics).
• 2.2.2 Pause, Stop, Hide (A): Provide a way to pause or stop animations that start automatically and last more than five seconds (e.g., GIFs, carousels).
• 2.3.1 Three Flashes or Below Threshold (A): Avoid content that flashes more than three times per second within the specified area and contrast thresholds.
• 2.4.4 Link Purpose (In Context) (A): Linked images and image buttons must have accessible names that convey purpose, not just file names or generic labels.
• 2.5.3 Label in Name (A/AA in later versions): The visible text or label for a control (including icon-only buttons) should match or be included in the accessible name.
• 4.1.2 Name, Role, Value (A): Programmatically expose the role and name for custom image controls and ensure states and values are conveyed to assistive technologies.

Overview

WCAG conformance is claimed against a specific version (e.g., 2.1 or 2.2) and level (A, AA, or AAA). Most organisations target Level AA, which balances feasibility and user benefit. A valid conformance claim defines the scope (which pages, states, and content types are included), the level achieved, any known exceptions, and the accessibility support baseline (the user agents and assistive technologies considered supportable for programmatic techniques used on the site).

For images and media, conformance requires both authoring and design considerations. Authors ensure appropriate alternative text and labelling, while designers and engineers handle contrast, focus indication, motion control, and semantics for custom components. The same asset can be compliant or non-compliant depending on context and implementation—an icon may meet contrast in one colour scheme but fail in another; a chart may be accessible with a data table but inaccessible without it.

WCAG is technology-agnostic and does not prescribe specific formats. It evaluates outcomes. Therefore, SVG, canvas, CSS background images, and <img> elements can all conform if the required information is exposed and controls are operable. Conversely, reliance on images of text, inaccessible custom controls, or unannounced motion can undermine conformance even when the underlying assets are technically optimised for performance.

Testing methods and tools

WCAG testing for images combines automated checks with manual evaluation. Automated scanners can flag missing alt attributes, linked images without accessible names, colour contrast on graphical objects, and detectable flashing patterns. However, determining whether alt text is accurate, whether a graphic is decorative, and whether chart descriptions convey equivalent information requires human judgement and, ideally, input from users of assistive technologies.

Representative user testing with screen readers (e.g., NVDA, JAWS, VoiceOver) and keyboard-only navigation helps validate accessible names, roles, and focus behaviour. Browser accessibility trees and developer tools can be used to inspect the computed accessible name and role for images and icon buttons, and to verify ARIA associations such as aria-labelledby and aria-describedby. For motion, test with reduced-motion preferences enabled and confirm that animations are suppressed or replaced appropriately.

Specialised tools assist with measurement and regression. Contrast analysers check non-text contrast for icons, focus indicators, and data series. Axe, WAVE, Lighthouse, and Accessibility Insights provide rulesets that surface common issues and help track fixes over time. For flashing content, review at different frame rates and sizes to ensure thresholds are not exceeded, and verify that autoplaying media has readily discoverable controls to pause, stop, or hide moving areas.

Overview: WCAG conformance for images affects SEO and UX

Accurate text alternatives improve machine understanding of images, which supports better indexing, richer image search results, and more relevant link context where images act as anchors. While WCAG is not an SEO standard, the semantics and clarity it encourages—alt text aligned to purpose, captions for figures, and descriptive link text—tend to improve content quality signals and click-through experience. Conversely, images of text can hinder responsiveness and text scaling, and they are harder for search engines and users to interpret reliably.

From a user experience perspective, non-text contrast requirements make icons and controls clearer in different themes and on varied displays. Motion control reduces distraction and prevents vestibular triggers for sensitive users, improving task completion and satisfaction. Clear labelling of image-based controls aligns visible labels with accessible names, aiding speech control users and reducing errors for everyone, including mobile users relying on voice or switch input.

Performance and accessibility intersect: replacing images of text with real text yields sharper rendering at different pixel densities, improved localisation, and smaller payloads. Providing alternate text does not directly affect download size, but thoughtful use of decorative imagery and vector icons can reduce complexity while maintaining meaning. The result is a site that is faster to load, easier to navigate, and more resilient to device and network variability.

Implementation notes

Text alternatives and roles

• - Provide concise, purpose-focused alt text for informative images (what the user needs to know, not a literal pixel description).
• - Use empty alt (alt="") or role="presentation" for purely decorative images; avoid empty alt for functional images.
• - For SVG used as UI, ensure a role (e.g., role="img" for standalone graphics) and an accessible name via <title>, aria-label, or aria-labelledby.

Controls, contrast, and motion

• - Ensure icon buttons have visible labels or tooltips and that the accessible name includes the visible label (Label in Name).
• - Meet 3:1 contrast for graphical objects and control states; verify focus indicators are clearly visible against backgrounds.
• - Provide pause/stop/disable mechanisms for moving content lasting over five seconds; respect reduced-motion preferences for animated media.

Complex graphics and media

• - For charts and infographics, pair a short alt with an adjacent caption and an equivalent text alternative (e.g., data table or summary).
• - Avoid images of text except for logos; use real text with CSS for styling and responsiveness.

Comparisons

WCAG is a technical standard, while many legal frameworks reference or incorporate it. For example, US Section 508 and the European EN 301 549 adopt WCAG criteria as the benchmark for web content, making WCAG conformance the practical route to meeting regulatory obligations. In other jurisdictions, general disability discrimination laws may not name WCAG but use it as the accepted measure of accessibility performance in enforcement and settlements.

“ADA compliance” (in a US context) is a legal outcome, not a technical standard. Achieving WCAG 2.1 or 2.2 AA is widely recognised as strong evidence of reasonable accessibility, but legal compliance can also depend on procurement, support, and remediation processes. WCAG AAA offers additional benefits (e.g., enhanced descriptions, higher contrast in some cases), but it is rarely required across whole sites due to feasibility constraints.

Other W3C guidance complements WCAG. UAAG and ATAG address user agents and authoring tools, which can influence how images are produced and consumed. For documents outside HTML (e.g., PDFs), separate standards such as PDF/UA apply, though the intent mirrors WCAG: ensure non-text content has equivalent, programmatically determinable alternatives and controls.

FAQs

Is alt text required for every image?

Every image must be handled, but not every image needs a descriptive alt value. Informative and functional images require meaningful alt text or an accessible name that conveys purpose. Purely decorative images should have empty alt (alt="") or be hidden from assistive technologies so they are skipped. Complex graphics use a short alt plus an adjacent or linked, fuller equivalent in text.

How does non-text contrast apply to icons and infographics?

WCAG 1.4.11 requires a 3:1 contrast ratio between graphical object edges or fills and adjacent colours. For UI icons, check the icon against its background in all interactive states. For infographics, ensure data series, markers, and key lines are distinguishable by contrast and not solely by colour. Thin strokes may need to be visually thicker or darker to meet the effective contrast threshold on typical displays.

Do animated GIFs and auto-rotating carousels violate WCAG by default?

Not by default. They must provide a mechanism to pause, stop, or hide movement if it starts automatically and persists longer than five seconds, and they must avoid flashing above threshold. Respecting the user’s reduced-motion preference is strongly advised. If controls are present but hidden, unlabeled, or hard to operate with a keyboard, the content will not conform even if the animation itself is technically valid.

Does accessible image markup help SEO rankings?

Accessible alternatives improve machine understanding and can enhance image search visibility, featured snippets for figures, and link clarity when images act as anchors. While rankings depend on many factors, accurate alt text and captions often correlate with better relevance signals and engagement, and they reduce ambiguity for crawlers. Avoid keyword stuffing; align alt text with user purpose and on-page context for the best usability and discoverability balance.

Which WCAG level should teams target for images?

Level AA is the prevailing target for public websites and products. It includes foundational requirements for non-text content, images of text, non-text contrast, and motion control that materially affect usability. Level A alone is insufficient for equitable experiences, while Level AAA is aspirational and may be feasible for specific content types (e.g., providing extended descriptions for critical charts) rather than entire sites.