Accessible Websites Made Easy: How To Assess Issues and Create Better Experiences

Three hour workshop for Code4Lib 2019. This presentation goes over the very basics of accessibility: What it is, who it involves, and basic tools to assess your site.

Transcript

1. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues and Create Better Experiences
2. Michaela
 Blackham FRONT-END DEVELOPER
3. @atendesign aten.io
4. Work That
 Matters
5. Work That
 Matters
6. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues and Create Better Experiences
7. • Name • Role/Title • Organization • What brought you here today Introductions
8. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues and Create Better Experiences
9. • Intro • Who need an accessible site? • Accessibility Takes a Full Team • Accessibility Audits Background • Tips and Tricks • Demos and Discussion Agenda
11. What is the problem?
12. 53 million adults live with some form of a disability in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
13. That’s 1 in every 5 adults in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
14. What is Accessibility? Easy to obtain, use and understand.
15. P O U R
16. P: Perceivable O U R
17. P: Perceivable O: Operable U R
18. P: Perceivable O: Operable U: Understandable R
19. P: Perceivable O: Operable U: Understandable R: Robust
20. P: Perceivable O: Operable U: Understandable R: Robust
21. P: Perceivable O: Operable U: Understandable R: Robust
22. P: Perceivable O: Operable U: Understandable R: Robust
23. P: Perceivable O: Operable U: Understandable R: Robust
24. needs an accessible website? Who
25. Everyone
26. Everyone benefits from an accessible website.
27. There are 4 main categories
28. Visual Motor or Physical Auditory Cognitive
29. Visual Motor or Physical Auditory Cognitive
30. What does this mean? • Someone completely non sighted • Someone with low, obstructed, or constricted vision • My color blind father • Each of our aging grandparents VISUAL
34. • Navigation • Visual content • Orientation & boundaries • Contrast & size • Peripheral interaction What should I look for? VISUAL
35. • Design • Keyboard navigation • Screen readers How is this solved? VISUAL
36. Visual Motor or Physical Auditory Cognitive
37. • Someone like my cousin Emily, with a disability from birth • The wounded vet that uses prosthetics • Or even my niece with her broken arm What does this mean? MOTOR OR PHYSICAL
38. • Gesture alternatives & sensitivity touches • Reach/orientation on mobile • Non physical navigation What should I look for? MOTOR OR PHYSICAL
39. • Keyboard or touch navigation • Speech • Eye trackers, tongue sensitivity clickers etc How is this solved? MOTOR OR PHYSICAL
40. Visual Motor or Physical Auditory Cognitive
41. • Someone who is completely non hearing • My grandfather who wears a hearing aid What does this mean? AUDITORY
42. • Embedded videos • Alternative contact information What should I look for? AUDITORY
43. • Closed captioning & transcripts • Alternative communication How is this solved? AUDITORY
44. Visual Motor or Physical Auditory Cognitive
45. • My cousin Matthew who has down syndrome • The little boy I babysit with autism • Your friend who may have dyslexia • Me with extreme motion sickness What does this mean? COGNITIVE
46. • Visual density • Memory gestures • Distracting content • Fonts • Excessive movements What should I look for? COGNITIVE
47. • K.I.S.S. • Clear & consistent layouts • Smart color palettes • Controllable interactions • Subtle movements How is this solved? COGNITIVE
48. Visual Motor or Physical Auditory Cognitive
49. Where are we today?
50. Not awful, but not great.
51. There are so many devices
52. Break
53. Where can I start?
54. Accessibility takes a full team
55. Project managers
56. Make accessibility a priority from the beginning PROJECT MANAGERS
57. Education PROJECT MANAGERS
58. Content creators
59. Include meaningful alternative (alt) text for 
 all visuals CONTENT CREATORS
60. Headings to organize structure and content CONTENT CREATORS
61. Descriptive link text CONTENT CREATORS
62. Provide captions, transcripts and descriptions for media CONTENT CREATORS
63. Designers
64. Content first DESIGNERS
65. Be mindful of typography DESIGNERS
66. Provide good contrast for colorblindness and low vision DESIGNERS
71. Don’t rely on color only, to show distinctions DESIGNERS
76. Create clear and intuitive layouts DESIGNERS
78. Critique Critique Critique DESIGNERS
79. Developers
80. Use semantic markup for hierarchy & structure DEVELOPERS
82. Pay special attention to markup on forms DEVELOPERS
84. Capture content creators needs DEVELOPERS
85. Enable keyboard navigation DEVELOPERS
86. Include ARIA attributes (Accessible Rich Internet Applications) DEVELOPERS
87. Quality assurance testers
88. Computers aren’t humans QUALITY ASSURANCE TESTERS
89. Accessibility Audits
90. is an accessibility audit? What
91. An accessibility audit is an evaluation of how well your product supports the needs of web users with disabilities.
92. is an audit important? Why
93. People are afraid of getting sued
94. • Boost SEO • Usability • Awareness = Better ROI • Be a decent human being Why is an audit important? ACCESSIBILITY AUDIT
95. do I know what to follow? How
96. WCAG 2.1 508
97. WCAG 2.1 508C
98. WCAG 2.1 508C
99. Creating an accessible site is more than just following a checklist.
100. is an audit necessary? When
101. Client Facing Internal Personal
102. Client Facing Internal Personal
103. Client Facing Internal Personal
104. Client Facing Internal Personal
105. does an audit entail? What
106. • 508C vs WCAG • Passing vs a good experience • Testing • Desktop vs Mobile What do audits entail? ACCESSIBILITY AUDITS
107. Testing & Tools
108. Automated Manual
109. Automated Manual
110. • Wave • Lighthouse • Axe • PA11Y Automated Tools TESTING & TOOLS
111. • Well known • Website (wave.webaim.org) • Browser extension (for Chrome & Firefox) • Quirk: color contrast Wave TESTING & TOOLS - AUTOMATED TOOLS
115. • Integrated within Chrome • Does SEO, performance, accessibility, and best practices • Creates a “report” you can send to whoever needs to review the site • Gives your site a score Lighthouse TESTING & TOOLS - AUTOMATED TOOLS
118. Automated Manual
119. • Keyboard • Screen Reader Manual Testing TESTING & TOOLS
120. • Pass/fail • Actionable items • Focus styling • Logical order Keyboard Testing TESTING & TOOLS - MANUAL TESTING
123. • Jaws • NVDA • Voice Over (VO) Screen Readers TESTING & TOOLS - MANUAL TESTING
124. • Entire experience • Actionable items • Navigation • Content • Follow your goal Screen Reader Testing TESTING & TOOLS - MANUAL TESTING
125. Break
126. Tips & Tricks
127. Project Managers
128. • Get access to Google Analytics • Include who needs to make edits TIPS & TRICKS - PROJECT MANAGERS Project Managers
129. Content Editors
130. • DO NOT WRITE WORDS IN ALL CAPS • Check hierarchy with the “no styles” option in Wave • Outline extension (Chrome) • Use a screen reader • Read site to someone over the phone Content Editors TIPS & TRICKS - CONTENT EDITORS
131. Developers
132. • Color contrast checker (Chrome) • Is the site responsive? • Color contrast errors • Text over images • Zoom zoom zoom Developers TIPS & TRICKS - DEVELOPERS
134. • Test the “skip to main content” link • Default focus styling • Interact with actionable items • Test with ChromeLens extension to see logical order • Test forward and Backward Keyboard TIPS & TRICKS
137. • Set screen reader preferences • V.O. tutorials • Turn your screen off • Turn your mouse over • Test a site you are not familiar with • “Play all” Screen reader TIPS & TRICKS
138. • Dates • 1-3 letter words are sometimes read letter by letter • Vague Link text • Get Comfortable • Sometimes its the screen reader’s fault Screen reader TIPS & TRICKS
139. Demo
140. Let’s Practice!
141. Automated
142. • What is your score? • What other things do you need to check? • What doesn’t this account for? Google Lighthouse AUTOMATED
143. • wave.webaim.org • Styles tab • No Styles (check hierarchy) • Contrast Web AIM - Wave AUTOMATED
144. Manual
145. • Check on phone • Change size of screen • Use simulator in inspector Responsive MANUAL
146. Color Contrast MANUAL
147. Hierarchy MANUAL
148. • Focus styling for all interactive elements • Logical order of interactive elements • Skip to main content (if applicable) • Navigate site using nav and drop downs • Usability for carousels & slideshows (if applicable) • Fill out a form (if applicable) • Chromelense Keyboard MANUAL NAVIGATION HELP • Tab (forward) • Shift + Tab (Backward) • Enter/space (select link/button) • Arrow (select options, carousels) • Escape
149. Findings
150. your heart into it! P.O.U.R
151. Thanks! michaela@aten.io Michaela Blackham /