# Images and Media Alt text strategies, decorative vs informative images, time-based media alternatives. ## Criteria | Standard | Criteria | | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | WCAG 2.2 | 1.1.1 Non-text Content (A), 1.2.1 Audio-only/Video-only (A), 1.2.2 Captions Prerecorded (A), 1.2.3 Audio Description or Alternative (A), 1.2.4 Captions Live (AA), 1.2.5 Audio Description Prerecorded (AA), 1.4.2 Audio Control (A), 1.4.5 Images of Text (AA) | | RGAA 4.1 | 1.1–1.9 Images, 4.1–4.13 Multimedia | --- ## Theme 1: Images (RGAA 1.1–1.9) ### Criterion 1.1 — Informative image has a text alternative (A) WCAG: 1.1.1 Non-text Content (A) **Test 1.1.1** — `` or `role="img"` informative image has a text alternative. Methodology: 1) Find `` or `role="img"` elements. 2) Determine if informative. 3) For ``, check at least one of: `aria-labelledby`, `aria-label`, `alt`, `title`. 4) For `role="img"`, check: `aria-labelledby` or `aria-label`. 5) If at least one found, pass. **Test 1.1.2** — `` informative zone has a text alternative. Methodology: 1) Find `` elements. 2) Determine if informative. 3) Check at least one of: `aria-label`, `alt`. 4) If found, pass. **Test 1.1.3** — `` has a text alternative. Methodology: 1) Find ``. 2) Determine if informative. 3) Check at least one of: `aria-labelledby`, `aria-label`, `alt`, `title`. 4) If found, pass. **Test 1.1.4** — Server-side image map (``) clickable zones are doubled with a device-independent mechanism. Methodology: 1) Find ``. 2) Verify a link/set of links (or similar component like a select list) provides access to the same resources. 3) If yes, pass. **Test 1.1.5** — `` informative image has `role="img"` AND a text alternative. Conditions: `` has `role="img"` + text alternative. Methodology: 1) Find ``. 2) Determine if informative. 3) Check `role="img"`. 4) If missing, fail. 5) Check at least one of: `` content, `aria-labelledby`, `aria-label`. 6) If found, pass. **Test 1.1.6** — `` informative image meets one of: has `role="img"` + text alternative; OR is followed by adjacent link/button to alternative content; OR a mechanism replaces it with alternative content. Methodology: 1) Find ``. 2) Determine if informative. 3) Check `role="img"`. 4) Check at least one of: `aria-labelledby`, `aria-label`, `title`. 5) If found, pass. 6) Otherwise check: adjacent link/button to alternative content, OR replacement mechanism. 7) If yes, pass. **Test 1.1.7** — `` informative image meets one of: has `role="img"` + text alternative; OR adjacent link/button; OR replacement mechanism. Methodology: same pattern as 1.1.6 applied to ``. **Test 1.1.8** — `` informative image meets one of: has `role="img"` + text alternative; OR fallback content between `...`; OR adjacent link/button; OR replacement mechanism. Methodology: 1) Find ``. 2) Determine if informative. 3) Check `role="img"`. 4) Check: `aria-labelledby` or `aria-label`. 5) If found, pass. 6) If steps 3-4 fail, check: fallback content between tags, adjacent link/button, or replacement mechanism. 7) If yes, pass. Note: if `` has `role="img"`, only step 4 techniques are valid. --- ### Criterion 1.2 — Decorative image is correctly ignored by AT (A) WCAG: 1.1.1 (A), 4.1.2 (A) **Test 1.2.1** — Decorative `` (without caption) has `alt=""` with no other alt attributes, OR has `aria-hidden="true"` or `role="presentation"`. Methodology: 1) Find decorative `` without caption. 2) Verify no `aria-labelledby`, `aria-label`, or `title` AND has either `alt=""`, or `aria-hidden="true"` / `role="presentation"`. 3) If yes for all, pass. **Test 1.2.2** — Decorative `` (no `href`) has `alt=""` with no other alt attributes, OR `aria-hidden="true"` / `role="presentation"`. Methodology: same pattern as 1.2.1 for `` without `href`. **Test 1.2.3** — Decorative `` (without caption) has `aria-hidden="true"`, no alt text, no fallback text between tags. Methodology: 1) Find decorative `` without caption. 2) Verify no `aria-labelledby`, `aria-label`, `title` AND has `aria-hidden="true"` AND no alternative text AND no content between tags. 3) If yes, pass. **Test 1.2.4** — Decorative `` (without caption) has `aria-hidden="true"`, no alt text on element or children, no ``/`` (or empty), no `title` attribute on element or children. Methodology: 1) Find decorative `` without caption. 2) Verify no `aria-labelledby`/`aria-label` AND has `aria-hidden="true"` AND no alt on children AND no ``/`` (or empty) AND no `title` attr on element/children. 3) If yes, pass. **Test 1.2.5** — Decorative `` (without caption) has `aria-hidden="true"`, no alt text, no fallback content between tags. Methodology: same pattern as 1.2.3 for ``. **Test 1.2.6** — Decorative `` (without caption) has `aria-hidden="true"`, no alt text. Methodology: 1) Find decorative `` without caption. 2) Verify no `aria-labelledby`, `aria-label`, `title` AND has `aria-hidden="true"` AND no alt. 3) If yes, pass. Technical note: When an image has a caption, WCAG recommends always providing a text alternative (see criterion 1.9) -- criterion 1.2 is N/A. For decorative `` using ``, test 1.2.4 also applies to the referenced ``. `role="presentation"` can be used; `role="none"` (ARIA 1.1 synonym) also works but `"presentation"` is preferred for better support. --- ### Criterion 1.3 — Informative image alternative is relevant (A) WCAG: 1.1.1 (A), 4.1.2 (A) **Tests 1.3.1–1.3.7** — For each image type, the text alternative must be relevant (hors cas particuliers): - **1.3.1**: `` / `role="img"` — check `alt`, `title`, `aria-label`, `aria-labelledby` are relevant. - **1.3.2**: `` — same checks. - **1.3.3**: `` — same checks. - **1.3.4**: `` — check `title`, `aria-label`, `aria-labelledby`, alternative content. - **1.3.5**: `` — same as 1.3.4. - **1.3.6**: `` — check ``, `aria-label`, `aria-labelledby`. - **1.3.7**: `` — check `title`, `aria-label`, `aria-labelledby`, alternative content. **Test 1.3.8** — `` with fallback content between tags: content is correctly rendered by AT. Methodology: 1) Find `` with content between tags. 2) Verify AT renders it correctly. 3) If yes, pass. **Test 1.3.9** — Every informative image alternative is short and concise (hors cas particuliers). Methodology: 1) Find images with alt text. 2) Verify alt is short and concise. 3) If yes, pass. Cas particuliers: CAPTCHA and test images -- criterion is N/A when providing a relevant alt would defeat the CAPTCHA/test purpose. See criterion 1.4. --- ### Criterion 1.4 — CAPTCHA/test image alternative identifies nature and function (A) WCAG: 1.1.1 (A) **Tests 1.4.1–1.4.7** — For each image type used as CAPTCHA or test image, the text alternative must identify its nature and function (e.g., "Security CAPTCHA" or "Colour vision test"): - **1.4.1**: `` — check `alt`, `title`, `aria-label`, `aria-labelledby` are relevant. - **1.4.2**: `` — same checks. - **1.4.3**: `` — same checks. - **1.4.4**: `` — check `alt`, `title`, `aria-label`, `aria-labelledby`, alternative content. - **1.4.5**: `` — same as 1.4.4. - **1.4.6**: `` — check `alt`, `title`, `aria-label`, `aria-labelledby`. - **1.4.7**: `` — same as 1.4.4. Methodology (all): 1) Find image elements used as CAPTCHA/test image with alt text. 2) Verify alt identifies nature/function. 3) If yes, pass. --- ### Criterion 1.5 — CAPTCHA has an alternative access solution (A) WCAG: 1.1.1 (A) **Test 1.5.1** — Each image (``, ``, ``, ``, ``, ``, `role="img"`) used as CAPTCHA has at least: another non-graphical CAPTCHA form, OR another access solution to the secured functionality. Methodology: 1) Find CAPTCHA images. 2) Verify either a non-graphical CAPTCHA alternative or another access solution exists. 3) If yes, pass. **Test 1.5.2** — Each `` needing detailed description has one of: `longdesc` URL; alt text referencing adjacent description; adjacent link/button to description. Methodology: 1) Find informative `` (or `role="img"`) needing detailed description. 2) Verify one mechanism exists. 3) If yes, pass. **Test 1.6.2** — `` — same conditions minus `longdesc`. **Test 1.6.3** — `` — same conditions. **Test 1.6.4** — `` — same conditions, plus `aria-describedby`. **Test 1.6.5** — `` — one of: `aria-label` with reference to adjacent description; `aria-labelledby` associating alt text + description passages; `aria-describedby` to description passage; adjacent link/button. **Test 1.6.6** — `` with detailed description via `aria-label`, `aria-labelledby`, or `aria-describedby`: content is correctly rendered by AT. **Test 1.6.7** — `` — one of: `aria-label` with reference; `aria-labelledby` associating passages; content between `...` referencing or containing description; adjacent link/button. **Test 1.6.8** — `` with description via `aria-label`/`aria-labelledby`/`aria-describedby`: correctly rendered by AT. **Test 1.6.9** — Any image type using `aria-describedby` for detailed description: the attribute correctly associates the description. **Test 1.6.10** — `role="img"` element needing detailed description: same conditions as 1.6.5. Technical notes: - For SVG, ``/`` lack AT support; prefer `aria-label` or `aria-labelledby`. - `aria-describedby` is not recommended for ``, ``, ``, `` due to poor AT support, but when used must reference the description container's `id`. - Adjacent description can use `
` (then criterion 1.9 must also be met). - `longdesc` is obsolete in current HTML spec; only required for pre-HTML5. --- ### Criterion 1.7 — Detailed description is relevant (A) WCAG: 1.1.1 (A) **Tests 1.7.1–1.7.6** — For each image type with a detailed description, the description must be relevant: - **1.7.1**: `` — check `longdesc` target, in-page description referenced by alt, adjacent link/button target, `aria-describedby` passage. - **1.7.2**: `` — check in-page description, adjacent link/button target, `aria-describedby`. - **1.7.3**: `` — check in-page description, adjacent description, link/button target, `aria-describedby`. - **1.7.4**: `` — same as 1.7.3. - **1.7.5**: `` — check in-page description referenced by alt or ``/``, adjacent `<desc>`, link/button target, `aria-describedby`. - **1.7.6**: `<canvas>` — check in-page description referenced by alt or content between tags, content between tags, adjacent description, link/button target, `aria-describedby`. Methodology (all): 1) Find images with detailed description. 2) Verify description is relevant. 3) If yes, pass. --- ### Criterion 1.8 — Image of text should be replaced by styled text (AA) WCAG: 1.4.5 Images of Text (AA) **Tests 1.8.1–1.8.6** — For each image-of-text type, if informative and no replacement mechanism, it should use styled text instead: - **1.8.1**: `<img>` / `role="img"` - **1.8.2**: `<input type="image">` - **1.8.3**: `<object type="image/...">` - **1.8.4**: `<embed type="image/...">` - **1.8.5**: `<canvas>` - **1.8.6**: `<svg>` (only when text is NOT fully structured via `<text>` elements) Methodology (all): 1) Find image-of-text elements. 2) Verify either a replacement mechanism exists, OR the graphical effect cannot be reproduced in CSS. 3) If yes, pass. Cas particuliers: Logos, brand names, CAPTCHA, test images, and images where graphical fidelity is essential to the information -- criterion is N/A. Technical note: Text inside SVG `<text>` elements is real text and not subject to this criterion. --- ### Criterion 1.9 — Image caption is correctly associated (A) WCAG: 1.1.1 (A), 4.1.2 (A) **Tests 1.9.1–1.9.5** — For each image type with a caption, all conditions must be met: 1. Image and caption are inside a `<figure>` element. 2. `<figure>` has `role="figure"` or `role="group"`. 3. `<figure>` has `aria-label` matching the caption content. 4. Caption is inside `<figcaption>`. Applies to: - **1.9.1**: `<img>`, `<input type="image">`, `role="img"` - **1.9.2**: `<object type="image/...">` - **1.9.3**: `<embed>` - **1.9.4**: `<svg>` - **1.9.5**: `<canvas>` Methodology (all): 1) Find captioned images of the given type. 2) Verify all 4 conditions. 3) If yes, pass. Technical note: `role="group"` or `role="figure"` on `<figure>` compensates for poor native AT support. Using `<figcaption>` requires at minimum `aria-label` on `<figure>` matching the caption. For optimal support, explicitly associate the image alt text with the `<figcaption>` content. `aria-labelledby`/`aria-describedby` on `<figure>` are not currently recommended due to lack of AT support. Captioned images must also satisfy criteria 1.1 and 1.3. --- ## Theme 4: Multimedia (RGAA 4.1–4.13) ### Criterion 4.1 — Prerecorded time-based media has a transcript or audio description (A) WCAG: 1.2.1 Audio-only/Video-only (A), 1.2.3 Audio Description or Alternative (A) **Test 4.1.1** — Prerecorded audio-only media has a text transcript (hors cas particuliers). Conditions: transcript via adjacent link/button, OR clearly identifiable adjacent transcript. Methodology: 1) Find audio-only `<audio>`, `<video>`, `<object>`. 2) Verify transcript via link/button (URL or anchor) or adjacent and identifiable. 3) If yes, pass. **Test 4.1.2** — Prerecorded video-only media has one of (hors cas particuliers): audio-only version via adjacent link/button; adjacent audio-only version; transcript via adjacent link/button; adjacent transcript; synchronized audio description; alternative version with audio description via adjacent link/button. Methodology: 1) Find video-only `<video>` or `<object>`. 2) Verify at least one condition. 3) If yes, pass. **Test 4.1.3** — Prerecorded synchronized media has one of (hors cas particuliers): transcript via adjacent link/button; adjacent transcript; synchronized audio description; alternative version with audio description via adjacent link/button. Methodology: 1) Find synchronized `<video>` or `<object>`. 2) Verify at least one condition. 3) If yes, pass. Cas particuliers (applies also to 4.2, 4.3, 4.5): - Media is decorative (provides no information). - Media is itself an alternative (sign language video, text vocalization). - Media is used for enlarged version access. - Media is used as CAPTCHA. - Media is part of a test that would be defeated by providing transcript/captions/audio description. - Public sector: media published between 23/09/2019–23/09/2020 on sites created after 23/09/2018 is exempt. - Private sector (art. 47): media published before 23/09/2020 is exempt. --- ### Criterion 4.2 — Prerecorded media transcript/audio description is relevant (A) WCAG: 1.2.1 (A), 1.2.3 (A) **Test 4.2.1** — Prerecorded audio-only with transcript: transcript is relevant (hors cas particuliers). Methodology: 1) Find audio-only with transcript. 2) Verify transcript is relevant. 3) If yes, pass. **Test 4.2.2** — Prerecorded video-only: one of the following is relevant (hors cas particuliers): transcript; synchronized audio description; audio description of alternative version; audio-only alternative version. Methodology: 1) Find video-only with transcript. 2) Verify at least one is relevant. 3) If yes, pass. **Test 4.2.3** — Prerecorded synchronized media: one of the following is relevant (hors cas particuliers): transcript; synchronized audio description; audio description of alternative version. Methodology: 1) Find synchronized media. 2) Verify at least one is relevant. 3) If yes, pass. Cas particuliers: see criterion 4.1. --- ### Criterion 4.3 — Prerecorded synchronized media has captions (A) WCAG: 1.2.2 Captions Prerecorded (A) **Test 4.3.1** — Prerecorded synchronized media has synchronized captions, OR an alternative version with captions accessible via adjacent link/button (hors cas particuliers). Methodology: 1) Find synchronized prerecorded media. 2) Verify captions or alternative version with captions. 3) If yes, pass. **Test 4.3.2** — Captions delivered via `<track>` element must have `kind="captions"`. Methodology: 1) Find synchronized media with `<track>` captions. 2) Verify `kind="captions"`. 3) If yes, pass. Cas particuliers: see criterion 4.1. --- ### Criterion 4.4 — Prerecorded synchronized media captions are relevant (A) WCAG: 1.2.2 (A) **Test 4.4.1** — Captions are relevant: all important audio information is present (dialogue especially) AND correctly synchronized. Methodology: 1) Find synchronized media with captions. 2) Verify captions are relevant and synchronized. 3) If yes, pass. --- ### Criterion 4.5 — Prerecorded media has synchronized audio description (AA) WCAG: 1.2.5 Audio Description Prerecorded (AA) **Test 4.5.1** — Prerecorded video-only has synchronized audio description, OR an alternative version with audio description (hors cas particuliers). Methodology: 1) Find video-only needing audio description. 2) Verify audio description or alternative version via adjacent link/button. 3) If yes, pass. **Test 4.5.2** — Prerecorded synchronized media has synchronized audio description, OR alternative version with audio description (hors cas particuliers). Methodology: 1) Find synchronized media needing audio description. 2) Same verification. 3) If yes, pass. Cas particuliers: see criterion 4.1. --- ### Criterion 4.6 — Prerecorded audio description is relevant (AA) WCAG: 1.2.5 (AA) **Test 4.6.1** — Video-only audio description is relevant (all visual information that can be vocalized in audio gaps is present, including on-screen text). Methodology: 1) Find video-only with audio description. 2) Verify relevance. 3) If yes, pass. **Test 4.6.2** — Synchronized media audio description is relevant (same conditions). Methodology: 1) Find synchronized media with audio description. 2) Verify relevance. 3) If yes, pass. --- ### Criterion 4.7 — Time-based media is clearly identifiable (A) WCAG: 1.1.1 (A) **Test 4.7.1** — Each audio-only, video-only, or synchronized media has adjacent text content (title, paragraph) that clearly identifies it (hors cas particuliers). Methodology: 1) Find time-based media. 2) Verify an immediately preceding or following text passage identifies the media AND the text is outside the player if Flash is used. 3) If yes, pass. Cas particuliers: decorative media -- criterion is N/A. --- ### Criterion 4.8 — Non-temporal media has an alternative (A) WCAG: 1.1.1 (A) **Test 4.8.1** — Non-temporal media has a clearly identifiable adjacent link/button to a page with an alternative, OR to an in-page alternative. Methodology: 1) Find non-temporal media. 2) Verify adjacent link/button to alternative page or in-page alternative. 3) If yes, pass. **Test 4.8.2** — Non-temporal media alternative is accessible: the referenced page is accessible, OR the in-page alternative is accessible. Methodology: 1) Find non-temporal media with alternative. 2) Verify the alternative page/content is accessible. 3) If yes, pass. Cas particuliers: decorative non-temporal media; controlled environment; media inserted via JS with plugin check replacing existing alternative content -- criterion is N/A. --- ### Criterion 4.9 — Non-temporal media alternative is relevant (A) WCAG: 1.1.1 (A) **Test 4.9.1** — Alternative provides access to the same content and similar functionalities. Methodology: 1) Find non-temporal media with alternative. 2) Verify alternative is relevant (same content, similar functionalities). 3) If yes, pass. --- ### Criterion 4.10 — Automatically triggered sound is user-controllable (A) WCAG: 1.4.2 Audio Control (A) **Test 4.10.1** — Any auto-playing sound via `<object>`, `<video>`, `<audio>`, `<embed>`, `<bgsound>`, or JavaScript meets one of: duration <= 3 seconds; user can stop it; user can control volume independently of system volume. Methodology: 1) On page load, if sound plays automatically, verify one condition is met. 2) If yes, pass. Note: elements that can trigger auto-play: `<audio>`, `<video>`, `<object>`, `<embed>`, `<bgsound>`, JavaScript (Web Audio API). --- ### Criterion 4.11 — Time-based media controls are keyboard and pointer accessible (A) WCAG: 2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A) **Test 4.11.1** — Time-based media has required control functionalities: at minimum play/pause/stop; if has audio: mute/unmute; if has captions: show/hide captions; if has audio description: show/hide audio description. Methodology: 1) Find time-based media. 2) Verify all applicable controls are present. 3) If yes, pass. **Test 4.11.2** — Each media control is keyboard and pointer accessible, OR an equivalent accessible control exists in the page. Methodology: 1) Find media with controls. 2) Verify each is accessible by keyboard and pointer, or an equivalent accessible control exists. 3) If yes, pass. **Test 4.11.3** — Each media control is keyboard and pointer activable, OR an equivalent activable control exists in the page. Methodology: 1) Find media with controls. 2) Verify each is activable by keyboard and pointer, or an equivalent exists. 3) If yes, pass. --- ### Criterion 4.12 — Non-temporal media controls are keyboard and pointer accessible (A) WCAG: 2.1.1 (A), 2.1.2 (A) **Test 4.12.1** — Each non-temporal media control is keyboard and pointer accessible, OR an equivalent accessible control exists. Methodology: 1) Find non-temporal media with controls. 2) Verify accessibility or equivalent. 3) If yes, pass. **Test 4.12.2** — Each non-temporal media control is keyboard and pointer activable, OR an equivalent activable control exists. Methodology: 1) Find non-temporal media with controls. 2) Verify activability or equivalent. 3) If yes, pass. --- ### Criterion 4.13 — Media is compatible with assistive technologies (A) WCAG: 4.1.2 Name, Role, Value (A) **Test 4.13.1** — Each time-based and non-temporal media meets one of (hors cas particuliers): name, role, value, settings, and state changes of UI components are accessible to AT via accessibility API; OR an AT-compatible alternative provides access to the same functionalities. Methodology: 1) Find all media. 2) Verify API accessibility (e.g., dynamically updated player zones are correctly rendered) or compatible alternative. 3) If yes, pass. **Test 4.13.2** — Media with AT-compatible alternative: alternative is adjacent to the media; OR accessible via adjacent link/button; OR a mechanism replaces the media with its alternative. Methodology: 1) Find media with AT-compatible alternative. 2) Verify one access method. 3) If yes, pass. Cas particuliers: decorative media -- criterion is N/A. --- ## Patterns ### Images ```html <!-- Informative: describe content --> <img src="chart.png" alt="Sales increased 25% from Q1 to Q2" /> <!-- Decorative: empty alt --> <img src="border.png" alt="" /> <!-- Functional: describe action --> <a href="/"><img src="logo.png" alt="Home" /></a> ``` **Shopify** — escape CMS content to prevent XSS: ```liquid <img src="{{ image | image_url }}" alt="{{ image.alt | default: '' | escape }}" {%- if image.alt == blank %} role="presentation"{% endif %} /> ``` **React (SanityPicture):** ```tsx <SanityPicture image={data.image} alt={data.image.alt || ''} desktopSize={{ width: 800 }} /> ``` If image has no alt and is not decorative, write a descriptive alt — don't leave it blank. ### Media **Video with captions and audio description:** ```html <video controls> <source src="video.mp4" type="video/mp4" /> <track kind="captions" src="captions-fr.vtt" srclang="fr" label="Français" /> <track kind="descriptions" src="descriptions-fr.vtt" srclang="fr" label="Audiodescription" /> </video> ``` **Audio with transcript link:** ```html <audio controls> <source src="podcast.mp3" type="audio/mpeg" /> </audio> <a href="/transcript-episode-1">Read transcript</a> ```