forked from DrummerHead/WAI-ARIA-Cheatsheet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexbackup.html
195 lines (168 loc) · 8.05 KB
/
indexbackup.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
<!doctype html>
<html>
<head>
<title>WAI ARIA Cheatsheet</title>
<meta charset='utf-8'>
<meta name='description' content='WAI ARIA Landmark Roles Cheatsheet and introduction'>
<meta name='author' content='DrummerHead'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='stijl.css?7'>
<link rel="stylesheet" href="../css/promiscuous.css?7">
<!--
____ _ _ _
| _ \ _ __ _ _ _ __ ___ _ __ ___ ___ _ __| | | | ___ __ _ __| |
| | | | '__| | | | '_ ` _ \| '_ ` _ \ / _ \ '__| |_| |/ _ \/ _` |/ _` |
| |_| | | | |_| | | | | | | | | | | | __/ | | _ | __/ (_| | (_| |
|____/|_| \__,_|_| |_| |_|_| |_| |_|\___|_| |_| |_|\___|\__,_|\__,_|
Made all this stuff, done with a lotta love :D
-->
</head>
<body>
<header id="brand">
<a href="/" title="Go to mcdlr homepage">Go to mcdlr homepage</a>
</header>
<header role='banner'>
<h1>WAI-ARIA Landmark Roles Cheatsheet</h1>
<nav>
<ol role='navigation'>
<li>
<a href='#what-is-wai-aria' rel='section'>What</a>
</li>
<li>
<a href='#wai-aria-benefits' rel='section'>Why</a>
</li>
<li>
<a href='#wai-aria-code-example' rel='section'>Code</a>
</li>
</ol>
<form role='search'>
<input type='search' placeholder='Example search form'>
<input type='submit' value='search'>
</form>
</nav>
<a href='http://www.w3.org/TR/wai-aria/roles#banner' rel='help external' id='role-banner'>
<code>
<header role="banner">
</code>
</a>
<a href='http://www.w3.org/TR/wai-aria/roles#navigation' rel='help external' id='role-navigation'>
<code>
<ol role="navigation">
</code>
</a>
<a href='http://www.w3.org/TR/wai-aria/roles#search' rel='help external' id='role-search'>
<code>
<form role="search">
</code>
</a>
</header>
<div role='main'>
<h2 id='what-is-wai-aria'>What is <abbr title='Accessible Rich Internet Applications'>WAI-ARIA</abbr>?</h2>
<p>In practice, WAI-ARIA gives us more attributes to assign to elements. There are two kinds of attributes, the <a href='http://www.w3.org/TR/wai-aria/roles#landmark_roles' rel='help external'><code>role</code></a> attribute and the <a href='http://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def' rel='help external'><code>aria-.*</code></a> attributes (“.*” meaning that what follows “aria-” is variable)</p>
<p>These new attributes seek to increase the semantics of our documents, facilitate the <a href='http://www.w3.org/WAI/intro/aria#is' rel='external'>development of Rich Internet Applications</a> and improve <a href='http://www.w3.org/WAI/intro/aria.php#issues' rel='external'>Accessibility</a></p>
<p>The <code>aria-.*</code> attributes and the values they can have gives us information about the state of an element, and are more geared toward Rich Application Development.</p>
<p>The <code>role</code> attribute and the values it can have gives us information about the purpose of an element in question (is it navigation? Main data? Or tangential content?). Assistive technologies can use this information to jump directly to the main content, immediately detect the main navigation of the document, etc.</p>
<p>This document focuses on the more common WAI-ARIA Landmark Roles, as you can see displayed in yellow. Also, just because you see them here does not mean that they all should be used, it all depends on the actual content of your page. Some Roles are suitable for more than what is shown here, e.g. <code>complementary</code> is suitable for sidebars and also other kind of contents, for more info on any given Role just click on them.</p>
<h2 id='wai-aria-benefits'>Why should I use WAI-ARIA Landmark Roles?</h2>
<p>You will enrich the semantics of your documents and improve accessibility.</p>
<p>You will also have better “hooks” to target your elements, avoiding excessive use of <code>id</code> or <code>class</code> attributes. WAI-ARIA Role values can not be repeated, but HTML5 elements can (you can have several <code>header</code> or <code>footer</code> elements in a single page), so it is easier to make sure you are targeting your actual document header, instead of affecting every possible <code>header</code> element that may in the future be put on your document</p>
<h2 id='wai-aria-code-example'>Can I see some code?</h2>
<p>Yeah, sure! :D here is a basic document skeleton with proper role attributes and values:</p>
<pre>
<code>
<!doctype html>
<html>
<head>
<title>Title of your document</title>
<meta charset="utf-8">
<meta name="description" content="description of your document">
</head>
<body>
<header role="banner">
<h1>Title of your document</h1>
<nav>
<ol role="navigation">
<li>
<a href="#">alpha</a>
</li>
<li>
<a href="#">bravo</a>
</li>
<li>
<a href="#">charlie</a>
</li>
<li>
<a href="#">delta</a>
</li>
</ol>
<form role="search">
<input type="search" placeholder="Need to find something?">
<input type="submit" value="search">
</form>
</nav>
</header>
<div role="main">
<h2>Main Content</h2>
<p>Juicy content</p>
</div>
<aside role="complementary">
<h2>Sidebar</h2>
<p>Complementary content</p>
</aside>
<footer role="contentinfo">
<h2>Footer</h2>
<p>Information about the document</p>
</footer>
</body>
</html>
</code>
</pre>
<a href='http://www.w3.org/TR/wai-aria/roles#main' rel='help external' id='role-main'>
<code>
<div role="main">
</code>
</a>
</div>
<aside role='complementary'>
<h2>More About WAI-ARIA from:</h2>
<ul>
<li>
<a href='http://www.w3.org/TR/wai-aria/' rel='external'>W3C</a>
</li>
<li>
<a href='http://www.w3.org/WAI/intro/aria.php' rel='external'>Web Accessibility initiative</a>
</li>
<li>
<a href='http://www.alistapart.com/articles/waiaria' rel='external'>A List Apart</a>
</li>
<li>
<a href='http://dev.opera.com/articles/view/introduction-to-wai-aria/' rel='external'>Dev.Opera</a>
</li>
</ul>
<a href='http://www.w3.org/TR/wai-aria/roles#complementary' rel='help external' id='role-complementary'>
<code>
<aside role="complementary">
</code>
</a>
</aside>
<footer role='contentinfo'>
<p class='vcard'>Done with a lotta love ♥ by <a href='http://mcdlr.com/' rel='author me' class='url fn'>DrummerHead</a>, you can find me on <a href='http://twitter.com/DrummerHead' rel='author me external' class='url'>Twitter</a> and also <a href='mailto:drummerhead@gmail.com' rel='contact' class='email' >drop me a line</a> if you see any errors or just wanna say hi :)</p>
<a href='http://www.w3.org/TR/wai-aria/roles#contentinfo' rel='help external' id='role-contentinfo'>
<code>
<footer role="contentinfo">
</code>
</a>
</footer>
<!-- Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1030009-5");
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- /Google analytics -->
</body>
</html>