forked from a11yproject/a11yproject.com
/
checklist.html
237 lines (194 loc) · 9.52 KB
/
checklist.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
---
layout: page
title: Web Accessibility Checklist
description: A beginner's guide to web accessibility
---
<div class="span9">
<div class="container-content">
<style type="text/css">
.checklist > ul {
margin-left: 0;
list-style-type: none;
}
.checklist label {
font-size: 1.1em;
line-height: 1.1em;
}
.checklist label input[type="checkbox"] {
width: 1.1em;
height: 1.1em;
position: relative;
top: -0.2em;
}
.checklist fieldset {
margin-bottom: 2em;
}
</style>
<div class="row-fluid">
<form action="/" data-persist="garlic" method="POST" class="checklist" id="simple-a11y-checklist">
<!-- Aria Roles -->
<fieldset id="aria-roles">
<legend>Landmarks</legend>
<p>ARIA Landmark Roles are helpful landmarks that can be used by <abbr title="Assistive Technology">AT</abbr> to navigate a website.</p>
<!-- banner -->
<label for="banner-role" class="checkbox"><code><header role="banner"></code>
<input name="aria-banner-role" id="banner-role" type="checkbox">
</label>
<p>A region of the page that is site focused. Typically your global page header.</p>
<!-- navigation -->
<label for="navigation-role" class="checkbox"><code><nav role="navigation"></code>
<input name="aria-navigation-role" id="navigation-role" type="checkbox">
</label>
<p>Contains navigational links.</p>
<!-- main -->
<label for="main-role" class="checkbox"><code><main role="main"></code>
<input name="aria-main-role" id="main-role" type="checkbox">
</label>
<p>Focal content of document. Use only once.</p>
<!-- article -->
<label for="article-role" class="checkbox"><code><article role="article"></code>
<input name="aria-article-role" id="article-role" type="checkbox">
</label>
<p>Represents an independent item of content. Use only once on outermost element of this type.</p>
<!-- complementary -->
<label for="complementary-role" class="checkbox"><code><aside role="complementary"></code>
<input name="aria-complementary-role" id="complementary-role" type="checkbox">
</label>
<p>Supporting section related to the main content even when separated.</p>
<!-- contentinfo -->
<label for="content-info" class="checkbox"><code><footer role="contentinfo"></code>
<input name="aria-contentinfo-role" id="content-info" type="checkbox">
</label>
<p>Contains information about the document (meta info, copyright, company info, etc).</p>
<!-- search -->
<label for="search-role" class="checkbox"><code><form role="search"></code>
<input name="aria-search-role" id="search-role" type="checkbox">
</label>
<p>Add a `search` role to your primary search form.</p>
</fieldset>
<!-- Language -->
<fieldset id="language">
<legend>Language Attribute</legend>
<p>Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation.</p>
<!-- text transcript -->
<label for="language-input" class="checkbox"><code><html lang="en"></code>
<input name="language-input" id="language-input" type="checkbox">
</label>
<p>Specify a language with the lang attribute on the <html> element.</p>
</fieldset>
<!-- Document Outline -->
<fieldset id="forms">
<legend>Document Outline</legend>
<!-- form document-outline -->
<label for="document-outline" class="checkbox">Use semantic headings and structure
<input name="document-outline" type="checkbox" id="document-outline">
</label>
</fieldset>
<!-- Images -->
<fieldset id="links">
<legend>Links</legend>
<!-- focus -->
<label for="links-focus" class="checkbox">Ensure links have <code class="language-markup">:focus</code> state.
<input name="links-focus" id="links-focus" type="checkbox">
</label>
<!-- underlined -->
<label for="links-underlined" class="checkbox">Ensure links are recognizable (underlined).
<input name="links-underlined" id="links-underlined" type="checkbox">
</label>
</fieldset>
<!-- Images -->
<fieldset id="images">
<legend>Images</legend>
<!-- alt -->
<label for="img-alt" class="checkbox">Use appropriate <code class="language-markup">alt</code> text. <a href="http://a11yproject.com/posts/alt-text/">Read article on using ALT text</a>
<input name="img-alt" id="img-alt" type="checkbox">
</label>
</fieldset>
<!-- Javascript -->
<fieldset id="js">
<legend>Javascript</legend>
<!-- unobtrusive js -->
<label for="unobtrusive-js" class="checkbox">Unobtrusive Javascript
<input name="unobtrusive-js-input" id="unobtrusive-js" type="checkbox">
</label>
<p>Use unobtrusive Javascript (never use inline scripting).</p>
<!-- js alts -->
<label for="alt-js" class="checkbox">No-JS Alternatives
<input name="alt-js-fallback" id="alt-js" type="checkbox">
</label>
<p>Provide alternatives for users without Javascript enabled.</p>
</fieldset>
<!-- Forms -->
<fieldset id="forms">
<legend>Forms</legend>
<!-- form layout -->
<label for="logical-layout" class="checkbox">Logical layout
<input name="logical-layout" type="checkbox" id="logical-layout">
</label>
<p>Tab order of the form follows a logical pattern.</p>
<!-- labels -->
<label for="labels" class="checkbox">Associated <code>label</code> for all form controls (e.g. <code class="language-markup">input</code>, <code class="language-markup">select</code> etc.)
<input name="labels" type="checkbox" id="labels">
</label>
<p>(e.g. <code class="language-markup"><label for="name">Name:</label><input id="name" type="text"></code>)</p>
<!-- placeholder -->
<label for="placeholders" class="checkbox">Make sure <code>placeholder</code> attributes are <strong>NOT</strong> being used in place of <code>label</code> tags. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">WHATWG</a>
<input name="placeholders" type="checkbox" id="placeholders">
</label>
<p>An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)</p>
<!-- fieldset -->
<label for="group-related-elements" class="checkbox">Group related form elements with <code class="language-markup">fieldset</code> and describe the group with <code class="language-markup">legend</code>
<input name="group-related-elements" type="checkbox" id="group-related-elements">
</label>
<p>Important for <code class="language-markup"><input type="radio"></code> and <code class="language-markup"><input type="checkbox"></code></p>
</fieldset>
<!-- Audio -->
<fieldset id="audio">
<legend>Media (Audio and Video)</legend>
<p>Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.</p>
<!-- text transcript -->
<label for="audio-input" class="checkbox">Provide text transcripts
<input name="audio-input" id="audio-input" type="checkbox">
</label>
<label for="video-subtitles" class="checkbox">Synchronized subtitles for videos
<input name="video-subtitles" id="video-subtitles" type="checkbox">
</label>
</fieldset>
<!-- Color and Contrast -->
<fieldset>
<legend>Color and Contrast</legend>
<p>Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone. <a href="http://leaverou.github.com/contrast-ratio/">Contrast Ratio</a> is one tool for checking the contrast of your colors for both standard vision and color deficient user.</p>
<label for="test-colorcontrast" class="checkbox">Test color contrast
<input name="test-colorcontrast" id="test-colorcontrast" type="checkbox">
</label>
</fieldset>
<fieldset>
<p>Test against different types of color blindness with a tool like <a href="http://colorfilter.wickline.org/">http://colorfilter.wickline.org/</a>.</p>
<p>If you are on a Mac, another option is <a href="http://michelf.ca/projects/sim-daltonism/">Michel Fortin's, Sim Daltonism</a> color blindness simulator.</p>
<label for="deuteranopia" class="checkbox">Deuteranopia
<input name="deuteranopia" id="deuteranopia" type="checkbox">
</label>
<label for="protanopia" class="checkbox">Protanopia
<input name="protanopia" id="protanopia" type="checkbox">
</label>
<label for="tritanopia" class="checkbox">Tritanopia
<input name="tritanopia" id="tritanopia" type="checkbox">
</label>
</fieldset>
<!-- Testing -->
<fieldset>
<legend>Testing</legend>
<p>Navigating your site using a range of tools, such as just the keyboard or a screen reader, will help you understand how a blind, low-vision, or limited-mobility user will experience it.</p>
<label for="test-screenreader" class="checkbox" >Test using a screen reader
<input name="test-screenreader" id="test-screenreader" type="checkbox">
</label>
<label for="test-keyboard" class="checkbox" >Test using keyboard only
<input name="test-keyboard" id="test-keyboard" type="checkbox">
</label>
</fieldset>
</form>
</div><!--/row-->
</div>
</div><!--/span-->
<div class="span3">
</div><!--/span-->