ARIA Accessibility Errors
WCAG 4.1.2 — Name, Role, Value. Each error demonstrates a specific ARIA misuse.
Invalid ARIA role
The element uses role="fake-role" which is not a valid WAI-ARIA role. Assistive technology cannot determine the element's purpose.
Missing required ARIA properties
This element has role="checkbox" but is missing the required aria-checked property. Screen readers cannot convey the checkbox state.
aria-hidden on focusable element
This button has aria-hidden="true" but is still focusable via keyboard. Screen reader users can Tab to it but hear nothing, creating a confusing ghost element.
Conflicting role and native semantics
A native button element is given role="link". This conflicts with the button's native semantics and creates confusion about the element's behavior.
Orphan ARIA role (role on wrong context)
This element has role="option" but is not contained within an element with role="listbox". The required parent-child relationship is broken.
aria-labelledby references nonexistent ID
The input's aria-labelledby points to "nonexistent-label-id" which does not exist in the DOM. The element has no accessible name.
aria-expanded on non-expandable element
A paragraph element has aria-expanded="false", which is semantically meaningless. This attribute should only be used on interactive elements that control expandable content.
This paragraph claims to be expandable, but it is just text.