-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA5.html
110 lines (103 loc) · 7.61 KB
/
ARIA5.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using WAI-ARIA state and property attributes to expose the state of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using WAI-ARIA state and property attributes to expose the state of a user interface component</h1><section class="meta"><p class="id">ID: ARIA5</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 use <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">WAI-ARIA state and property attributes</a> to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes 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 toggle button</h3>
<p>A widget with role <code class="att">button</code> acts as a toggle button when it implements the attribute <code class="att">aria-pressed</code>. When <code class="att">aria-pressed</code> is true, the button is in a "pressed" state. When <code class="att">aria-pressed</code> is false, it is not pressed. If the attribute is not present, the button is a simple command button.</p>
<p>The following snippet from The Open Ajax Accessibility Examples, Example 38, shows WAI-ARIA mark-up for a toggle button that selects bold text:</p>
<pre xml:space="preserve">
<li id="bold1"
class="toggleButton"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
aria-controls="text1">
<img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>
</pre>
<p>The <code class="el">li</code> element has a role of "button" and an "aria-pressed" attribute. The following excerpt from the Javascript for this example updates the value of the "aria-pressed" attribute:</p>
<pre xml:space="preserve">
/**
* togglePressed() toggles the aria-pressed atribute between true or false
*
* @param ( id object) button to be operated on
*
* @return N/A
*/
function togglePressed(id) {
// reverse the aria-pressed state
if ($(id).attr('aria-pressed') == 'true') {
$(id).attr('aria-pressed', 'false');
}
else {
$(id).attr('aria-pressed', 'true');
}
}
</pre>
<p>This button is available as part of the <a href="http://www.oaa-accessibility.org/examplep/toolbar1/">working example of Example 38 - Toolbar using inline images for visual state</a>, on the OpenAjax Alliance site.</p>
</section>
<section class="example">
<h3>A slider</h3>
<p>A widget with role <code class="att">slider</code> lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes <code class="att">aria-valuemin</code>, <code class="att">aria-valuemax</code>, and <code class="att">aria-valuenow</code>.</p>
<p>The following snippet from The Open Ajax Accessibility Examples, Example 32, shows WAI-ARIA mark-up for a slider created in Javascript. Note that the javascript sets the attributes aria-valuemin, aria-valuemax, and aria-valuenow:</p>
<pre xml:space="preserve"> var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
'aria-valuemin="' + this.min +
'" aria-valuemax="' + this.max +
'" aria-valuenow="' + (val == undefined ? this.min : val) +
'" aria-labelledby="' + label +
'" aria-controls="' + controls + '" tabindex="0"></img>';</pre>
<p>The following excerpt from the Javascript for this example updates the value of the "aria-valuenow" attribute when the value of the slider handle is changed:</p>
<pre xml:space="preserve"> slider.prototype.positionHandle = function($handle, val) {
...
// Set the aria-valuenow position of the handle
$handle.attr('aria-valuenow', val);
...
}
</pre>
<p>This slider is available as part of the <a href="http://oaa-accessibility.org/example/32/">working example of Example 32 - Slider</a>, on the OpenAjax Alliance site.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>
<a href="https://www.w3.org/TR/wai-aria/#roles_categorization">The WAI-ARIA specification, Section 5.3, Categorization of Roles</a> defines the required and inherited states and properties for each role.</p>
<p>For a user interface component using the WAI-ARIA role attribute:</p>
<ol>
<li>Check that the required states and properties for the role are present.</li>
<li>Check that no WAI-ARIA states or properties that are neither required, supported, nor inherited are present.</li>
<li>Check that the state and property values are updated to reflect the current state when the user interface component changes state.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1, #2, and #3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA4">ARIA4</a></li>
<li><a href="../html/H91">H91</a></li>
</ul></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/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties</a>
</li>
<li>
<a href="https://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
</li>
<li>
<a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>
</li>
</ul>
</section></body></html>