What does this accessibility issue mean?
Accessibility issue summary: Invalid ARIA role-attribute combination
Assistive technologies like screen readers will struggle to interpret invalid ARIA attributes used on elements with defined roles. You should also avoid using ARIA attributes that could be misleading or confusing for assistive technology users.
Test your website to ensure that the ARIA attributes you’re using on elements with specific roles are permitted and being used correctly.
ARIA role-attribute combinations are addressed in WCAG under the Success Criterion 4.1.2: Name, Role, Value. (WCAG Level A issue.)
Example HTML violation: Invalid ARIA role-attribute combination (WCAG 2.0 Level A Issue)
<div role="navigation" aria-checked="false"><a href="#Home">Home</a>
<a href="#Products">Products</a>
<a href="#Contact">Contact Us</a>
</div>
Explanation: ARIA (Accessible Rich Internet Applications) attributes aid in making web applications more accessible to users with disabilities. These attributes provide extra information about an element's role, state, or properties and are especially useful for content that changes dynamically.
However, not all role-attribute combinations are valid.
In this example, the 'aria-checked' attribute is used with a 'navigation' role.
However, 'aria-checked' is not a valid attribute for elements with a role of 'navigation'. Here, it does not make sense to have an 'aria-checked' state (which is intended for widgets that can be checked or unchecked) being used for a navigation segment, hence the combination is invalid.
To correct this violation, the improper use of the aria-checked attribute should be removed from the div element, as shown below:
How to fix "Invalid ARIA role-attribute combination (WCAG 2.0 Level A Issue)" issue
<div role="navigation"><a href="#Home">Home</a>
<a href="#Products">Products</a>
<a href="#Contact">Contact Us</a>
</div>
This revised HTML code now follows the 'Invalid ARIA role-attribute combination' (rule-id: 'aria-allowed-attr') accessibility rule because it only uses the role and attribute combinations that are allowed by the Accessible Rich Internet Applications (ARIA) specification.
This ensures better accessibility for users relying on assistive technology.
For further reading on how to use ARIA roles and attributes correctly, you can check the W3C's guide on Using ARIA.
