-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA4.html
119 lines (113 loc) · 6.12 KB
/
ARIA4.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a WAI-ARIA role to expose the role of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a WAI-ARIA role to expose the role of a user interface component</h1><section class="meta"><p class="id">ID: ARIA4</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
</section><section id="description"><h2>Description</h2>
<p>The objective of this technique is to define the role of an element using the <code class="att">role</code> attribute with one of the non-abstract values defined in the <a href="https://www.w3.org/TR/wai-aria/#role_definitions">WAI-ARIA Definition of Roles</a>. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>A simple toolbar</h3>
<p>The WAI-ARIA Authoring Practices document <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accessiblewidget">demonstrates a toolbar containing three buttons</a>. The <code class="el">div</code> element has a role of "toolbar", and the <code class="el">img</code> elements have "button" roles:</p>
<pre xml:space="preserve">
<div role="toolbar"
tabindex="0"
id="customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="img/btn1.gif"
role="button"
tabindex="-1"
alt="Home"
id="b1"
title="Home">
<img src="img/btn2.gif"
role="button"
tabindex="-1"
alt="Refresh"
id="b2"
title="Refresh">
<img src="img/btn3.gif"
role="button"
tabindex="-1"
alt="Help"
id="b3"
title="Help">
</div>
</pre>
<p>The Authoring Practices Toolbar Pattern <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar">provides a working example of a toolbar.</a>.</p>
</section>
<section class="example">
<h3>A Tree Widget</h3>
<p>The WAI-ARIA Authoring Practices <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#exampletree">demonstrates a tree widget</a>. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:</p>
<pre xml:space="preserve">
<ul role="tree" tabindex="0">
<li role="treeitem">Birds</li>
<li role="treeitem">Cats
<ul role="group">
<li role="treeitem">Siamese</li>
<li role="treeitem">Tabby</li>
</ul>
</li>
<li role="treeitem">Dogs
<ul role="group">
<li role="treeitem">Small Breeds
<ul role="group">
<li role="treeitem">Chihuahua</li>
<li role="treeitem">Italian Greyhound</li>
<li role="treeitem">Japanese Chin</li>
</ul>
</li>
<li role="treeitem">Medium Breeds
<ul role="group">
<li role="treeitem">Beagle</li>
<li role="treeitem">Cocker Spaniel</li>
<li role="treeitem">Pit Bull</li>
</ul>
</li>
<li role="treeitem">Large Breeds
<ul role="group">
<li role="treeitem">Afghan</li>
<li role="treeitem">Great Dane</li>
<li role="treeitem">Mastiff</li>
</ul>
</li>
</ul>
</li>
</ul>
</pre>
<p>The Authoring Practices Tree View Pattern <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView"> provides a working example of a tree</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For a user interface component using the <code class="att">role</code> attribute:</p>
<ol>
<li>Check that the value of the role attribute is one of the non-abstract roles from the values defined in the WAI-ARIA specification.</li>
<li>Check that the characteristics of the user interface component are described by the role.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1 and #2 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA), Roles</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#roles">Accessible Rich Internet Applications (WAI-ARIA), The Roles Model</a>
</li>
<li>
<a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA 1.1 Authoring Practices</a>
</li>
<li>
<a href="https://www.w3.org/TR/aria-in-html/">Notes on using ARIA in HTML</a>
</li>
</ul>
</section></body></html>