Aria Allowed Attribute
Critical - WCAG Level A
The aria-allowed-attr rule ensures that ARIA attributes are only applied to elements that support them according to their role. Misusing ARIA attributes can lead to confusion for assistive technologies, which rely on these attributes to convey the correct information about elements to users.
For users with disabilities, especially those using screen readers or other assistive technologies, the correct implementation of ARIA attributes is crucial. If an ARIA attribute is applied to an element that does not support it, the assistive technology may misinterpret the element's purpose or functionality. This can lead to a frustrating experience, as users may not receive the information they need to interact with the web content effectively.
Identify the Role: Check the role of the element to which you are applying ARIA attributes. Ensure that the role supports the ARIA attributes you are using.
Remove Unsupported Attributes: If an ARIA attribute is not supported by the element's role, remove it from the markup.
Use Appropriate Roles: If you need to use specific ARIA attributes, consider changing the element's role to one that supports those attributes.
Test with Assistive Technologies: After making changes, test the implementation with screen readers or other assistive technologies to ensure the information is conveyed correctly.
Best Practices:
Always refer to the WAI-ARIA specification to check which ARIA attributes are allowed for specific roles.
Use semantic HTML elements whenever possible, as they inherently provide the correct roles and properties without needing ARIA attributes.
Common mistakes:
Applying ARIA attributes to non-interactive elements (like
<div>or<span>) without a proper role.Using ARIA attributes that are not relevant to the element's function, leading to confusion for users of assistive technologies.