Evaluating Your Website for Accessibility Compliance and WCAG 2.1

Websites need to be accessible so that anyone can use them including users who use assistive technology and even common technologies simply in ways we may not predict. Join us to learn about Web Content Accessibility Guidelines (WCAG) including what's new in version 2.1 and how to get an accessibility audit done using free resources and tools to evaluate your website.
--
Presented as a Webinar for the Education Institution: https://www.thepartnership.ca/web/PARTNERSHIP/Education_Institute/Event_Detail.aspx?EventKey=EIW181004

Transcript

1. EVALUATING YOUR WEBSITE
   EVALUATING YOUR WEBSITE
   FOR ACCESSIBILITY
   FOR ACCESSIBILITY
   COMPLIANCE AND WCAG 2.1
   COMPLIANCE AND WCAG 2.1
   October 4, 2018
   Cynthia Ng
   @TheRealArty
   

   View Slide

2. BRIEF OVERVIEW
   BRIEF OVERVIEW
   Web Accessibility
   Types of Disabilities
   Assistive Technology
   Policy & Legislation
   WCAG 2.x
   Auditing Your Website
   Accessibility Statement
   Take Away
   

   View Slide

3. WHAT IS WEB ACCESSIBILITY?
   WHAT IS WEB ACCESSIBILITY?
   

   View Slide

4. W3C Web Accessibility Initiative. (2005). What is Web Accessibility. Introduction to Web Accessibility.
   Web accessibility means that people
   with disabilities can use the Web.
   - W3C Web Accessibility Initiative (WAI)
   http://www.w3.org/WAI/intro/accessibility.php
   

   View Slide

5. TYPES OF DISABILITIES
   TYPES OF DISABILITIES
   visual
   auditory
   physical/motor
   touch
   learning
   

   View Slide

6. ASSISTIVE TECHNOLOGY
   ASSISTIVE TECHNOLOGY
   screen readers
   text-to-speech, speech-to-text
   mouse alternatives (e.g. joysticks)
   screen magni ers
   keyboard only
   touch screen
   and more
   

   View Slide

7. POLICY & LEGISLATION
   POLICY & LEGISLATION
   

   View Slide

8. ACCESSIBLE CANADA ACT, C-81
   ACCESSIBLE CANADA ACT, C-81
   First Reading: June 20, 2018
   Parliament of Canada. (2018). C-81: An Act to ensure a barrier-free Canada House Government Bill.https://www.parl.ca/LegisInfo/BillDetails.aspx?
   billId=9990870&Language=E
   

   View Slide

9. LEGISLATION IN CANADA
   LEGISLATION IN CANADA
   Accessibility for Ontarians with Disabilities Act (AODA)
   (2005)
   Canadian Human Rights Act (1977)
   Standard on Web Accessibility (2011) for Government of
   Canada
   POLICY
   POLICY
   organization
   grants
   sponsorship
   

   View Slide

10. WEB CONTENT ACCESSIBILITY GUIDELINES
    WEB CONTENT ACCESSIBILITY GUIDELINES
    (WCAG)
    (WCAG)
    BY WORLD WIDE WEB CONSORTIUM (W3C)
    BY WORLD WIDE WEB CONSORTIUM (W3C)
    2.0 (Dec 2008)
    2.1 (Jun 2018)
    

    View Slide

11. SECTIONS OF WCAG
    SECTIONS OF WCAG
    1. Perceivable
    2. Operable
    3. Understandable
    4. Robust
    5. Conformance
    

    View Slide

12. SOME NOTES ON WCAG
    SOME NOTES ON WCAG
    Level: A, AA, AAA
    Level AA recommended
    makes life easier
    Elements and Guidelines Overlap
    WCAG Quick Ref
    

    View Slide

13. UNDERSTANDING WEB ACCESSIBILITY & WCAG
    UNDERSTANDING WEB ACCESSIBILITY & WCAG
    (WeaveUX, Issue 7, October 2017)
    (Code4Lib Journal, Issue 37, July 2017)
    A Practical Guide to Improving Web Accessibility
    A Practical Starter Guide on Developing Accessible
    Websites
    WCAG Blog Post Series
    Accessibility Tag Blog Posts
    

    View Slide

14. AUDITING AND EVALUATING YOUR WEBSITE
    AUDITING AND EVALUATING YOUR WEBSITE
    SIMULATION
    SIMULATION
    

    View Slide

15. COLORBLIND WEB PAGE FILTER
    COLORBLIND WEB PAGE FILTER
    

    View Slide

16. (FIREFOX ADD-ON)
    (FIREFOX ADD-ON)
    FANGS
    FANGS
    

    View Slide

17. EVALUATION
    EVALUATION
    

    View Slide

18. W3C VALIDATOR
    W3C VALIDATOR
    

    View Slide

19. (BOOKMARKLET)
    (BOOKMARKLET)
    HTML CODESNIFFER
    HTML CODESNIFFER
    

    View Slide

20. (FIREFOX ADD-ON)
    (FIREFOX ADD-ON)
    WCAG CONTRAST CHECKER
    WCAG CONTRAST CHECKER
    

    View Slide

21. WAVE TOOLBAR
    WAVE TOOLBAR
    

    View Slide

22. MANUAL TESTS WITH DEVICES
    MANUAL TESTS WITH DEVICES
    MOUSE
    MOUSE
    TOUCH SCREEN
    TOUCH SCREEN
    KEYBOARD
    KEYBOARD
    

    View Slide

23. AUTOMATED TESTING FRAMEWORKS
    AUTOMATED TESTING FRAMEWORKS
    aXe core
    A11y Machine
    

    View Slide

24. DEMO: HTML CODESNIFFER
    DEMO: HTML CODESNIFFER
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. DEMO: WAVE TOOLBAR
    DEMO: WAVE TOOLBAR
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. DEMO: KEYBOARD ACCESSIBILITY
    DEMO: KEYBOARD ACCESSIBILITY
    

    View Slide

34. View Slide

35. WHAT'S NEW IN WCAG 2.1
    WHAT'S NEW IN WCAG 2.1
    

    View Slide

36. NON-TEXT CONTRAST 1.4.11
    NON-TEXT CONTRAST 1.4.11
    

    View Slide

37. RESPONSIVE DESIGN
    RESPONSIVE DESIGN
    Orientation 1.3.4, Re ow 1.4.10, Text Spacing 1.4.12
    

    View Slide

38. FORM FIELDS EXTENDED
    FORM FIELDS EXTENDED
    Identify Input Purpose 1.3.5: Use autocomplete for auto ll
    Label in Name 2.5.3: Visible labels = Accessible names
    Status Messages 4.1.3: Use appropriate role without
    changing focus
    

    View Slide

39. USER INPUT EXTENDED
    USER INPUT EXTENDED
    Character Key Shortcuts 2.1.4: Only on focus, can disable,
    or remap
    Motion Actuation 2.5.4: Can disable, provide equivalent
    non-motion interaction
    Pointer Gestures 2.5.1: Single pointer alternative to
    complex gestures
    Pointer Cancellation 2.5.2: Use default up-event behaviour,
    and allow abort/undo
    Content on Hover or Focus 1.4.13: Make persistent,
    hoverable, and dismissable
    

    View Slide

40. ASK YOUR USERS
    ASK YOUR USERS
    

    View Slide

41. ACCESSIBILITY STATEMENT
    ACCESSIBILITY STATEMENT
    Partial Conformance Claim with 3rd Party Content
    WCAG Conformance Claims
    

    View Slide

42. TAKE AWAY
    TAKE AWAY
    

    View Slide

43. Make it easy to contact you.
    

    View Slide

44. THANKS!
    THANKS!
    CONTACT
    CONTACT
    Cynthia Ng
    @TheRealArty
    about.me/cynthiang
    

    View Slide