Save 37% off PRO during our Black Friday Sale! »

The Web is for Everyone - Techorama 2021

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.

6eba1f57228c83530d0b5fa40a03c684?s=128

Courtney Heitman

May 17, 2021
Tweet

Transcript

  1. None
  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)