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:
- an HTML element with an
onMouseover attribute doesn’t also have an onFocus attribute.
- an HTML element with an
onMouseout attribute doesn’t also have an onBlur attribute.
- an HTML element with an
onClick attribute doesn’t also have one of the following attributes: onKeyDown,
onKeyUp, onKeyPress.
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.
