| Title | Inappropriate Event Handlers Check |
|---|---|
| id | ehandler_04 |
| type | prop |
| elem | ehandler |
| test | ehandTagNo |
| score | 1 |
| level | A |
| trust | 0.8 |
| ref | F59 |
| scs | 4.1.2 |
| dis | 43411 |
| result | failed |
The "Inappropriate Event Handlers Check" evaluates whether there is any event handler on elements that are not inherently interactive (e.g., <div>, <span>).
I identified 1 instance where event handlers are associated with non-interactive elements.
- 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.
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>).