What This Rule Checks
The role=”presentation” or role=”none” attributes are used to remove the semantic meaning of an element, making them invisible to assistive technologies like screen readers. However, these roles should not be applied to elements that have ARIA attributes, are focusable, or interactable (e.g., buttons or links). Doing so can cause confusion for users of assistive technologies, as they may encounter elements that are focusable or interactive but have no accessible meaning.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
When an element is marked as decorative (role=”presentation”) but also has interactive attributes, assistive technologies face conflicting instructions. Most screen readers resolve the conflict by ignoring the presentation role, which may expose an element that was intended to be hidden.
How to Fix
Avoid Global ARIA Attributes: Ensure that elements with role=”presentation” or role=”none” do not have global ARIA attributes like aria-hidden, which adds semantic meaning that conflicts with the presentation role.
Do Not Apply to Focusable Elements: Elements that are natively focusable (e.g., buttons or links) or made focusable with tabindex should not use role=”presentation” or role=”none”. These roles remove the element’s semantics, leaving users unsure about its function.
Code Examples
<!-- Decorative element with conflicting interactive attributes -->
<img
src="divider.png"
role="presentation"
tabindex="0"
aria-label="Section break">
Copy
<!-- Decorative element properly hidden -->
<img
src="divider.png"
role="presentation"
alt="">
<!-- Or if it needs to be interactive, remove role="presentation" -->
<img
src="chart.png"
alt="Sales chart"
tabindex="0">
Copy
Common Mistakes to Avoid
- Adding tabindex to elements marked as presentational.
- Setting aria-label on elements with role=”presentation” or role=”none”.
- Not deciding whether an element is decorative or meaningful before assigning attributes.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.