際際滷

際際滷Share a Scribd company logo

ADA Compliance

Yingying Zhang
Yingying Zhang

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

1 of 36
Download to read offline
ADA Compliance Yingying | 06/02/2017
ADA = American with Disabilities Act
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 Alzheimers, senility, etc Intellectual disabilities Depressed or anxious Trouble concentrating
Time.com through different visions Normal Red-Green Color Blindness Monochromacy
Browse a website using screen readers 0:55-2:30 Look for a chocolate cookie recipe
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: ADA.gov, 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.
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
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: 際際滷s on Digital Accessibility
Why is it important for us?
ADA standards?
WCAG 2.0 AA WCAG = Web Content Accessibility Guidelines Developed by World Wide Web Consortiums (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: https://www.w3.org/TR/WCAG20/
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. Wont impact the look and feel Wont impact the look and feel Significant impact on look and feel
WCAG 2.0 - 4 Principles Examples next are mostly based on Level AA rules. More details on requirements & techniques: https://www.w3.org/WAI/WCAG20/quickref/
Principle 1: Perceivable Information and user interface components must be presentable to users in ways they can perceive.
Provide text alternatives for non-text content Alternative for images, CAPTCHA
Provide captions and alternatives for multimedia Video caption Video caption - live Video transcript Caption, transcript for multimedia
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
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
Principle 2: Operable User interface components and navigation must be operable.
Make all functionality available from a keyboard Let users Tab & Enter to browse the website
Give users enough time to read and use content User can control timing User cant control timing
Do not use content that causes seizures Too flashy!
Help users navigate and find content Easy to navigate Hard to navigate
Principle 3: Understandable Information and the operation of user interface must be understandable.
Make text readable and understandable Hard to read
Make content appear and operate in predictable ways Consistent navigation Component consistency
Help users avoid and correct mistakes Remind users of the right data format
Principle 4: Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
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
Useful Tools to Stay ADA-Compliant
Accessibility Developer Tools (Chrome Extension)
Use a checklist Try this interactive checklist: http://a11yproject.com/checklist.html
Contrast Checker (Try it)
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
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)
Q&A

More Related Content

ADA Compliance

  • 2. ADA = American with Disabilities Act
  • 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 Alzheimers, senility, etc Intellectual disabilities Depressed or anxious Trouble concentrating
  • 4. Time.com through different visions Normal Red-Green Color Blindness Monochromacy
  • 5. Browse a website using screen readers 0:55-2:30 Look for a chocolate cookie recipe
  • 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: ADA.gov, 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. 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. 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: 際際滷s on Digital Accessibility
  • 9. Why is it important for us?
  • 11. WCAG 2.0 AA WCAG = Web Content Accessibility Guidelines Developed by World Wide Web Consortiums (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: https://www.w3.org/TR/WCAG20/
  • 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. Wont impact the look and feel Wont impact the look and feel Significant impact on look and feel
  • 13. WCAG 2.0 - 4 Principles Examples next are mostly based on Level AA rules. More details on requirements & techniques: https://www.w3.org/WAI/WCAG20/quickref/
  • 14. Principle 1: Perceivable Information and user interface components must be presentable to users in ways they can perceive.
  • 15. Provide text alternatives for non-text content Alternative for images, CAPTCHA
  • 16. Provide captions and alternatives for multimedia Video caption Video caption - live Video transcript Caption, transcript for multimedia
  • 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. 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. Principle 2: Operable User interface components and navigation must be operable.
  • 20. Make all functionality available from a keyboard Let users Tab & Enter to browse the website
  • 21. Give users enough time to read and use content User can control timing User cant control timing
  • 22. Do not use content that causes seizures Too flashy!
  • 23. Help users navigate and find content Easy to navigate Hard to navigate
  • 24. Principle 3: Understandable Information and the operation of user interface must be understandable.
  • 25. Make text readable and understandable Hard to read
  • 26. Make content appear and operate in predictable ways Consistent navigation Component consistency
  • 27. Help users avoid and correct mistakes Remind users of the right data format
  • 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. 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. Useful Tools to Stay ADA-Compliant
  • 31. Accessibility Developer Tools (Chrome Extension)
  • 32. Use a checklist Try this interactive checklist: http://a11yproject.com/checklist.html
  • 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. 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. Q&A