Missing keyboard press 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 (keydown, keypress or keyup) which will trigger the same functionality as the mouse event.

The Algorithm, in Simple Terms

Engine scans for element that uses one of the following events: click, dblclick, mousedown or mouseup, but has no corresponding keyboard event (keydown, keypress or keyup) on itself, on a child element up to level 3 down or on a parent element up to level 3 up.

Why Is it Important?

Using both keyboard-specific and mouse-specific events ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected, same as, if it were clicked by a mouse.

Code Example

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

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

Additional Information

Although click is in principle a mouse event handler, most HTML and XHTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements.Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.

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).