Elements Marked as Presentational Should Not Have Global ARIA or tabindex to Ensure All Screen Readers Ignore Them
Blind
Low vision
Mobility
WCAG 2.2 Level AA
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
Ensure elements that are marked to be removed from the accessibility tree are actually removed.
Why It Matters
There are certain cases where the semantic role of an element with role=”none” or role=”presentation” does not resolve to none or presentation (respectively). When this occurs, the element is not removed from the accessibility tree, which makes it inaccessible to screen readers.
Fixing the Issue
Developers should check all elements with role=“none” or role=“presentation” to ensure they do not have a global ARIA attribute and are not focusable.
Good Code Example
Bad Code Example
Code example
<li role="none" id="global-attr" aria-hidden="true"></li>
<button id="natively-focusable" role="none"></button>
<img alt="" id="tabindex" tabindex="0"/>
Copy
Test Cases
For more examples, visit W3C’s GitHub’s ATC Rules library.