Inappropriate Event Handlers Check
Description
The “Inappropriate Event Handlers Check” evaluates whether there is any event handler on elements that are not inherently interactive (e.g., <div>, <span>).
Example outcome
I identified 1 instance where event handlers are associated with non-interactive elements.
Impact
- Visual Impairments: Relying on screen readers, these users cannot detect that a
<div>or<span>has interactive behavior unless it’s correctly marked up. - Motor Impairments: Users who navigate using a keyboard won’t be able to interact with elements that aren’t focusable (
tabindex="0") or that lack keyboard event support. - Cognitive Disabilities: Inconsistent interaction patterns may confuse users who rely on predictable UI structures and behavior.
Fixes
To address inappropriate event handlers:
- Locate the element that is not interective but contains an event handler.
- Replace the element by an inherently interactive, keyboard-accessible, and has the correct role element (e.g.,
<button>).