-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmouse-and-keyboard-events.html
115 lines (112 loc) · 11.6 KB
/
mouse-and-keyboard-events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Mouse and Keyboard Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width"> <link href="css/training.css" rel="stylesheet" type="text/css">
</head>
<body><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40224544-1', 'ncsu.edu'); ga('send', 'pageview'); </script><a href="#main" title="Skip to main content" class="skip-main">Skip To Main Content</a>
<h1>Mouse and Keyboard Events</h1>
<nav>
<p class="toc">
<label for="toc-menu" class="screen-reader">Table of Contents Menu</label> <select id="toc-menu">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/">Table of Contents</option>
<optgroup label="The Nature of What is Required">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/understand-nature.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/what-accessible-means.html">What Accessibility Means</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/law.html">Accessibility and the Law</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/ada.html">Americans with Disabilities Act</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/508.html">Section 508</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/wcag.html">WCAG 2</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/vpat.html">VPAT</option>
</optgroup>
<optgroup label="Choose a technology">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-html.html">HTML</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-pdf.html">PDF</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-office.html">Office Documents</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-rich-media.html">Rich Media</option>
</optgroup>
<optgroup label="Some Basics">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/basics-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/language.html">Language</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/valid-code.html">Valid Code</option>
</optgroup>
<optgroup label="Document Structure">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/headings.html">Headings</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html">ARIA Landmarks</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/lists.html">Lists</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/tables.html">Tables</option>
</optgroup>
<optgroup label="User Interactions">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/mouse-and-keyboard-events.html">Mouse and Keyboard Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html">Visual Focus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/menus.html">Menus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html">Skip to Main Content Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/forms.html">Forms</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/color-contrast.html">Color Contrast</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/links.html">Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-new-window.html">Links Opening in New Windows</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-alt.html">Text or Alt Attribute for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-internal.html">Internal Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-behavior.html">Link vs. Button</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-descriptive-target.html">Using Descriptive Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-length.html">Length of Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-unique.html">Unique Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-url.html">URL Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-underline.html">Underline Style for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/find-content-multiple.html">Finding Content in Multiple Ways</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/timed-events.html">Timed Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html">ARIA Checkbox Tutorial</option>
</optgroup>
<optgroup label="Conveying Through Alternate Senses">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/alternative-text.html">Alternative Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/captioning.html">Captioning</option>
</optgroup>
<optgroup label="Appendices">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/testing-tools.html">Appendix A - Testing Tools</option>
</optgroup>
</select>
<input id="go-button" type="button" value="GO" onclick="location= document.getElementById('toc-menu').options[ document.getElementById('toc-menu').selectedIndex].value;">
</p>
<p class="prev"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/tables.html"><img src="images/left-arrow.png" alt="previous" />Tables</a></p>
<p class="next"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html">Visual Focus<img src="images/right-arrow.png" alt="next" /></a></p>
</nav><div id="main" role="main" tabindex="-1">
<h2>Overview</h2>
<p>When you use only mouse events to trigger an action, a keyboard-only user cannot trigger the event. The solution often involves one or two steps.</p>
<p>First, you need to determine if the element where you attaching the mouse events can also receive the keyboard focus. The most common elements which automatically receive focus are links, form input elements, and buttons. If you are attaching the events to a different type of element, like a generic <div> or <span>, you need to enable the element to receive keyboard focus. This is done by adding tabindex="0" to the element in question. This tells the browser to add the item to the natural tab order of the page.</p>
<div class="tip">
<h3>Tip</h3>
<p>tabindex can receive three types of values: -1, 0, or any number greater than 0. Each value means something different.</p>
<p>tabindex="-1": This makes the element focusable, but it can only receive focus programmatically through JavaScript. The user cannot simply press the tab key and focus on this element.</p>
<p>tabindex="0": This makes the element focusable and it places the element in the natural tab order of the page based on its position within the DOM. The user will be able to focus on this item using the tab key.</p>
<p>tabindex="1", or anything greater than 0: This makes the element focusable, but it places the element in the tab order corresponding to the number set in the attribute. <strong>This practice should be avoided except in rare cases.</strong> The tab order should almost always follow the natural order of the page.</p>
</div>
<p>Second, provide the same functionality via the corresponding keyboard events. The following table lists mouse events and their equivalent keyboard events.</p>
<table>
<caption>Corresponding mouse and keyboard events</caption>
<thead>
<tr><th scope="col">Mouse Event</th><th scope="col">Keyboard Event</th></tr>
</thead>
<tbody>
<tr><td>mousedown</td><td>keydown</td></tr>
<tr><td>mouseup</td><td>keyup</td></tr>
<tr><td>click</td><td>keypress</td></tr>
<tr><td>mouseover</td><td>focus</td></tr>
<tr><td>mouseout</td><td>blur</td></tr>
</tbody>
</table>
<div class="tip">
<h3>Tip</h3>
<p>Oftentimes it is easier to put all of the code in a third function rather than storing it in an event listener so that both the mouse and keyboard event can just call the same function. That way you only have to maintain your code in a single location.</p>
<pre>onMouseover = "doSomething();"
onfocus = "doSomething();"
function doSomething() {alert('Hello World!');}
</pre>
</div>
<h2>Further Reading</h2>
<ul>
<li><a href="http://www.w3.org/TR/WCAG20-TECHS/SCR20.html">WCAG 2.0 Techniques for using both keyboard and other device-specific functions.</a></li>
</ul>
</div></body>
</html>