Elements Marked as Presentational Should Not Have Global ARIA or tabindex to Ensure All Screen Readers Ignore Them

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

Code example

<li role="none"></li><li role="presentation"></li> Copy

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.