-
Notifications
You must be signed in to change notification settings - Fork 1
/
h91.html
154 lines (153 loc) · 10.6 KB
/
h91.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
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
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML view of changes in Description for H91</title>
</head>
<body>
<h1>Description for H91</h1>
<p>The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.</p>
<p>User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.</p>
<p>In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the <el>button</el> element text or image <att>alt</att> attribute as the name. In the case of form controls, <el>label</el> elements or <att>title</att> attributes are used.</p>
<table border="1"
cellpadding="5"
id="H91_mappings">
<caption>How role, name, value, and state are determined for HTML links and form controls</caption>
<thead>
<tr>
<th scope="col" rowspan="1" colspan="1">HTML element </th>
<th scope="col" rowspan="1" colspan="1">Role</th>
<th scope="col" rowspan="1" colspan="1">Name</th>
<th scope="col" rowspan="1" colspan="1">Value</th>
<th scope="col" rowspan="1" colspan="1">State</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="1" colspan="1"><el>a</el></td>
<td rowspan="1" colspan="1">link </td>
<td rowspan="1" colspan="1">text content within <el>a</el> element (including <att>alt</att> attribute value if element contains an image) or <att>title</att> attribute. Concatenated if both text and image <att>alt</att> attribute are provided</td>
<td rowspan="1" colspan="1"><att>href</att> attribute </td>
<td rowspan="1" colspan="1"/>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>button</el></td>
<td rowspan="1" colspan="1">push button</td>
<td rowspan="1" colspan="1">text inside <el>button</el> element or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>disabled</att> attribute</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>fieldset</el></td>
<td rowspan="1" colspan="1">grouping </td>
<td rowspan="1" colspan="1">text inside <el>legend</el> element within <el>fieldset</el> element</td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>disabled</att> attribute</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "button", "submit", or "reset"</td>
<td rowspan="1" colspan="1">push button </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>disabled</att> attribute</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "image"</td>
<td rowspan="1" colspan="1">push button </td>
<td rowspan="1" colspan="1"><att>alt</att> attribute or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>disabled</att> attribute</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "text"</td>
<td rowspan="1" colspan="1">editable text </td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "text", "email", "url", "search", or "tel"</td>
<td rowspan="1" colspan="1">textbox</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "color"</td>
<td rowspan="1" colspan="1">color picker</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "range"</td>
<td rowspan="1" colspan="1">slider</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "number” or "time"</td>
<td rowspan="1" colspan="1">spin button</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "datetime", "datetime-local", "date", "month", or "week"</td>
<td rowspan="1" colspan="1">date field</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "password"</td>
<td rowspan="1" colspan="1">editable text </td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute</td>
<td rowspan="1" colspan="1">value is purposefully hidden</td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "file"</td>
<td rowspan="1" colspan="1">editable text </td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><att>value</att> attribute</td>
<td rowspan="1" colspan="1"/>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "checkbox"</td>
<td rowspan="1" colspan="1">checkbox</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>checked</att>, <att>disabled</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>input</el> <att>type</att> = "radio"</td>
<td rowspan="1" colspan="1">radio button</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"/>
<td rowspan="1" colspan="1"><att>checked</att>, <att>disabled</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>select</el> (no <att>multiple</att> attribute and no <att>size</att> attribute value greater than 1)</td>
<td rowspan="1" colspan="1">combobox</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><el>option</el> element with <att>selected</att> attribute set to "selected" </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>multiple</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>select</el> (with a <att>multiple</att> attribute or a <att>size</att> attribute value greater than 1)</td>
<td rowspan="1" colspan="1">listbox</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1"><el>option</el> element with <att>selected</att> attribute set to "selected" </td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>multiple</att>, and <att>required</att> attributes</td>
</tr>
<tr>
<td rowspan="1" colspan="1"><el>textarea</el></td>
<td rowspan="1" colspan="1">textbox (multi-line)</td>
<td rowspan="1" colspan="1"><el>label</el> element associated with control or <att>title</att> attribute </td>
<td rowspan="1" colspan="1">text within <el>textarea</el> element</td>
<td rowspan="1" colspan="1"><att>disabled</att>, <att>readonly</att>, and <att>required</att> attributes</td>
</tr>
</tbody>
</table> </body>
</html>