What does this accessibility issue mean?
To adhere to web accessibility best practices, elements should have valid ARIA roles defined. The role used should be appropriate for the element and on the list of allowed ARIA roles. (Note: You can check which roles are allowed on specific HTML elements in the ARIA in HTML specifications. )
This is important for ensuring that the ARIA roles used are appropriate and useful for the particular element and avoids using roles that could be misleading or confusing for assistive technology users.
Example HTML violation: Invalid ARIA role value (A11y Best Practices)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-allowed-role failure example</title>
</head>
<body>
<h1 role="button">Heading with Button Role</h1> t <button role="article">Add to Cart</button>
</body>
</html>The above HTML violates the aria-allowed-role accessibility rule because the h1 and button elements have roles that do not align with their intended semantic functions in HTML.
How to fix "Invalid ARIA role value (A11y Best Practices)" issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-allowed-role corrected example</title>
</head>
<body>
<h1>Heading with Button Role</h1>
<button>Add to Cart</button>
</body>
</html>Corrections Made:
The h1 tag is used to define the most important heading on a page, and it does not need a role attribute as it is not an interactive element.
Therefore, I removed role="button" from the h1 tag.2. The button tag is an interactive HTML element used to initiate user-triggered actions.
I removed role="article" from the button tag because the 'article' role is not appropriate as it represents a component of a page that can independently contain or be distributed.It's important to use appropriate ARIA roles with HTML elements to ensure the highest level of accessibility.
You can check which roles are allowed on specific HTML elements in the ARIA in HTML specification. Assigning incorrect role might confuse assistive technologies and in turn the people using these technologies, as the functionality of these elements could be obscured.
