SIA-R67Images and SVG that are marked as decorative are not exposed to assistive technologies

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that images and SVG that are marked as decorative are not exposed to assistive technologies.

Applicability

This rule applies to every <img> and <svg> element which is marked as decorative.

Expectations

1. The element either is not included in the accessibility tree or has a semantic role of none or presentation.

Assumptions

This rule makes the following assumption:

• Elements that are marked as decorative are pure decoration. If this is not the case, this rule may fail while 1.1.1 is still satisfied. Note that marking as decorative an element which is not pure decoration is not necessarily an accessibility issue but is nonetheless bad practice and should be avoided.

Accessibility support

This rule has the following accessibility support concerns:

• There exists a known combination of a popular browser and an assistive technology that does not by default support use of the HTML title attribute as an accessible name.

• Implementation of the presentational roles conflict resolution differs slightly from one user-agent to the other. Notably, concerning elements that are focusable but out of sequential focus navigation, or elements with an aria-hidden attribute set to true.

Examples

Passed

This <img> element is marked as decorative because of its empty alt attribute. It also has a semantic role of presentation because of the same.

<img src="https://picsum.photos/100" alt="" />

The alt attribute is ignored when the element has an explicit role attribute with a presentational role, hence this <img> element is marked as decorative and has a semantic role of presentation.

<img
    src="https://picsum.photos/100"
    role="presentation"
    alt="A decorative image"
/>

This <img> element has is marked as decorative through its role attribute. It not included in the accessibility tree due to the aria-hidden attribute.

<img src="https://picsum.photos/100" role="presentation" aria-hidden="true" />

Failed

This <img> element is marked as decorative through its role attribute but has a semantic role of img due to the aria-label attribute triggering presentational roles conflict resolution.

<img
    src="https://picsum.photos/100"
    role="none"
    aria-label="A placeholder image"
/>

This <img> element is marked as decorative through its alt attribute but has a semantic role of img due to its presence in sequential focus navigation order triggering the presentational roles conflict resolution.

<img src="https://picsum.photos/100" alt="" tabindex="0" />

Inapplicable

This <img> element is not marked as decorative.

<img src="https://picsum.photos/100" alt="A placeholder image" />