Making your Website WCAG Compliant

Bfa63362ca0c223cda7769eda335f878?s=47 @angularboy
October 18, 2018

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.

Bfa63362ca0c223cda7769eda335f878?s=128

@angularboy

October 18, 2018
Tweet

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

  36. None
  37. Skip Navigation Functionality

  38. None
  39. div != button https://www.w3.org/TR/WCAG21/#keyboard-accessible

  40. Low Vision Impairment

  41. None
  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

  66. None
  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