What does this accessibility issue mean?
To comply with web accessibility best practices, check if elements with the role=”presentation” attribute have conflicting ARIA attributes.
The presentation role is intended to remove the element from the accessibility tree, but conflicting ARIA attributes can override this behavior and cause accessibility issues for users. This rule checks for conflicts and suggests solutions to resolve them.
Example HTML violation: Presentational element not ignored (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Test</title>
</head>
<body>t <div>t <article tabindex="-1" aria-label="Label for Article" role="presentation">Article with role="presentation" and tabindex</article>tt <button id="button-with-role-none" role="none">Button with role="none</button>t </div>
</body>
</html>The above HTML violates the presentation-role-conflict accessibility rule.
How to fix "Presentational element not ignored (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Test</title>
</head>
<body>
<div>
<article>Article without role="presentation" and tabindex</article>
<button id="button-with-role-none">Button with role="none"</button>
</div>
</body>
</html>In the original HTML, <article tabindex=""-1"" aria-label=""Label for Article"" role=""presentation""> was flagged as it violated the Presentational Roles Conflict Resolution rule.
The conflict comes from giving an article element, which is a semantic role, a role of presentation. The presentation role is effectively used to remove semantic meaning from an element and its descendants and usually provided to elements that do not have any semantic meaning on their own.
In the case of this article element, it inherently has semantic meaning and making its role as presentational is conflicting and might create confusion for assistive technologies.
Also, providing tabindex=""-1"" to the article tag might cause further confusion to assistive technologies as this is often used to indicate that the element can be focused on.
My solution to this issue is to remove role=""presentation"" and tabindex=""-1"" from the article element.
The corrected version maintains the semantic structure of the page which is very helpful for assistive technologies and the user experience while ensuring that the Presentational Roles Conflict Resolution rule is not violated.
For more details about the Presentational Roles Conflict Resolution rule and accessibility guidelines, refer to the specifications provided by the W3C.
