Is each decorative image correctly ignored by assistive technologies?
A screen reader that encounters an unmasked decorative image will announce it: "graphic", "graphic", "graphic" — before each section, at every passage. The user accumulates audio noise without receiving any useful information. Masking decorative images is a matter of respect.
A decorative image is one whose disappearance would deprive no one of any information: visual separator, artistic background, purely ornamental icon. It is the counterpart to criterion 1.1: where 1.1 requires an alternative for informative images, 1.2 requires silence for decorative ones.
For an <img>, the canonical method is alt="" (empty attribute, not absent — if the attribute is missing, the screen reader reads the filename). For <svg>, <canvas>, <object> and <embed>, it is aria-hidden="true" that handles neutralization. In all cases, the presence of aria-labelledby, aria-label or title cancels neutralization, regardless of the technique used otherwise.
6 tests to ensure that decorative images are correctly ignored
Decorative images <img>
For each decorative <img> without caption on the page:
- Verify that the element does NOT have
aria-labelledby,aria-labelortitleattributes. - Verify that it has AT LEAST one of the following attributes:
alt=""(empty attribute)aria-hidden="true"role="presentation"
- If both conditions are met for each image concerned, the test is validated.
Decorative hotspots <area>
For each decorative <area> (without href attribute) in clickable images on the page:
- Verify that the element does NOT have
aria-labelledby,aria-labelortitleattributes. - Verify that it has AT LEAST one of the following attributes:
alt=""(empty attribute)aria-hidden="true"role="presentation"
- If both conditions are met for each zone concerned, the test is validated.
Decorative image objects <object>
For each <object type="image/..."> decorative without caption on the page:
- Verify that the tag does NOT have
aria-labelledby,aria-labelortitleattributes. - Verify that all three of the following conditions are met:
- The element has
aria-hidden="true" - It has no text alternative
- No alternative content is present between
<object>and</object>
- The element has
- If all these conditions are satisfied for each image, the test is validated.
Decorative SVG <svg>
For each <svg> decorative without caption on the page:
- Verify that the element does NOT have
aria-labelledbyoraria-labelattributes. - Verify that all four of the following conditions are met:
- The element has
aria-hidden="true" - Neither the
<svg>nor its children have a text alternative - Any
<title>and<desc>are empty of content - Neither the
<svg>nor its children have atitleattribute
- The element has
- If all these conditions are satisfied for each SVG, the test is validated.
Decorative canvas <canvas>
For each <canvas> decorative without caption on the page:
- Verify that the element does NOT have
aria-labelledby,aria-labelortitleattributes. - Verify that all three of the following conditions are met:
- The element has
aria-hidden="true" - It has no text alternative
- No alternative content is present between
<canvas>and</canvas>
- The element has
- If all these conditions are satisfied for each image, the test is validated.
Decorative elements <embed>
For each <embed type="image/..."> decorative without caption on the page:
- Verify that the element does NOT have
aria-labelledby,aria-labelortitleattributes. - Verify that both of the following conditions are met:
- The element has
aria-hidden="true" - It has no text alternative
- The element has
- If these conditions are satisfied for each image, the test is validated.
Examples
❌ Non-compliant : Decorative image with non-empty alt
<img src="separateur-ondule.png" alt="Séparateur décoratif">The alt attribute is not empty: NVDA announces "graphic, Decorative separator" at each occurrence. The user receives valueless information that clutters navigation, especially if the pattern repeats across multiple pages.
✅ Compliant : Decorative image correctly masked with empty alt
<img src="separateur-ondule.png" alt="">The empty alt tells assistive technologies that the image conveys no information. NVDA, JAWS and VoiceOver ignore it completely. No spurious announcement for the user.
❌ Non-compliant : Decorative SVG with exposed title
<svg width="24" height="24">
<title>Floral decoration</title>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
</svg>The <title> is restituted by screen readers: the element is exposed in the accessibility tree with the name "Floral decoration". The user hears a description for an element that should say nothing.
✅ Compliant : Decorative SVG correctly masked
<svg aria-hidden="true" focusable="false" width="24" height="24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
</svg>aria-hidden="true" excludes the entire SVG from the accessibility tree. focusable="false" prevents older versions of IE and Edge from making it keyboard focusable. Double protection, zero announcement.
Tips and pitfalls
⚠️ Missing alt is not alt=""
An <img> without an alt attribute is different from an <img alt="">. When alt is missing, NVDA and JAWS read the source filename: "graphic, separateur-ondule-bleu-2024.png". This is the most frequent error in RGAA audits. Always write alt="", never omit the attribute.
⚠️ title cancels neutralization
<img src="deco.png" alt="" title="Decoration"> is non-compliant: the title attribute is restituted by some screen readers even when alt is empty. RGAA explicitly forbids it: a decorative image must not carry any of the title, aria-label or aria-labelledby attributes.
💡 SVG: always add focusable="false"
Internet Explorer and pre-Chromium versions of Edge rendered SVGs keyboard-focusable by default. Adding focusable="false" to the <svg> never hurts on modern browsers and fixes behavior on older ones. It is a defensive line to systematize.
⚠️ A captioned image is always informative
According to RGAA, an image inserted in a <figure> with a <figcaption> is systematically considered information-bearing. The presence of a caption demonstrates that the image justifies context. There is no compliant decorative captioned image: if a caption is present, the image falls under criterion 1.1.
⚠️ CSS images: outside the scope of criterion 1.2
An image loaded via background-image, background, content (pseudo-elements) or list-style-image does not appear in the HTML DOM. Assistive technologies ignore it automatically. No action required: criterion 1.2 concerns only elements present in the markup.
⚠️ role="presentation" accepted only for <img> and <area>
alt="", aria-hidden="true" and role="presentation" are all three accepted by RGAA to neutralize an <img> or an <area>. On the other hand, for decorative <svg>, <canvas>, <object> and <embed>, only aria-hidden="true" is accepted. This distinction is specific to RGAA: WCAG are less prescriptive on this point.
Frequently asked questions
How do you determine if an image is decorative or informative?
Mentally remove the image from the page. If the loss of information is zero — the content remains fully understandable — the image is decorative. If a user who does not see the page loses useful information (data, context, instruction), the image is informative and falls under criterion 1.1.
What is the difference between alt="" and aria-hidden="true" for a decorative image?
alt="" leaves the image in the accessibility tree but without name or announced role: it is the native HTML method, recommended for <img>. aria-hidden="true" removes the entire element from the tree, which is necessary for <svg>, <canvas>, <object> and <embed> that do not have an alt attribute. The result perceptible to the user is identical in both cases: no announcement.
How to audit RGAA criterion 1.2 on decorative images in practice?
Browse the page with NVDA + Firefox or JAWS + Chrome and note each image announcement. If a decorative image is announced, examine its code: missing or non-empty alt, title present, aria-label on an SVG. Browser developer tools complement the audit: a node with aria-hidden="true" or an ancestor with aria-hidden displays the message "Accessibility node not exposed", confirming that the image is properly ignored.
How to handle a decorative <img> placed inside a link according to RGAA?
If the link contains only the image with no visible text, no: the image is the sole bearer of the link name and must have an alt describing the destination. It then falls under criterion 1.6. If the link also contains relevant visible text, the image can have alt="" — the link text is sufficient to identify the destination.
How to use role="presentation" to hide a decorative SVG from screen readers?
No, not according to RGAA 4.1. For decorative <svg>, only aria-hidden="true" is accepted (test 1.2.4). role="presentation" is allowed for <img> and <area> only. This clarification appears in RGAA tests: applicable criteria differ depending on element type.