Missing keyboard blur event

Compliance Data & User Impact

User Impact: Critical

100% Complete

Disabilities Affected:

  • blindness
  • deaf blindness
  • users that uses only the keyboard due to motor disability

WCAG Version:
2

WCAG Levels:

  • A

WCAG Guidelines:

Solution Techniques:

Automated Test Accuracy:
Medium

Check1st Severity:
4

DRRSAG Designations:

  • action

How to Fix the Problem

Add a keyboard event listener to the element (blur or focusout) which will trigger the same functionality as the mouse event.

The Algorithm, in Simple Terms

Engine scans for elements using one of the following events: mouseleave or mouseout, but having no corresponding keyboard event (blur or focusout).

Why Is it Important?

Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when focusout is detected that is performed when a mouse leaves an element.

Code Example

<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 

onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">

Example

Access Example

Ignore this issue if this element is part of a list of similar elements or a container of a list such as: select, autocomplete field widget, the table inside a date picker widget, a tab in a tab control widget).