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:
onMouseover attribute doesn't also have an onFocus attribute. onMouseout attribute doesn't also have an onBlur attribute. 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.
<div onClick="doSomething();" ...> <!-- Noncompliant - 'onKeyDown/onKeyUp/onKeyPress' missing --> <a onMouseover="doSomething();" ...> <!-- Noncompliant - 'onFocus' missing --> <a onMouseout="doSomething();" ...> <!-- Noncompliant - 'onBlur' missing -->
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 -->
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.