Intro to Web Accessibility for WiLS World

1e56679c0384d36280c82f450ac8c473?s=47 Ash Dzick
July 23, 2019

Intro to Web Accessibility for WiLS World


Ash Dzick

July 23, 2019


  1. “We design to embrace the things that make us human.

    It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive.”
  2. Intro to Web Accessibility WiLS World July 23, 2019

  3. Today’s Talk Brief into to accessibility Types of impairments Accessibility

    guidelines Tools and resources
  4. National Federation of the Blind versus Target Landmark accessibility case

    Challenged whether Americans with Disabilities Act applied to websites or just physical locations 2006
  5. American Council of the Blind versus Staples Staples had six

    months to apply priority one and two checkpoints of WCAG 1.0 Modern equivalent would be WCAG 2.0 AA, which most companies strive for 2009
  6. National Association for the Deaf versus Netflix Netflix violated Title

    III of ADA by not providing closed captioning Netflix agreed to make “good faith, diligent efforts" ensure compatibility on most devices but is not obligated to get it 100% device compatible Had to provide captions on all new content 2012
  7. Ashley Cwikla versus Bank of America Bank of America Credit

    Card Rewards redemption was hard to complete for visually impaired individuals BoA had to meet WCAG Level AA standards and conduct internal training for customer service staff to assist with visually impaired clients 2015
  8. Confidential Plaintiff versus Kmart, McDonalds, GrubHub Confidential plaintiff and terms

    The cases were filed early 2017 and settled within weeks 2017
  9. In 2017, plaintiffs filed at least 814 federal lawsuits about

    allegedly inaccessible websites.
  10. In 2018, that number rose to over 2,000.

  11. In 2019, this number is expected to grow to more

    than 4,000.
  12. 156 lawsuits in May 2019 ! Business Services Retail and

    Consumer Products Restaurants and Food Manufacturing Healthcare Hotels Government Banking and Financial Real Estate Automotive and Transportation " Other # $ % & ' ( ) *
  13. ! Business Services Retail and Consumer Products Restaurants and Food

    Manufacturing Healthcare Hotels Government Banking and Financial Real Estate Automotive and Transportation " Other # $ % & ' ( ) * 35 34 26 23 12 7 7 3 3 3
  14. Even if you are not in danger of being sued,

    you should strive to be accessibility compliant.
  15. 92% People with disabilities who use the internet

  16. 91% People with disabilities who use a mobile phone or

  17. 1 in 5 people have a legal officially recognized permanent

  18. Examples of Legal Disabilities Holding Phone and Tapping: Missing Limb

    Remembering: Alzheimers, Dementia Reading and Seeing: Blindness, Vision Loss Hearing: Deaf
  19. None
  20. Anyone can have a temporary impairment.

  21. Examples of Temporary Impairments Holding Phone and Tapping: Broken or

    injured limb Remembering: Concussions and temporary memory loss Reading and Seeing: Eye surgeries, Cataracts, temporary vision loss Hearing: Ear infections, tinnitus (ear ringing)
  22. None
  23. Situations can impact every user’s experience.

  24. Examples of Situational Impact Holding Phone and Tapping: Holding an

    object, like a bag or laptop Remembering: Distracted by other people, really focused on their goal Reading and Seeing: Sunny day, glare Hearing: Wearing headphones, loud environment
  25. Example from Microsoft inclusive design

  26. Microsoft We design to embrace the things that make us

    human. It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive.”
  27. Accessibility Guidelines

  28. Who makes the rules? Web Accessibility Initiative (WAI) of World

    Wide Web Consortium (W3C) Guidelines for inclusive design Influence accessibility and disability law Both website and mobile apps Perceivable, Operable, Understandable, Robust (POUR)
  29. “Information and user interface components must be presentable to users

    in ways they can perceive”
  30. None
  31. Perceivable Users can find all the info they need Text

    and images should be readable Media has a sound alternative Color isn’t used to solely convey info
  32. Perceivable Make sure everything is readable Aim for higher color

    contrast Use readable fonts
  33. None
  34. None
  35. “User interface components and navigation must be operable.”

  36. Operable Users need to be able to get to (and

    from) all non-decorative elements on the screen Information should be organized in a way that’s easy to understand Additional plugins can interfere with assistive devices
  37. Operable Design for a variety of contexts Watch out for

    keyboard traps Build a hierarchy
  38. None
  39. None
  40. None
  41. “Information and the operation of user interface must be understandable.”

  42. Understandable Users should be able to understand how your app

    works Can understand what the info means Messaging is consistent without using overwhelming jargon
  43. Understandable Don’t use overly complex language Label everything Provide forgiveness

  44. None
  45. None
  46. None
  47. Forgiveness Help in entering inputs Guided tips to the user

    404s and 501s should provide direction
  48. None
  49. Layout Rely on layout conventions (top nav, menu placements, etc)

    Android and iOS have accessibility in mind by default Consistency between screen sizes and mediums is not a requirement Important elements positioned prior to the screen break
  50. None
  51. None
  52. None
  53. “Content must be robust enough that it can be interpreted

    reliably by a wide variety of user agents, including assistive technologies.”
  54. Robust Users can access your app through a variety of

    ways Taps and touches Voice assistants (Siri, Alexa, Cortana) Screen readers Resizing
  55. Robust Make sure screen readers can use your design Look

    out for slowness or performance issues Responsive User shouldn’t be able to easily break your website/app/product
  56. Screen readers Android: TalkBack, iOS: VoiceOver Avoid unnecessary sounds Multiple

    ways to navigate screens with a screen reader May use screen reader by itself or with other assistive technology
  57. + Perceivable , Operable - Understandable . Robust POUR to

    remember accessibility
  58. What are the WCAG levels? A: Lowest level. These are

    easier to implement, have a high impact on the overall population AA: High impact, but a lower portion of the population AAA: Focused improvements for specific users
  59. Level A Examples (not a complete list) • Include text

    alternatives for media • Provide captions for videos with audio • Avoid jargon • Don’t rely solely on color to give information (think error messages) • Label form fields • Use a meaningful header structure • No major code errors
  60. Level AA Examples (not a complete list) • Everything in

    A • Color contrast of 4.5:1 • Text can be zoomed to 200% and still be able to use website • Suggest alternatives when users run into errors • Keyboard focus is clear • I can tab forward and back through website
  61. Level AAA Examples (not a complete list) • Everything in

    A, AA • Videos have a sign language alternative • Contrast ratio is 7:1 • No images of text • All Abbreviations and unusual words are explained • No timeouts • Provide detailed help and instructions
  62. Which level is right for me? Get everything done you

    can reasonably accomplish in your budget and timeframe You should be able to meet all Level A criteria at a minimum Parts of Level AA can be accomplished fairly easily as your team learns and grows Look for Level AA compliance over time and aspects of Level AAA that are easier for your team to implement
  63. Which level is right for me? American Library Association has

    recommended WCAG 2.0 since 2009 Does not specify which level
  64. How can I get started? / Critical Path 0 Full

    Audit 1 Triage 2 Educate and Train 3 Build into Dev Cycle
  65. Accessibility Demos

  66. Books A Web For Everyone - Designing Accessible User Experiences

    Sarah Horton & Whitney Quesenbery, Rosenfeld Media, 2013 Accessibility For Everyone
 Laura Kalbag
 Accessibility Handbook - Making 508 Compliant Websites
 Katie Cunningham
  67. Tools Screen Reader WAVE Sim Daltonism Colour Contrast Analyzer

  68. Built into MacOS



  71. None
  72. None
  73. None

  75. No color blindness Perfect vision

  76. Yellow-Blue Colorblind Tritanopia

  77. Red-Green Colorblind Deuteranopia

  78. Other Resources The Why and How of Screenreader Testing

  79. Questions? Ashley Dzick Professor @ MSOE Accessibility Consultant Slides: