The “ARIA Role Check” evaluates whether all elements using ARIA roles are placed in the correct semantic context.
Example outcome
I noticed that all elements with an explicit semantic role exist inside their required contexts.
Impact
Visual Impairments: Improper role nesting can confuse screen readers or prevent them from correctly interpreting the page structure. For example, a menuitem outside of a menu context might not behave as expected.
Motor Impairments: Some roles (like menuitem, tab, etc.) come with expected keyboard interactions. If they’re out of context, these interactions might break or behave inconsistently.
Cognitive Disabilities: Misleading semantic structures can disrupt the user’s mental model of the interface, making navigation and comprehension more difficult.
Fixes
To address inapropriate or missing ARIA roles:
Identify the element with the inapropriate or missing ARIA role.
Check the ARIA specification for valid parent or ancestor roles required by that role (e.g., a menuitem must be inside a menu, menubar, or group).
Correct the hierarchy by placing the role-bearing element within the required context.