Aria Allowed Role
Minor - WCAG LEVEL AAA
The "aria-allowed-role" rule addresses the misuse of ARIA roles on HTML elements. ARIA roles are used to define the purpose or type of an element, helping assistive technologies convey the correct information to users. However, not all roles are suitable for all elements. Using an inappropriate role can lead to confusion for users relying on screen readers or other assistive technologies, as it might convey misleading information about the element's function or interaction capabilities.
For example, assigning a role of "button" to a non-interactive element like a <div> without the necessary interactive properties (such as keyboard events) can mislead users into thinking the element is clickable, which it might not be. This can cause frustration and hinder navigation.
To fix this issue, ensure that the role attribute is only used with elements that support the intended role. For instance, use semantic HTML elements like <button> for buttons instead of assigning a "button" role to a <div>. If you must use a non-semantic element, ensure it fully supports the role's expected behavior, including keyboard accessibility.
Best practices include:
Prefer native HTML elements over ARIA roles whenever possible, as they are inherently accessible.
Ensure that if a role is applied, the element behaves as expected for that role, including handling keyboard interactions.
Regularly validate your code against ARIA specifications to ensure compliance.
Common mistakes include applying roles to elements that cannot support the required interaction, or failing to provide necessary attributes (like tabindex) to make an element interactive when using roles like "button" on non-button elements.
Furthermore, a common pattern that can cause role="button" to fail this rule is the lack of event handlers for both the 'enter' and 'space bar' keys. Semantic HTML button elements automatically handle both of these keypress events so any role='buttons' must equal this behavior.