The Web is for Everyone - Techorama 2021

Tim Berners-Lee is noted as saying “the power of the web is in its universality." The web was meant to be a great equalizer for everyone - whether you are situationally, temporarily, or permanently disabled. After all, you never know when you might break your arm or have to order pizza while holding a child. This talk will go over why things like inclusive design, user experience, and programming for accessibility aren't just good practices, but why they are essential to helping make the web a better place for everyone. You'll leave this session with greater knowledge of how to design and develop with accessibility in mind.

Transcript

2. @courtneyheitman My Slides http://bit.ly/techorama-web4all The Web is For Everyone ACCESSIBILITY IS ESSENTIAL
3. @courtneyheitman Disability A mismatch in interaction between the features of a person's body and the features of the environment in which they live 3
4. @courtneyheitman We will all be disabled in our lifetimes. 4 Graphic from Microsoft’s Inclusive Design Toolkit One arm Arm injury New parent Deaf Ear infection Bartender Non-verbal Laryngitis Heavy Accent Blind Cataracts Distracted Driver
5. @courtneyheitman VISION DRIVING, PRESBYOPIA, BLINDNESS, COLORBLINDNESS 5
6. @courtneyheitman HEARING EAR INFECTIONS, PRESBYCUSIS, DEAFNESS 6
7. @courtneyheitman SPEECH LARYNGITIS, APRAXIA, NON-VERBAL 7
8. @courtneyheitman MOBILITY NEW BABY, ARM/LEG INJURY, QUAD/PARAPLEGIA 8
9. @courtneyheitman LEARNING DISTRACTED, DYSLEXIA, TRAUMATIC BRAIN INJURY 9
10. @courtneyheitman NEURODIVERSITY ANXIETY, DEPRESSION, ADHD, OCD, AUTISM 10
11. @courtneyheitman Opportunity 11 “THE POWER OF THE WEB IS IN ITS UNIVERSALITY.” Tim Berners-Lee, Director of W3C and Inventor of the World Wide Web
12. @courtneyheitman DEFINING AFFORDANCES WHAT POSSIBLE ACTIONS SOMEONE CAN DO 12
13. @courtneyheitman 13 Photo by Liviu C. on Unsplash
14. @courtneyheitman 14 Photo by Brooke Cagle on Unsplash
15. @courtneyheitman 15 Photo by João Ferrão on Unsplash
16. @courtneyheitman 16
17. @courtneyheitman User Patterns Recurring solutions that solve common design problems. 17
18. @courtneyheitman Common User Patterns 18 • Breadcrumbs • Accordion menus • Carousels • Drag and drops • Modals
19. @courtneyheitman 19
20. @courtneyheitman It helps everyone. ACCESSIBILITY DOESN’T HELP JUST DISABLED PEOPLE. 20
21. @courtneyheitman What is WCAG? WEB CONTENT ACCESSIBILITY GUIDELINES 21
22. @courtneyheitman WHAT WCAG COVERS CAN YOU USE IT WITH A KEYBOARD? 22
23. @courtneyheitman WHAT WCAG COVERS DO YOU DEPEND ON COLOR? 23
24. @courtneyheitman WHAT WCAG COVERS DO YOU HAVE CAPTIONING? 24
25. @courtneyheitman WHAT WCAG COVERS DO YOU HAVE ALT TEXT? 25
26. @courtneyheitman WHAT WCAG COVERS DO YOU HAVE A SKIP NAV? 26
27. @courtneyheitman WHAT WCAG COVERS WILL THIS CAUSE SEIZURES? 27
28. @courtneyheitman WHAT WCAG COVERS IS FOCUS VISIBLE? 28
29. @courtneyheitman WHAT WCAG COVERS IS THERE PROPER ERROR MESSAGING? 29
30. @courtneyheitman WHAT WCAG COVERS CAN YOU ZOOM TO 200%? 30
31. @courtneyheitman Developing for Accessibility WHAT YOU NEED TO KNOW 31
32. @courtneyheitman What does accessible code look like? 32 SEMANTIC HTML HEADING LEVELS 1-6 LISTS TABLES <P> <EM> LINKS <A></A> BUTTON INPUT
33. @courtneyheitman What does accessible code look like? 33 HTML5 SEMANTIC LANDMARKS <FOOTER> <HEADER> <NAV> <MAIN> <ARTICLE> <ASIDE> <SECTION> <FIGURE>
34. @courtneyheitman What does accessible code look like? LANDMARKS ROLES ARIA ROLES JAVASCRIPT WIDGETS ARIA ROLES FOCUS STATES PROPERTIES 34 https://www.html5accessibility.com/
35. @courtneyheitman https://www.html5accessibility.com/ 35
36. @courtneyheitman https://www.html5accessibility.com/ 36
37. @courtneyheitman Roles & ARIA Roles RICH <div role=”button” aria- pressed="false">click me!</div> <span role="link" onclick="goToLink(event, '#')" onkeydown="(goToLink(event, #')"> click me!</span> 37 SEMANTIC <button type="button"> click me!</button> <a href="#" class="button"> click me!</a> CLICK ME!
38. @courtneyheitman Roles & ARIA Roles RICH <figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="the Sydney Opera House"> <figcaption id="operahouse_1">we saw the opera <em>Barber of Seville</em> here!</figcaption> </figure> 38 SEMANTIC <img src=“operahousesteps.jpg” alt=“the Sydney Opera House” /> We saw the opera Barber of Seville here!
39. @courtneyheitman 39
40. @courtneyheitman 40 Accessible Forms <label for="name-field">name:</label> <input id="name-field" type="text" name="textfield"> Form Controls: https://webaim.org/techniques/forms/controls
41. @courtneyheitman Accessible Forms <div id="radio_label">my radio label</div> <ul role="radiogroup" aria-labelledby="radio_label"> <li role="radio">item #1</li> <li role="radio">item #2</li> <li role="radio">item #3</li> </ul> Advanced Labeling: https://webaim.org/techniques/forms/advanced 41
42. @courtneyheitman Checking for Compliance TOOLS TO HELP 42
43. @courtneyheitman AXE 43 https://www.deque.com/axe/browser-extensions/
44. @courtneyheitman 44
45. @courtneyheitman ACCESSIBILITY INSIGHTS FOR WEB 45 https://AccessibilityInsights.io
46. @courtneyheitman 46
47. @courtneyheitman SCREEN READERS https://webaim.org/projects/screenreadersurvey8/ 47
48. @courtneyheitman Popular Screen Readers 48 • NVDA - Windows • JAWS – Windows (Paid) • VoiceOver – Mac and iOS • TalkBack - Android
49. @courtneyheitman Screen Reader Resources 49 https://dequeuniversity.com/screenreaders/ https://sr-workshop101.glitch.me/
50. @courtneyheitman 50
51. @courtneyheitman 51 USER EXPERIENCE WEB STANDARDS ACCESS TECHNOLOGIES DIGITAL ACCESSIBILITY
52. @courtneyheitman BARCLAY’S DESIGNING FOR VULNERABLE POPULATIONS https://www.youtube.com/watch?v=e 8qUCi-lqVo HTML5 ACCESSIBILITY https://www.html5accessibility.com/ ACCESSIBLE FORMS https://webaim.org/techniques/forms /controls https://webaim.org/techniques/forms /advanced Resources AUTOMATED TOOLS https://www.deque.com/axe/ browser-extensions/ https://accessibilityinsights.io SCREEN READER https://webaim.org/projects/screen readersurvey8/ https://dequeuniversity.com/screen readers/ https://sr-workshop101.glitch.me/ 52
53. @courtneyheitman GAAD is May 20th! 53 GlobalAccessibilityAwarenessDay.org My Slides http://bit.ly/techorama-web4all
54. @courtneyheitman Want to add free closed captioning to your PowerPoint presentations? Slide Show ribbon tab > Check Always Use Subtitles checkbox (location varies slightly on Windows)