-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy patharia-landmarks.html
247 lines (244 loc) · 20.2 KB
/
aria-landmarks.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>ARIA Landmarks</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width"> <link href="css/training.css" rel="stylesheet" type="text/css">
</head>
<body><script> (function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40224544-1', 'ncsu.edu');
ga('send', 'pageview');</script><a href="#main" title="Skip to main content" class="skip-main">Skip To Main Content</a>
<h1>ARIA Landmarks</h1>
<nav>
<p class="toc">
<label for="toc-menu" class="screen-reader">Table of Contents Menu</label> <select id="toc-menu">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/">Table of Contents</option>
<optgroup label="The Nature of What is Required">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/understand-nature.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/what-accessible-means.html">What Accessibility Means</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/law.html">Accessibility and the Law</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/ada.html">Americans with Disabilities Act</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/508.html">Section 508</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/wcag.html">WCAG 2</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/vpat.html">VPAT</option>
</optgroup>
<optgroup label="Choose a technology">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-html.html">HTML</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-pdf.html">PDF</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-office.html">Office Documents</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-rich-media.html">Rich Media</option>
</optgroup>
<optgroup label="Some Basics">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/basics-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/language.html">Language</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/valid-code.html">Valid Code</option>
</optgroup>
<optgroup label="Document Structure">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/headings.html">Headings</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html">ARIA Landmarks</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/lists.html">Lists</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/tables.html">Tables</option>
</optgroup>
<optgroup label="User Interactions">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/mouse-and-keyboard-events.html">Mouse and Keyboard Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html">Visual Focus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/menus.html">Menus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html">Skip to Main Content Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/forms.html">Forms</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/color-contrast.html">Color Contrast</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/links.html">Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-new-window.html">Links Opening in New Windows</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-alt.html">Text or Alt Attribute for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-internal.html">Internal Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-behavior.html">Link vs. Button</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-descriptive-target.html">Using Descriptive Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-length.html">Length of Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-unique.html">Unique Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-url.html">URL Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-underline.html">Underline Style for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/find-content-multiple.html">Finding Content in Multiple Ways</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/timed-events.html">Timed Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html">ARIA Checkbox Tutorial</option>
</optgroup>
<optgroup label="Conveying Through Alternate Senses">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/alternative-text.html">Alternative Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/captioning.html">Captioning</option>
</optgroup>
<optgroup label="Appendices">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/testing-tools.html">Appendix A - Testing Tools</option>
</optgroup>
</select>
<input id="go-button" type="button" value="GO" onclick="location = document.getElementById('toc-menu').options[ document.getElementById('toc-menu').selectedIndex].value;">
</p>
<p class="prev"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/headings.html"><img src="images/left-arrow.png" alt="previous" />Headings</a></p>
<p class="next"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/lists.html">Lists<img src="images/right-arrow.png" alt="next" /></a></p>
</nav><div id="main" role="main" tabindex="-1">
<p>ARIA landmarks are attributes you can add to elements in your page to define areas like the main content or a navigation region. The possible landmarks are as follows.</p>
<ul>
<li><strong>banner</strong> = contains the site-oriented content of each page, like the logo, usually located at the top of the page. There should only be one banner landmark per page.</li>
<li><strong>complementary</strong> = a section of content that complements the main content but also retains its meaning when separated from the main content</li>
<li><strong>contentinfo</strong> = contains content usually found in the footer of a page, like copyright and privacy statements. There should only be one contentinfo landmark per page.</li>
<li><strong>form</strong> = contains form input elements which can be edited and submitted by the user</li>
<li><strong>main</strong> = the main content of the page. There should only be one main landmark per page.</li>
<li><strong>navigation</strong> = a collection of navigation links to navigate the site or page</li>
<li><strong>search</strong> = a search tool</li>
<li><strong>application</strong> = represents a unique software unit, and keyboard commands are handled by the application rather than the browser itself. This role should be used sparingly.</li>
</ul>
<p>When you define parts of your page with these roles, it allows screen reader user the ability to easily jump from one section to another and know where they are going. For example, we often code our main menu like the following.</p>
<pre class="code"><div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
</ul>
</div></pre>
<p>When screen reader users encounter something like this they will hear a collection of links and have to intuit from the context that it is the main menu. Perhaps if they hear it read near the top of the page they can guess it is the main navigation for the page. However, with ARIA landmarks we can provide semantic information about the navigation area. By adding the attribute role=”navigation” to the containing <div>, we are marking this as a navigation region.</p>
<pre class="code"><div id="nav" role="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
</ul>
</div></pre>
<p>In this case the screen reader user will hear something like "navigation landmark."</p>
<p class="tip"><strong>You should not place the "role" attribute on another element that already has semantic meaning, like a <ul>. It should only be placed on <div> and <span> elements.</strong> While the specification allows you to place the "role" attribute on other types of elements, poor screen reader support necessitates placing the role attribute on an element with out semantic meaning. If you place the "role" attribute on something like a <ul>, most screen readers will override the element's native role with the specified one. NVDA is the only screen reader at the time of testing that implements this functionality correctly.</p>
<h2>aria-label</h2>
<p>We can take this a step further and describe this navigation region using the aria-label attribute. aria-label is a description that is never displayed on screen but is relayed to the screen reader user. This can be very helpful if you have multiple navigation areas within a single page.</p>
<pre class="code"><div id="nav" role="navigation" aria-label="main navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
</ul>
</div>
<div id="nav" role="navigation" aria-label="product navigation">
<ul>
<li>Product Description</li>
<li>Technical Specifications</li>
<li>Customer Reviews</li>
</ul>
</div></pre>
<p>In this case the screen reader user will hear something like "navigation landmark, main navigation", then "navigation landmark, product navigation"</p>
<p class="tip"><strong>Not all screen reading software will read the text in the aria-label attribute to the user.</strong> Essential information should not be included in this attribute. Rather, use this attribute to provide additional navigation aids to the Web page.</p>
<h2>aria-labelledby</h2>
<p>Another option for labeling an ARIA landmark is to use the aria-labelledby attribute. The aria-labelledby attribute is used when a particular landmark can be labelled by another on-screen element. You just list the id for the item that labels that landmark.</p>
<pre class="code"><div role="navigation" aria-labelledby="nav-heading">
<h2 id="nav-heading">Learn About This Product</h2>
<ul>
<li>Product Description</li>
<li>Technical Specifications</li>
<li>Customer Reviews</li>
</ul>
</div></pre>
<p>In this case the screen reader user will hear something like "navigation landmark, learn about this product."</p>
<h2>Full Implementation of ARIA Landmarks</h2>
<p>This demonstrates a simple Web page with most of the ARIA landmarks implemented. The application landmark is not demonstrated because it is used in specialized situations.</p>
<pre class="code"><div role="banner">banner</div>
<div id="left-column">
<div role="navigation">
<ul>
<li><a href="#">Nav link #1</a></li>
<li><a href="#">Nav link #2</a></li>
<li><a href="#">Nav link #3</a></li>
<li><a href="#">Nav link #4</a></li>
</ul>
</div>
</div>
<div id="center-column">
<div role="main">
<p>This is a tutorial on using ARIA Landmarks. Here are the steps you need to take to implement ARIA Landmarks on your site...</p>
</div>
</div>
<div id="right-column">
<div role="complementary">
<h2>ARIA and Validation</h2>
<p>If you add any ARIA attributes to your page it may cause your code to not validate against the <a href="http://validator.w3.org/">W3C Validation Service</a>. Even though it is frequently said that pages must validate in order to be accessible, this is one exception to that rule. In fact, by adding these non-validating attributes you will be making your page more accessible.</p>
</div>
<div role="form">
<form id="form1" name="form1" method="post" action="">
<p><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" /></p>
<p><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" /></p>
<p><label for="email">Email Address</label><input type="text" name="email" id="email" /></p>
<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
</form>
</div>
<div role="search">
<form id="form2" name="form2" method="post" action="">
<p><label for="search-phrase">Search for: </label><input type="text" name="search-phrase" id="search-phrase" /></p>
<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
</form>
</div>
</div>
<div role="contentinfo">
<p><a href="#">Legal</a></p>
<p><a href="#">Privacy Policy</a></p>
</div></pre>
<h2>ARIA and HTML5</h2>
<p>HTML5 introduces many new elements, several of which correspond to, or at least are similar to the ARIA attributes. Do you still need to use ARIA attributes like "navigation" if you use the if you use the <nav> element? At this point the browser and screen reader support is not strong enough to depend on only the HTML5 semantics to convey the meaning, so you should still use ARIA attributes in HTML5, even when the HTML5 element could potentially convey the same meaning.</p>
<pre class="code"><nav role="navigation"></nav></pre>
<p>The following table shows how ARIA landmarks should be applied to HTML5 Elements</p>
<table>
<caption>ARIA landmarks and their corresponding HTML5 elements</caption>
<thead>
<tr>
<th scope="col">ARIA Landmark</th>
<th scope="col">HTML5 Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>banner</td>
<td><header></td>
</tr>
<tr>
<td>complementary</td>
<td><aside></td>
</tr>
<tr>
<td>contentinfo</td>
<td>generic <div> acting as the footer</td>
</tr>
<tr>
<td>form</td>
<td><form> or generic <div></td>
</tr>
<tr>
<td>main</td>
<td><main></td>
</tr>
<tr>
<td>navigation</td>
<td><nav></td>
</tr>
<tr>
<td>search</td>
<td><form> or generic <div></td>
</tr>
<tr>
<td>application</td>
<td>generic <div></td>
</tr>
</tbody>
</table>
<div>
<h2>Further Reading</h2>
<p>Video Demonstrating Screen Readers Using ARIA Landmarks</p>
<iframe width="480" height="360" src="//www.youtube.com/embed/IhWMou12_Vk?rel=0" frameborder="0" allowfullscreen></iframe>
<ul>
<li><a href="http://accessibility.oit.ncsu.edu/tools/web-evaluation-tools/">Web Evaluation Tools - for checking ARIA landmarks and their labels</a></li>
<li><a href="http://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013#table1/">Using WAI-ARIA Landmarks – 2013 from the Paciello Group</a></li>
<li><a href="http://www.html5accessibility.com/">HTML5 Accessibility</a></li>
</ul>
</div>
</div></body>
</html>