Offering the same experience with the mouse and the keyboard allow users to pick their preferred devices.

Additionally, users of assistive technology will also be able to browse the site even if they cannot use the mouse.

This rule raises an issue when:

Note that in the case of onClick, the equivalent keyboard handler should support both the "Enter" and "Space" keys as these are usually used by screen-readers.

Noncompliant Code Example

<div onClick="doSomething();" ...>                                <!-- Noncompliant - 'onKeyDown/onKeyUp/onKeyPress' missing -->
<a onMouseover="doSomething();" ...>                            <!-- Noncompliant - 'onFocus' missing -->
<a onMouseout="doSomething();" ...>                             <!-- Noncompliant - 'onBlur' missing -->

Compliant Solution

Note that setting the tabindex attribute is necessary to make the <div> element focusable.

<div onClick="doSomething();" onKeyDown="doSomething();" tabindex="0" ...>    <!-- Compliant -->
<a onMouseover="doSomething();" onFocus="doSomething();" ...>   <!-- Compliant -->
<a onMouseout="doSomething();" onBlur="doSomething();" ...>     <!-- Compliant -->

Exceptions

For the following elements, pressing a key will trigger the onClick attribute: <input type="button">, <input type="submit">, <button>, <a>. Thus no issue will be raised when an onClick attribute is found in these elements without a onKeyDown/onKeyUp/onKeyPress.

An issue will still be raised for elements with the role="button" attribute as they don't behave the same way.

See