forked from a11yproject/a11yproject.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchecklist.html
192 lines (152 loc) · 8.33 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
---
layout: default
description: A handy HTML accessibility checklist.
title: Checklist
---
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="container-content">
<header class="page-header">
<h1>Web Accessibility Checklist</h1>
</header>
<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 > code {
font-size: 1em;
}
.checklist label input[type="checkbox"] {
width: 1.1em;
height: 1.1em;
position: relative;
top: -0.2em;
}
</style>
<div class="row-fluid">
<form action="" id="simple-a11y-checklist" role="form" class="checklist">
<!-- Aria Roles -->
<fieldset id="aria-roles">
<legend>ARIA Role Attributes</legend>
<!-- 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</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><section role="main"></code>
<input name="aria-main-role" id="main-role" type="checkbox">
</label>
<p>Focal content of document</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>
<!-- complementary -->
<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 <b>(meta info, copyright, company info, etc.)</b></p>
</fieldset>
<!-- Images -->
<fieldset id="images">
<legend>Images</legend>
<!-- alt -->
<label for="img-alt" class="checkbox"><code class="language-markup">alt</code> Attributes
<input name="img-alt-attr" id="img-alt" type="checkbox">
</label>
<p>Appropriate <code class="language-markup">alt</code> attribute values for images when they're not displayed while leaving text for decorative images blank (<code class="language-markup">alt=""</code>). Use <code class="language-markup">alt</code> attribute values that convey meaning to your visitors, rather than meaning to you and your colleagues.</p>
</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">Labels
<input name="labels" type="checkbox" id="labels">
</label>
<p>All form controls (e.g. <code class="language-markup">input</code>, <code class="language-markup">select</code> etc.) have an associated <code class="language-markup">label</code> element. (e.g. <code class="language-markup"><label for="name">Name:</label><input id="name" type="text"></code>)</p>
<!-- fieldset -->
<label for="group-related-elements" class="checkbox">Group related elements
<input name="group-related-elements" type="checkbox" id="group-related-elements">
</label>
<p>Related form controls are grouped together with <code class="language-markup">fieldset</code> element. Important for <code class="language-markup"><input type="radio"></code> and <code class="language-markup"><input type="checkbox"></code></p>
<!-- search -->
<label for="search-title" class="checkbox">Search field <code>title</code> attribute
<input name="search-field-title" type="checkbox" id="search-title">
</label>
<p>Additional guidance for search fields with <code class="language-markup">title="search"</code> inside the <code class="language-markup"><input type="text" ... ></code> element.</p>
</fieldset>
<!-- Audio -->
<fieldset id="audio">
<legend>Audio</legend>
<!-- text transcript -->
<label for="audio-input" class="checkbox">Provide text transcripts
<input name="audio-input" id="audio-input" type="checkbox">
</label>
<p>Providing a text transcript 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>
</fieldset>
<!-- Color Blindness -->
<fieldset>
<legend>Color Blindness</legend>
<label for="test-colorcontrast" class="checkbox">Test the contrast of the colors
<input name="test-colorcontrast" id="test-colorcontrast" type="checkbox">
</label>
<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>
</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>
<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>
<label for="test-screenreader" class="checkbox" >Test using a screen reader
<input name="test-screenreader" id="test-screenreader" type="checkbox">
</label>
<p>Navigating your site using a screen reader will help you see how the blind will experience it.</p>
</form>
</div><!--/row-->
</div>
</div><!--/span-->
<div class="span3">
</div><!--/span-->
</div><!--/row-->
</div>