rspec/rules/S1082/html/rule.adoc

== Why is this an issue?

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

[source,html]
----
<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.

[source,html]
----
<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, https://www.w3.org/TR/WCAG20-TECHS/SCR35.html[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 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role[elements with the ``++role="button"++`` attribute] as they don't behave the same way.


== Resources

* https://www.w3.org/TR/WCAG20-TECHS/SCR2.html[SCR2: Using redundant keyboard and mouse event handlers]


ifdef::env-github,rspecator-view[]

'''
== Implementation Specification
(visible only on this page)

=== Message

Add a '{0}' attribute to this {1} tag.


'''
== Comments And Links
(visible only on this page)

=== on 20 Jun 2013, 14:52:17 Dinesh Bolkensteyn wrote:
http://www.w3.org/WAI/GL/WCAG20/tests/test102.html

=== on 8 Jul 2013, 18:26:26 Freddy Mallet wrote:
Is implemented by \http://jira.codehaus.org/browse/SONARPLUGINS-2944

endif::env-github,rspecator-view[]