Presentation Role Conflict
Minor - WCAG LEVEL AAA
The issue with the 'presentation-role-conflict' arises when an HTML element is assigned a role of 'presentation' or 'none', which indicates to assistive technologies that the element should be ignored in terms of semantics. However, if such an element also has global ARIA attributes (like aria-label, aria-labelledby, aria-describedby) or a tabindex, it creates a conflict. The role of 'presentation' suggests the element is purely decorative, while ARIA attributes and tabindex suggest it has interactive or semantic importance.
This conflict can confuse screen readers and other assistive technologies, leading to a poor user experience for individuals relying on these tools. For instance, a screen reader might ignore the element due to its presentational role, missing out on potentially important information conveyed by the ARIA attributes.
To fix this issue:
You should remove the role of 'presentation' or 'none' if the element has ARIA attributes or a tabindex, or alternatively, remove the conflicting ARIA attributes and tabindex if the element is indeed meant to be purely decorative.
Ensure that elements meant to be interactive or convey information are not marked as presentational.
Best practices:
Use semantic HTML elements that naturally convey the intended meaning and functionality, reducing the need for ARIA attributes.
When ARIA attributes are necessary, ensure they are used on elements with appropriate roles.
Avoid using 'presentation' or 'none' on elements that are focusable or interactive.
Common mistakes:
Include overlooking inherited ARIA attributes from parent elements or applying a role of 'presentation' to elements that are dynamically updated with content or interactivity.