Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making your website ADA Compliant

Bfa63362ca0c223cda7769eda335f878?s=47 @angularboy
December 01, 2018

Making your website ADA Compliant

Coding an ADA-compliant website is achievable with minimal expense and minimal impact on usability with some basic guidelines and strategies. In this talk, Aayush will highlight the entry barriers to accessibility, helping you with the tools required to analyze your website and make it ADA compliant



December 01, 2018


  1. Making Your Website ADA Compliant

  2. https://goo.gl/3EF1dd

  3. I am a Web Developer and Open Source Enthusiast working

    towards Web Accessibility & Usability. Aayush Arora
  4. Web accessibility means that people with disabilities can use the

  5. 1990

  6. Americans with Disabilities Act No individual shall be discriminated against

    on the basis of disability in the full & equal enjoyment of goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation by any person who owns, leases ( or leases to) or operates a place of public accommodation.
  7. Websites Place of Public Accommodation

  8. None
  9. None
  10. How to solve?

  11. Web Content Accessibility Guidelines (WCAG) provides a single shared standard

    for web content accessibility that meets the needs of everyone.
  12. None
  13. Meet Kyle Woodruff • Kyle is having vision disability. •

    Kyle stays away from Online Classes 90% sites have problems accessing content Link
  14. Meet Gordon Richins • Gordon Richens is having a motor

    disability. • He can’t use mouse and feels fatigue after a few minutes of using it. • With Mouse Stick, Gordon can access the computer but not the web. Link
  15. Meet Curtis Radford • Curtis Radford is having hearing disability.

    • He can’t listen to the audio of media content present on Web. • Curtis performs guess work if the captions are not present on the video. Link
  16. 217 Million People are Disabled. 37 Million People are Blind.

  17. Three Reasons for WCAG Empathy Business Legislation

  18. How we think of browsing Web

  19. How People Browse the Web?

  20. Type of Disabilities Hyperactivity Disorder Blindness or Low Vision Hard

    of Hearing Disability or Deaf Speech and Language Disabilities Brain Injuries Physical Disability
  21. User Agent Websites

  22. User Agent Websites Input

  23. User Agent Websites

  24. How WCAG solves this problem?

  25. WCAG PRINCIPLES Perceivable Operable Understandable Robust

  26. WCAG PRINCIPLES Perceivable – Success Criteria Operable – Success Criteria

    Understandable - Success Criteria Robust - Success Criteria
  27. Compliance Levels A AA AAA

  28. Perceivable

  29. Information and UI components must be presented in ways users

    can perceive without losing information and structure. W3C
  30. Who is generating the content? Alt Text User? Set alt

    text = ‘’ You? Set alt text = description
  31. Prerecorded Audio Only •Creating Text Transcripts • Commercial Services •

    Scribie • Casting Words • Rev • Automated Services • Youtube • Free Softwares • otranscribe
  32. Prerecorded Video Only

  33. Maintaining Color Contrast Ratio

  34. Orientation Content does not restrict its view and operation to

    a single display orientation.
  35. Resize Text- Say No to Pixels

  36. Operable

  37. Interface Elements in the content must be Operable -W3C

  38. Screen Readers

  39. The Common Mistake

  40. https://codepen.io/joshsorosky/pen/gaaBo B

  41. Correction

  42. None
  43. Skip Navigation Functionality

  44. None
  45. div != button https://www.w3.org/TR/WCAG21/#keyboard-accessible

  46. Low Vision Impairment

  47. None
  48. Care about seizures. Web pages do not contain anything that

    flashes more than 3 times in 1 second
  49. Proper Inputs

  50. Sometimes it’s better to write repetitive code ☺

  51. Focus Visible

  52. Allow Time-Indepen dent Interaction Turn Off Adjust Extend

  53. Providing Control to Users

  54. Understandable

  55. Making Web Pages Readable

  56. Input Assistance

  57. Make Webpages Predictable •Don’t change the context •On focus •On

    Input •Consistent Navigation
  58. Robust

  59. Content must be robust enough that it can be interpreted

    by by a wide variety of user agents, including assistive technologies.
  60. •Markup should pass the HTML5 validator checks •Id’s should be

    unique on the page.
  61. TOOLS For Accessibility Testing

  62. Accessibility Chrome Extension

  63. Accessibility Testing

  64. Using Tenon.io https://tenon.io/

  65. https://tenon.io/

  66. Color Combination colorsafe.co

  67. tota11y

  68. http://khan.github.io/tota11y/

  69. Chrome Audit

  70. None
  71. What we Learned: Wrap-up •Why we need ADA ? •Guidelines

    for ADA •WCAG 2.0 Overview •Four Principles – Perceivable, Operable, Understandable and Robust •Tools for Testing Accessibility
  72. Alt Text Captioning Contrast Ratios Orientation Resizing Screen Text Give

    user Control Time Independent Interactions Seizures Skip Navigation Keyboard Navigation Making Webpages Readable Making Webpages Predictable Error handling Validated HTML content Unique id’s
  73. Your Next Steps Follow Follow the Accessibility Community to get

    the updates. Fix Fix issues keeping in mind the Perceivable, Operable, Understandable and Robust Success Criteria’s and achieve ADA compliance. Run Run the Chrome Audit on your existing website
  74. Questions ? Medium: https://medium.com/@angularboy Twitter: https://twitter.com/angularboy LinkedIn: https://www.linkedin.com/in/angularboy/

  75. Thank you @angularboy