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

Transcript

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 Web.
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
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.
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
43. Skip Navigation Functionality
45. div != button https://www.w3.org/TR/WCAG21/#keyboard-accessible
46. Low Vision Impairment
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
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