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. ADA Compliance
Yingying | 06/02/2017

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
Alzheimer’s,
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: Slides on Digital Accessibility

9. Why is it important for us?

10. ADA standards?

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: 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.
Won’t impact the look and feel Won’t 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 can’t 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

33. Contrast Checker (Try it)

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