Presentational elements need no focus or global ARIA
- Rule:
axe/presentation-role-conflict - Checks: Elements marked as presentational should be consistently ignored
- WCAG: none; a best practice, not a WCAG success criterion
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”A decorative image (alt="") or an element with role="none" or role="presentation" also has aria-label, aria-describedby or another global ARIA attribute
Section titled “A decorative image (alt="") or an element with role="none" or role="presentation" also has aria-label, aria-describedby or another global ARIA attribute”Browsers ignore the presentational role on an element with a global ARIA attribute, so screen readers announce it after all. If the element is decoration, remove the ARIA attributes. If it carries meaning, remove the role, or give the image a real alt.
<img src="divider.png" alt=""><img src="team-photo.jpg" alt="The support team at the spring offsite">A presentational element is focusable, such as <button role="presentation"> or an <img alt=""> with tabindex="0"
Section titled “A presentational element is focusable, such as <button role="presentation"> or an <img alt=""> with tabindex="0"”Remove the tabindex, or the role. An element people can focus needs a role and a name; one that should not take focus must not be focusable.
Fixes that fail
Section titled “Fixes that fail”Keeping aria-label on a decorative image to add context
Section titled “Keeping aria-label on a decorative image to add context”The label brings the image back as an image for screen readers. If the context matters, the image is not decorative: give it a real alt.
Adding aria-hidden="true" to a focusable presentational element
Section titled “Adding aria-hidden="true" to a focusable presentational element”It hides the element from screen readers but leaves it in the tab order, so keyboard users land on something nothing announces.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.