Home > Criteria > Missing keyboard focus event

Missing keyboard focus event

Compliance Data & User Impact

User Impact: Critical

Disabilities Affected:

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

WCAG Version:
2

WCAG Levels:

WCAG Guidelines:

2.1.1

Solution Techniques:

SCR20.in

Automated Test Accuracy:
Medium

uTester Severity:
Error

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 element that uses mouseenter event, but has no corresponding keyboard event (focus or focusin) 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 together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a focus is detected that is performed when the mouse pointer enters the 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).