Making your Website WCAG Compliant

WCAG stands for Web Content Accessibility Guidelines, these guidelines will make content more accessible to a wider range of people with disabilities. These are platform independent and address the accessibility of web content on desktops, laptops, tablets, and mobile devices.

Accessibility addresses all the issues including auditory, cognitive, neurological, physical, speech and visual. When it comes to mobile, more issues like small screen sizes, hijacked scrolling, cognitive load, ambiguous icons, conflicting gestures, different input modes, usability etc need to be addressed.

While designing for web, identifying the accessibility problems in the early stages of development using the right tools and techniques make it easier to address them. However, these tools are necessary but not sufficient and a knowledgeable human evaluation is required to determine if the site is accessible.

In this presentation, Aayush has highlighted the entry barriers to accessibility, helping you with tools and human evaluation required to analyze accessibility issues for your websites and the techniques to resolve those issues.

Transcript

1. Making Your Website WCAG 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.
5. Web Content Accessibility Guidelines (WCAG) provides a single shared standard for web content accessibility that meets the needs of everyone.
6. Why?
7. Meet Kyle Woodruff • Kyle is having vision disability. • Kyle stays away from Online Classes 90% sites have problems accessing content Link
8. 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
9. 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
10. 217 Million People are Disabled. 37 Million People are Blind.
11. Three Reasons for WCAG Empathy Business Legislation
12. How we think of browsing Web
13. How People Browse the Web?
14. Type of Disabilities Hyperactivity Disorder Blindness or Low Vision Hard of Hearing Disability or Deaf Speech and Language Disabilities Brain Injuries Physical Disability
15. User Agent Websites Input
16. User Agent Websites Input
17. User Agent Websites Input
18. How WCAG solves this problem?
19. WCAG PRINCIPLES Perceivable Operable Understandable Robust
20. WCAG PRINCIPLES Perceivable – Success Criteria Operable – Success Criteria Understandable - Success Criteria Robust - Success Criteria
21. Compliance Levels A AA AAA
22. Perceivable
23. Information and UI components must be presented in ways users can perceive without losing information and structure. W3C
24. Who is generating the content? Alt Text User? Set alt text = ‘’ You? Set alt text = description
25. Prerecorded Audio Only • Creating Text Transcripts • Commercial Services • Scribie • Casting Words • Rev • Automated Services • Youtube • Free Softwares • otranscribe
26. Prerecorded Video Only
27. Maintaining Color Contrast Ratio
28. Orientation Content does not restrict its view and operation to a single display orientation.
29. Resize Text- Say No to Pixels
30. Operable
31. Interface Elements in the content must be Operable -W3C
32. Screen Readers
33. The Common Mistake
34. https://codepen.io/joshsorosky/pen/gaaBoB
35. Correction
37. Skip Navigation Functionality
39. div != button https://www.w3.org/TR/WCAG21/#keyboard-accessible
40. Low Vision Impairment
42. Care about seizures. Web pages do not contain anything that flashes more than 3 times in 1 second
43. Proper Inputs
44. Sometimes it’s better to write repetitive code J
45. Focus Visible
46. Allow Time- Independent Interaction Turn Off Adjust Extend
47. Session Timeout … Please try again L
48. Providing Control to Users
49. Congratulations !! You have won the lottery of 40000$, Click here for more information. Time Left: 30s Thanks for applying, your winning code is xyuty78
50. Understandable
51. Making Web Pages Readable
52. Input Assistance
53. Make Webpages Predictable •Don’t change the context •On focus •On Input •Consistent Navigation
54. Robust
55. Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.
56. •Markup should pass the HTML5 validator checks •Id’s should be unique on the page.
57. TOOLS For Accessibility Testing
58. Accessibility Chrome Extension
59. Accessibility Testing
60. Using Tenon.io https://tenon.io/
61. https://tenon.io/
62. Color Combination colorsafe.co
63. tota11y
64. http://khan.github.io/tota11y/
65. Chrome Audit
67. What we Learned: Wrap-up • WCAG 2.0 Overview • Four Principles – Perceivable, Operable, Understandable and Robust • Tools for Testing Accessibility
68. 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
69. 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. Run Run the Chrome Audit on your existing website
70. Questions ? Medium: https://medium.com/@angularboy Twitter: https://twitter.com/angularboy LinkedIn: https://www.linkedin.com/in/angularboy/
71. Thank you @angularboy