Missing keyboard focus event

Compliance Data & User Impact

User Impact: Critical

80% 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:
3

DRRSAG Designations:

  • action

How to Fix the Problem

Add a keyboard event listener to the element (focus or focusin) 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: mouseover or mousemove, but having no corresponding keyboard event (focus or focusin).

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 a keyboard focus is detected that is performed when the mouse moves over 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).