Redundant Event Handlers Check

Description

The “Redundant Event Handlers Check” evaluates whether all interactive elements on the page with mouse event handlers also include corresponding keyboard event handlers or are implemented using semantic HTML elements that already provide built-in keyboard support (like <button> or <a href>).

Example outcome

I identified all instances where redundant event handlers are used.

Impact

• Visual Impairments: Many rely on screen readers, which are navigated via keyboard — mouse-only interaction creates a barrier.
• Motor Impairments: Individuals who use keyboards, switch devices, or eye-tracking tools instead of a mouse won’t be able to activate or interact with components missing keyboard support.

Fixes

To address missing redundant event handlers:

1. Locate the element that can be triggered by a mouse event but can’t be triggered by a keyboard event.
2. Add an attribute (e.g., onkeydown) to allow the triggering with a keyboard event.
3. If applicable, use an HTML element instead containing built-in keyboard accessibility (e.g., <button>).

Resources

• WCAG 2.2: Understanding Success Criteria 2.1.1
• WCAG 2.2: Understanding Success Criteria 2.1.3
• WCAG 2.2 Techniques: Technique G90: Providing keyboard-triggered event handlers
• WebAIM: JavaScript Accessibility
• WebAIM: Keyboard Accessibility