wcag21/techniques/general/change-single-key-shortcuts.html at 3b0c2c88e12b0c9f7f14e297647999dc7fa8ccd4 · w3c/wcag21 · GitHub

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<title>Providing a mechanism to change character-key shortcuts</title>
		<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
	</head>
	<body>
		<h1>Providing a mechanism to change character-key shortcuts</h1>
		<section id="meta">
			<h2>Metadata</h2>
			<p id="id"></p>
			<p id="technology">general</p>
			<p id="type">sufficient</p>
		</section>
		<section id="applicability">
			<h2>When to Use</h2>
			<p>Use with any technology that enables shortcuts consisting only of one or more character keys.</p>
		</section>
		<section id="description">
			<h2>Description</h2>
			<p class="instructions">Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.</p>
			<p>The objective of this technique is to ensure that character-key shortcuts, which are useful for some users but cause trouble for others, can be remapped by users who find them troublesome. These users include speech input users and some mobile users. There should be a clear way, such as a dialog box, for users to see where single-key shortcuts shortcuts are mapped and remap them. Choices Of keys for remapping should include, but don’t have to be limited to, modifier keys. A best practice is including the ability to map up to 25 character keys as a shortcut. This allows a speech input user to add a spoken shortcut that would work in any speech program</p>
		</section>
		<section id="examples">
			<h2>Examples</h2>
			<p class="instructions">Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.</p>
			<section class="example">
				<h3>Shortcut Change Dialog</h3>
				<p>A dialog box could contain rows of functions followed by their character-key shortcuts followed by editable fields where users could input new shortcuts including character keys, and modifier keys, and including as many as 25 character keys in a row.</p>
				<code>Code sample</code>
				<p>Working example: link</p>
			</section>
		</section>
		<section id="tests">
			<h2>Tests</h2>
			<section class="test-procedure">
				<h3>Procedure</h3>
				<ol>
					<li>1. Find a mechanism to remap character-key shortcuts. This mechanism can exist at any level – platform, agent or app./li>
					<li>2. Confirm that the mechanism to change a character-key shortcut follows all the requirements of WCAG 2.1.</li>
					<li>3. Change a character-key shortcut by adding a modifier key.</li>

					<li>4. Make sure the focus is on the page rather than within a form field or on an element.</li>
					<li>5. Press the original character-key shortcut and confirm that it does not carry out any actions.</li>
					<li>6. Press the modified shortcut and confirm that it carries out the expected action.</li>
				</ol>
			</section>
			<section class="test-results">
				<h3>Expected Results</h3>
				<ul>
					<li>An accessible mechanism to remap character key shortcuts is present. When a modifier key is added to a character-key shortcut, the modified shortcut carries out the assigned action and the original character key shortcut carries out no action.</li>
				</ul>
			</section>
		</section>
		<section id="related">
			<h2>Related Techniques</h2>
			<ul>
				<li>ID</li>
			</ul>
		</section>
	</body>
</html>