Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ADA Compliance

A brown bag session I gave to my coworkers on the Americans with Disability Act (ADA) back in 2017. It still holds true today.

  • Login to see the comments

  • Be the first to like this

ADA Compliance

  1. 1. ADA Compliance Yingying | 06/02/2017
  2. 2. ADA = American with Disabilities Act
  3. 3. Disabilities in the U.S. Nearly 1 in 5 Americans have some kind of disability (US Census Bureau, 2010) For more info, visit: US Census Bureau, disability types Communicative Physical Mental Visual Impairments Hearing Impairments Lower body limitations Use a wheelchair Upper body limitations Learning disabilities Alzheimer’s, senility, etc Intellectual disabilities Depressed or anxious Trouble concentrating
  4. 4. through different visions Normal Red-Green Color Blindness Monochromacy
  5. 5. Browse a website using screen readers 0:55-2:30 Look for a chocolate cookie recipe
  6. 6. ADA (American with Disabilities Act) The Americans with Disabilities Act of 1990 (ADA) prohibits discrimination and ensures equal opportunity for persons with disabilities in 1. Employment 2. State and local government services 3. Public accommodations, commercial facilities, and transportation (Related: Section 508 of Rehabilitation Act of 1973: enforced for technologies implemented for federal agencies.) For more info, visit:, Section 508 In 2010, Dept of Justice said it would amend ADA language to ensure accessibility to websites for individuals with disabilities. Amendment expected in 2018, but enforcement are ongoing.
  7. 7. Which website is a place of public accommodation? All websites that offer direct sale of goods or services, even those that lack “some connection to physical space.” (Second, and Seventh Circuit courts) Any website or mobile application where business is transacted with the public is vulnerable to such a challenge. E.g. E-commerce websites (Amazon, Target), Hearsay Sites
  8. 8. Is this a new thing? In Europe, digital accessibility is understood as a citizenship obligation. ● UK – 1995 ● Ireland – 1999 ● Greece – 2003 ● Germany – 2005 ● Spain – 2005 ● France – 2005 Reference: Slides on Digital Accessibility
  9. 9. Why is it important for us?
  10. 10. ADA standards?
  11. 11. WCAG 2.0 AA WCAG = Web Content Accessibility Guidelines Developed by World Wide Web Consortium’s (W3C), endorsed by DOJ. WCAG 2.0 AA is: ● Recommended by DOJ as ADA standards ● Required for federal agency website standards (Section 508), Compliance Deadline of January 18, 2018 For more info, visit:
  12. 12. WCAG 2.0 Degrees of Accessibility Level A Level AA Level AAA Least demanding Endorsed by DOJ Most demanding Make it easy for people to navigate and translate the content. Provides the least benefits to impaired users Makes sites accessible to people with a wider range of disabilities, including the most common barriers to use. Make it accessible to the widest range of people with disabilities. Won’t impact the look and feel Won’t impact the look and feel Significant impact on look and feel
  13. 13. WCAG 2.0 - 4 Principles Examples next are mostly based on Level AA rules. More details on requirements & techniques:
  14. 14. Principle 1: Perceivable Information and user interface components must be presentable to users in ways they can perceive.
  15. 15. Provide text alternatives for non-text content ✔ Alternative for images, CAPTCHA
  16. 16. Provide captions and alternatives for multimedia Video caption Video caption - live Video transcript ✔ Caption, transcript for multimedia
  17. 17. Create content that can be presented in different ways, including by assistive technologies, without losing meaning ✔ Organize content in a meaning way ✖ Rely on color alone to express message ✔ Combine color and text
  18. 18. Make it easier for users to see and hear content ✔ Combo of color and text ✔ Let user control audio volume ✔ Color contrast > 4.5 : 1 ✔ Resizeable text
  19. 19. Principle 2: Operable User interface components and navigation must be operable.
  20. 20. Make all functionality available from a keyboard ✔ Let users “Tab” & “Enter” to browse the website
  21. 21. Give users enough time to read and use content ✔ User can control timing ✖ User can’t control timing
  22. 22. Do not use content that causes seizures ✖ Too flashy!
  23. 23. Help users navigate and find content ✔ Easy to navigate ✖ Hard to navigate
  24. 24. Principle 3: Understandable Information and the operation of user interface must be understandable.
  25. 25. Make text readable and understandable ✖ Hard to read
  26. 26. Make content appear and operate in predictable ways ✔ Consistent navigation ✔ Component consistency
  27. 27. Help users avoid and correct mistakes ✔ Remind users of the right data format
  28. 28. Principle 4: Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  29. 29. Parsing, e.g.: ● <p> Markup language needs to have start and end tags.</p> ● Unique IDs Programmatically set Name, Role, Value, etc, e.g: <div id="box"> This is a div box. <button aria-label=" Close" onclick="document.getElementById('box').style.display='none'; " class="close-button">X</button> </div> Maximize compatibility with current & future user tools
  30. 30. Useful Tools to Stay ADA-Compliant
  31. 31. Accessibility Developer Tools (Chrome Extension)
  32. 32. Use a checklist Try this interactive checklist:
  33. 33. Contrast Checker (Try it)
  34. 34. What Sites team uses - Ask Mira about the details! ● Sites team has Static AST checker for a11y rules on JSX elements as part of our eslint ● Accessibility audit tooling for the web (beta) eslint is hooked to git pre-commit so engineers get alerted before submitting commit
  35. 35. Useful resources: ● WCAG 2.0 Quick Reference ● Accessible Rich Internet Applications (WAI-ARIA) 1.0 ● Accessibility Developer Tools (Google Chrome Extension) ● Interactive checklist ● Color contrast checker ● Static AST checker for a11y rules on JSX elements ● Accessibility audit tooling for the web (beta)
  36. 36. Q&A