Mangrove Accesibility Checklist
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
$
%
123
 
 
 
 
 
 
 
 
 
ABCDE
1
WebsiteMangrove Website
2
DateMarch 1, 2018
3
4
DESIGN
5
FEATURECOMPLETE?NOTESREFERENCE
6
Avoid using carousels / slidersnot always feasible
7
Buttons are descriptive"Learn More about Development Services" instead of "Learn More"
8
Forms should have labels (not just placeholders)
9
Do videos included on the website have captions?
10
No flashing content
11
Navigation links that are repeated on web pages do not change order when navigating through the site.
12
Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user.
13
Text on images is high enough contrast
14
Do not rely on rollover text to convey information
15
Do not rely on an image as the only way to link to something
16
17
18
CONTENT
19
http://4syllables.com.au/category/articles/accessibility/
20
Avoid PDFS if possible
21
Write descriptions for videos on website
22
23
24
DEVELOPMENT
25
FEATURECOMPLETE?IN TEMPLATE?NOTESREFERENCE
26
All images have alt-text?https://a11yproject.com/posts/alt-text/
27
All PDFs, video, multimedian/ahttps://www.washington.edu/accesscomputing/tip-17-describe-video
28
Forms all have labels that are descriptive (not just placeholders!!)n/ahttp://www.htmldog.com/guides/html/advanced/forms/
29
Forms have error messages that are also accessible (keyboard + color). errors that appear should have role=alert
30
Use http://www.accessify.com/tools-and-wizards/accessibility-tools/table-builder/ for tables
31
All iframes have title attribute?n/a
32
All links have a :focus state
33
Provide a “Skip to main content” link.https://webaim.org/techniques/skipnav/
34
Group related form elements with fieldset and describe the group with legend - especially around radios / checkboxesn/a<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
35
Add additional labels / descriptors to icons and stuff that screenreaders cant see.sr-only, .sr-only-focusable
36
Hide anything that a screenreader shouldn't see (icons, decorative images)aria-hidden="true", display:none, visibility:hidden
37
The navigation order of links, form elements, etc. is logical and intuitive (with keyboard too!) — check page layout without css
38
When modal appears, the focus should change the to logical action item on that modalhttps://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/
39
40
Everything is focusable and clickable in proper orderhttp://www.456bereastreet.com/archive/201104/make_links_focusable_or_use_real_buttons/
41
Screenreaders always have a dedicated "home" link they can tab to (can be hidden from normal view if you want)
42
43
44
ARIA / TAGS
45
header role="banner"your global page header
46
nav role="navigation"your navigation
47
main role="main"Wraps the focal content of document. Use only once.
48
article role="article"Represents an independent item of content.
49
aside role="complementary"n/asidebar / complementary content
50
footer role="contentinfo"
51
form role="search"n/a
52
role="dialog"on modals
53
role="alert"on all error messages, alerts that appear, popups
54
role="button"on any links, buttons
55
html lang="en"
56
aria-label="Close"on close buttons, x's
closeMarkup: '<button title="%title%" type="button" role="button" class="mfp-close" aria-label="Close">&#215;</button>',
57
aria-disabled="true"on anything with a "disabled" class
58
aria-pressed="true"add whenever you add an "active" class to something via JS
59
aria-expanded="false" aria-haspopup="true" aria-controls="collapseExample" (button)
id="collapseExample" (component)
On collapsable buttons / components. Change via JS
60
label things that dont have roles:
- aria-labelledby="dropdownMenuButton" (component)
- id="dropdownMenuButton" (thing that has the label)
61
label things that dont have labels:
- opt 1: sr-only w/ the above
- aria-label="Recipient's username"
62
describe things when applicable
- aria-describedby="basic-addon1"
63
64
Ensure enough contrast throughout site. WCAG 2.0 color contrast ratio of 4.5:1http://leaverou.github.io/contrast-ratio/
65
Ensure Protanipia Color Blindnesshttps://www.toptal.com/designers/colorfilter
66
Ensure Daltonism Color Blindnesshttps://michelf.ca/projects/sim-daltonism/
67
Navigation isn't duplicated (mobile vs desktop) for screenreaders / tabbing through)
68
69
Test using screenreader
70
Test using keyboard only
71
72
73
HELPFUL RESOURCES
74
https://webaccess.berkeley.edu/resources/tips/web-accessibility
75
https://www.washington.edu/accesscomputing/tips/
76
https://www.dreamhost.com/blog/20-tips-make-website-accessible/
77
https://www.w3.org/WAI/intro/people-use-web/
78
http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.html
79
https://accessibility.oit.ncsu.edu/using-aria-landmarks-a-demonstration/aria landmarks
80
http://northtemple.com/1608/checklist
81
https://www.wuhcag.com/wcag-checklist/checklist
82
https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/modals
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Loading...