SIA-R86Elements 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 elements that are marked as decorative are not exposed to assistive technologies.

Applicability

This rule applies to every element which is marked as decorative.

Expectations

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

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has the following accessibility support concern:

• Implementation of presentational roles conflict resolution differs slightly between user agents. Notably, concerning elements that are focusable but not reachable by sequential focus navigation, or elements with an aria-hidden attribute set to true.

Examples

Passed

This <img> element is marked as decorative through its alt attribute and is not included in the accessibility tree because of the aria-hidden attribute.

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

This <nav> element is marked as decorative through its role attribute and has a semantic role of none.

<nav role="none">
    <a href="https://sitemprove.com/" aria-label="Siteimprove">Siteimprove</a>
</nav>

This <button> element is marked as decorative through its role attribute; since it is disabled, it is not focusable and has a semantic role of presentation.

<button role="presentation" disabled>Click me!</button>

Failed

This <nav> element is marked as decorative through its role attribute but has a non-empty aria-label attribute causing it to be included in the accessibility tree with its implicit role of navigation.

<nav role="none" aria-label="global">
    <a href="https://siteimprove.com/" aria-label="Siteimprove">Siteimprove</a>
</nav>

This <img> element is marked as decorative through its empty alt attribute but has a non-empty aria-labelledby attribute causing it to be included in the accessibility tree with its implicit role of img.

<img src="https://picsum.photos/100" alt="" aria-labelledby="label" />
<span hidden id="label">A decorative image</span>

This <button> element is marked as decorative through its role attribute but is included in the accessibility tree with its implicit role of button because it is focusable (by default).

<button role="presentation">Click me!</button>

Inapplicable

Inapplicable Example 1

This <img> element is not marked as decorative.

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

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/46ca7f/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).