Accessible Websites Made Easy - How To Assess Issues and Create Better Experiences -- Full Day Workshop

You need to make your website ADA compliant, whether it is WCAG or 508, but what does that actually mean? We'll go over the basics of accessibility and how it relates to you, your users, and your website. We'll dive into best practices for testing, recommended automated tools to use and demo a site with a screen reader to better understand your user experience. Attendees will audit their site for accessibility guidelines and then, together, we will cover the standards for fixing and avoiding common issues. Attendees should bring a laptop. Some extensions may be recommended to download.

NOTE: The screen reader portion of this demo will be using Mac's proprietary screen reader "Voiceover (VO)" which will vary slightly from other assistive technologies like NVDA and Jaws.

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 is your biggest struggle your organization’s site has with accessibility? • What are you hoping to get out of today? Introductions
8. • Intro • Who need an accessible site? • Accessibility Takes a Full Team • Accessibility Audits Background • Tips and Tricks • Demos and Discussion • bit.ly/2ZrbjEV • Agenda
9. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues and Create Better Experiences
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. • Context is everything • Is this presenting important content? • Does this image have a function? • Be succinct • Do not be redundant • Do not include phrases such as “image of”, “graphic of”, or “logo for” Writing good alt text CONTENT EDITORS
61. • Every image should have an alt attribute • Alternative text for images that include text, or icons, should just be the text from the image or what the icon conveys • Complex images (charts, graphs, maps) should describe the outcome of the data within a caption or within the text of the page • Decorative Images should include an empty alt attribute (alt=“”) Writing good alt text CONTENT EDITORS
65. Headings to organize structure and content CONTENT CREATORS • Styling should come after the content outline has been created • Thorough yet concise headings • Paragraphs should NEVER be used as headings
68. Descriptive link text CONTENT CREATORS • Avoid vague links like “click here” or “learn more” • The purpose of each link can be determined by link text alone
71. Provide captions, transcripts and descriptions for media CONTENT CREATORS
72. Designers
73. Content first DESIGNERS
74. Be mindful of typography DESIGNERS
75. Provide good contrast for colorblindness and low vision DESIGNERS
80. Don’t rely on color only, to show distinctions DESIGNERS
85. Create clear and intuitive layouts DESIGNERS
87. Critique Critique Critique DESIGNERS
88. Developers
89. Use semantic markup for hierarchy & structure DEVELOPERS
91. Pay special attention to markup on forms DEVELOPERS
93. Capture content creators needs DEVELOPERS • Alt Text should be available for all images • Images should default to alt=“” if nothing is included CMS • Captions should be available for all images (for complex images) • Include all heading styles in WYSIWYG • Include styles like all uppercase in WYSIWYG
94. Enable keyboard navigation DEVELOPERS
95. Include ARIA attributes (Accessible Rich Internet Applications) DEVELOPERS
96. Quality assurance testers
97. Computers aren’t humans QUALITY ASSURANCE TESTERS
98. Accessibility Audits
99. is an accessibility audit? What
100. An accessibility audit is an evaluation of how well your product supports the needs of web users with disabilities.
101. is an audit important? Why
102. People are afraid of getting sued
103. • Boost SEO • Usability • Awareness = Better ROI • Be a decent human being Why is an audit important? ACCESSIBILITY AUDIT
104. do I know what to follow? How
105. WCAG 2.1 508C
106. WCAG 2.1 508C
107. WCAG 2.1 508C
108. Creating an accessible site is more than just following a checklist.
109. is an audit necessary? When
110. Client Facing Internal Personal
111. Client Facing Internal Personal
112. Client Facing Internal Personal
113. Client Facing Internal Personal
114. does an audit entail? What
115. • Guidelines • Passing vs a good experience • Testing • Desktop vs Mobile What do audits entail? ACCESSIBILITY AUDITS
116. Testing & Tools
117. Automated Manual
118. Automated Manual
119. • Wave • Lighthouse • PA11Y • Axe Automated Tools TESTING & TOOLS
120. • Well known • Website (wave.webaim.org) • Browser extension (for Chrome & Firefox) • Quirk: color contrast Wave TESTING & TOOLS - AUTOMATED TOOLS
124. • 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
127. Automated Manual
128. • Keyboard • Screen Reader Manual Testing TESTING & TOOLS
129. • Pass/fail • Actionable items • Focus styling • Logical order Keyboard Testing TESTING & TOOLS - MANUAL TESTING
132. • Jaws • NVDA • Voice Over (VO) Screen Readers TESTING & TOOLS - MANUAL TESTING
133. • Entire experience • Actionable items • Navigation • Content • Follow your goal Screen Reader Testing TESTING & TOOLS - MANUAL TESTING
134. Break
135. Tips & Tricks
136. Project Managers
137. • Get access to Google Analytics • Include who needs to make edits TIPS & TRICKS - PROJECT MANAGERS Project Managers
138. Content Editors
139. • 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
140. Developers
141. • Color contrast checker (Chrome) • Is the site responsive? • Color contrast errors • Text over images • Zoom zoom zoom Developers TIPS & TRICKS - DEVELOPERS
143. • 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
146. • 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
147. • 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
148. Demo
149. Let’s Practice!
150. Automated
151. • What is your score? • What errors did you get? • What other things do you need to check? Google Lighthouse AUTOMATED
152. • wave.webaim.org • Styles tab • No Styles (check hierarchy) • Contrast Web AIM - Wave AUTOMATED
153. Manual
154. • Check on phone • Change size of screen • Use simulator in inspector Responsive MANUAL
155. • Double check any color contrast issues from automated tests Color Contrast MANUAL
156. Hierarchy MANUAL
157. • 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
158. Findings
159. your heart into it! P.O.U.R
160. Thanks! michaela@aten.io Michaela Blackham /