-
Notifications
You must be signed in to change notification settings - Fork 408
Expand file tree
/
Copy pathSCR29.html
More file actions
142 lines (129 loc) · 6.79 KB
/
SCR29.html
File metadata and controls
142 lines (129 loc) · 6.79 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding keyboard-accessible actions to static HTML elements</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
</head>
<body>
<h1>Adding keyboard-accessible actions to static <abbr title="HyperText Markup Language">HTML</abbr> elements</h1>
<section class="meta">
<p class="id">ID: SCR29</p>
<p class="technology">Technology: client-side-script</p>
<p class="type">Type: Technique</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>HTML, script</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as <code>div</code> or <code>span</code>. This technique ensures that the element is focusable by setting the <code>tabindex</code> attribute, and it ensures that the action can be triggered from the keyboard by providing an <code>onkeyup</code> or <code>onkeypress</code> handler in addition to an <code>onclick</code> handler.</p>
<p>When the <code>tabindex</code> attribute has the value <code>0</code>, the element can be focused via the keyboard and is included in the tab order of the document. When the <code>tabindex</code> attribute has the value <code>-1</code>, the element cannot be tabbed to, but focus can be set programmatically, using <code>element.focus()</code>.</p>
<p>Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.</p>
<div class="note">
<p>Such user interface controls must still satisfy Success Criterion 4.1.2 Name, Role, Value. Applying this technique without also providing role, name, and state information about the user interface control will results in <a href="../failures/F59">Failure F59</a>, Failure of Success Criterion 4.1.2 due to using script to make <code>div</code> or <code>span</code> a user interface control in HTML.</p>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Adding a JavaScript action to a <code>div</code> element</h3>
<p>The <code>div</code> element on the page is given a unique <code>id</code> attribute and a <code>tabindex</code> attribute with value <code>0</code>. A script uses the Document Object Model (DOM) to find the <code>div</code> element by its <code>id</code> and add the <code>onclick</code> handler and the <code>onkeyup</code> handler. The <code>onkeyup</code> handler will invoke the action when the <kbd>Enter</kbd> key is pressed. Note that the <code>div</code> element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the <code>onload</code> event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.</p>
<pre><code class="language-html"><script>
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain
// that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event
// or the event object is in use
if (window.event) {
key = window.event.keyCode;
}
else if (event) {
key = event.keyCode;
}
// Was the Enter or Space key pressed?
if (key == 13 || key == 32) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup
// event handlers onto the existing div element.
// This function must be called after the div element with id="active"
// has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event
// for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
active.onkeyup=doSomethingOnEnter;
}
</script>
<body onload="setUpActions();">
<p>Here is the link to modify with a javascript action:</p>
<div>
<span id="active" role="button" tabindex="0">Do Something</span>
</div>
<div aria-live="polite">
<div id="message">Hello, world!</div>
</div>
</body></code></pre>
<p class="working-example">Working example of this code: <a href="../../working-examples/script-action-on-div/">Creating Divs with Actions using JavaScript</a>.</p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<p>In a user agent that supports Scripting:</p>
<ol>
<li>Click on the control with the mouse</li>
<li>Check that the scripting action executes properly</li>
<li>Check that it is possible to navigate to and give focus to the control via the keyboard</li>
<li>Set keyboard focus to the control</li>
<li>Check that pressing <kbd>Enter</kbd> or <kbd>Space</kbd> invokes the scripting action.</li>
</ol>
</section>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>All of the checks are true</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../client-side-script/SCR20">SCR20</a></li>
<li><a href="../client-side-script/SCR24">SCR24</a></li>
<li><a href="../client-side-script/SCR35">SCR35</a></li>
<li><a href="../failures/F59">F59</a></li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<ul>
<li>
<a href="https://html.spec.whatwg.org/multipage/scripting.html#scripting-3">HTML - Scripting</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/interaction.html#focus">HTML - Focus</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#global_states"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Global States And Properties</a>
</li>
</ul>
</section>
</body></html>