Implementing WCAG by Making Your Website Accessible for Everyone

Presented at TRY 2013. Full write up: http://cynng.wordpress.com/2013/05/07/making-your-website-accessible-for-everyone/
--
The deadline in Ontario to make our websites accessible is next January. While we have a set of guidelines to follow, it’s not always clear how to best implement the Web Consortium Accessibility Guidelines (WCAG) in a practical manner. While guidelines are necessary to cover a minimum standard, web accessibility should come from good web design without ‘sacrificing’ features. To make a website accessible, you will also need material that your content creators understand. Come learn how to make a website more accessible for everyone.

This presentation will focus on HTML and CSS, but will touch on custom interfaces.

Transcript

1. Implementing WCAG:
   Improving Website Accessibility
   for All Your Users
   Cynthia Ng
   May 7, 2013
   1
   

   View Slide

2. What is Web Accessibility?
   Definition
   Cynthia Ng @TheRealArty
   2
   

   View Slide

3. Cynthia Ng @TheRealArty
   3
   http://thisisnixofficial.tumblr.com/post/3830398589
   

   View Slide

4. Source: http://www.broadenedhorizons.com/quadmousec1.htm
   Cynthia Ng @TheRealArty
   4
   

   View Slide

5. Why Should You Care?
   Legislation (AODA)
   Inclusive
   Improvements for Everyone
   Cynthia Ng @TheRealArty
   5
   

   View Slide

6. What is WCAG?
   Web Consortium Accessibility Guidelines 2.0
   by the Web Accessibility Initiative (WAI) group, W3C
   Cynthia Ng @TheRealArty
   6
   

   View Slide

7. AODA Deadline
   Accessibility for Ontarians with Disabilities Act (AODA)
   under Section 14, subsection 4
   • By January 1, 2014, new internet websites and web
   content on [public sector] sites must conform with
   WCAG 2.0 Level A.
   • By January 1, 2021, all internet websites and web
   content must conform with WCAG 2.0 Level AA,
   other than,
   o success criteria 1.2.4 Captions (Live), and
   o success criteria 1.2.5 Audio Descriptions (Pre-recorded).
   Cynthia Ng @TheRealArty
   7
   

   View Slide

8. Guiding Principles
   • Perceivable
   • Operable
   • Understandable
   • Robust
   WCAG 2.0 at a Glance
   Cynthia Ng @TheRealArty
   8
   

   View Slide

9. Understanding WCAG
   How to Meet WCAG 2.0
   Issues
   Cynthia Ng @TheRealArty
   9
   

   View Slide

10. Cynthia Ng @TheRealArty
    10
    http://www.flickr.com/photos/doug88888/4510508204/
    

    View Slide

11. Template
    Consistent navigation (3.2.3) & identification (3.2.4)
    Multiple Methods of Discovery (2.4.5)
    Meaningful Order (1.3.2, 2.4.3)
    Use CSS for presentation (1.3.1)
    Cynthia Ng @TheRealArty
    11
    

    View Slide

12. Device Accessibility
    Cynthia Ng @TheRealArty
    12
    

    View Slide

13. Screen Sizes
    http://commons.wikimedia.org/wiki/File:LCD_screen_sizes.svg
    Cynthia Ng @TheRealArty
    13
    

    View Slide

14. Cynthia Ng @TheRealArty
    14
    http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/ via @mreidsma
    

    View Slide

15. Responsive Design
    Cynthia Ng @TheRealArty
    15
    http://gvsu.edu/library/
    

    View Slide

16. http://www.biologycorner.com/resources/elephantanatomy.gif
    Cynthia Ng @TheRealArty
    16
    

    View Slide

17. Structure
    Valid Markup (4.1.1)
    Page Title (2.4.2)
    Language (3.1.1)
    Bypass Blocks (2.4.1)
    Cynthia Ng @TheRealArty
    17
    

    View Slide

18. 
    
    
    Your Page Title
    
    
    
    Skip to Main Menu
    site name
    tagline
    
    Skip to Content
    Global Nav Link
    Second Nav Link
    Yet Another Nav Link
    
    
    
    
    
    copyright and other info
    
    
    Cynthia Ng @TheRealArty
    18
    

    View Slide

19. ARIA
    Accessible Rich Internet Applications
    Cynthia Ng @TheRealArty
    19
    

    View Slide

20. Using ARIA in HTML
    http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html
    Cynthia Ng @TheRealArty
    20
    

    View Slide

21. 
    
    
    Your Page Title
    
    
    
    Skip to Main Menu
    site name
    tagline
    
    Skip to Content
    Global Nav Link
    Second Nav Link
    Yet Another Nav Link
    
    
    
    
    
    
    
    
    
    
    
    
    
    copyright and other info
    
    
    Cynthia Ng @TheRealArty
    21
    

    View Slide

22. Cynthia Ng @TheRealArty
    22
    http://www.flickr.com/photos/brendoncremer/8247367542/
    

    View Slide

23. Presentation
    Colour Contrast (1.4.3)
    Cynthia Ng @TheRealArty
    23
    

    View Slide

24. Contrast Checker
    Firefox Add-on
    Cynthia Ng @TheRealArty
    24
    

    View Slide

25. Cynthia Ng @TheRealArty
    25
    http://www.flickr.com/photos/46009763@N07/5535174602/
    

    View Slide

26. Content
    Cynthia Ng @TheRealArty
    26
    

    View Slide

27. Headers
    TRY Conference
    Presentations
    Making the Website Accessible
    Registration
    Cynthia Ng @TheRealArty
    27
    Page Title: TRY Conference
    Topic: Presentations
    Subtopic: Making the Website Accessible
    Topic: Registration
    

    View Slide

28. Text Content
    Links (2.4.4)
    Text in Another Language (3.1.2)
    Tables (1.3.1)
    Cynthia Ng @TheRealArty
    28
    

    View Slide

29. Cynthia Ng @TheRealArty
    29
    

    View Slide

30. Cynthia Ng @TheRealArty
    30
    

    View Slide

31. Forms
    Cynthia Ng @TheRealArty
    31
    

    View Slide

32. Cynthia Ng @TheRealArty
    32
    

    View Slide

33. Cynthia Ng @TheRealArty
    33
    

    View Slide

34. Cynthia Ng @TheRealArty
    34
    

    View Slide

35. 35 Cynthia Ng @TheRealArty
    http://www.flickr.com/photos/greentea/29663666/
    

    View Slide

36. Media
    Cynthia Ng @TheRealArty
    36
    

    View Slide

37. Images
    alt=“TRY logo”
    title=“Toronto Ryerson York library staff conference”
    Use Text for Text (1.4.5)
    Cynthia Ng @TheRealArty
    37
    

    View Slide

38. Cynthia Ng @TheRealArty
    38
    classicwfl.com
    

    View Slide

39. Audio/Video Etc.
    Autoplay Control (2.2.2)
    Audio – 3 second rule (1.4.2)
    Flash – 3 in 1 second rule (2.3.1)
    On a Timer (2.2.1)
    Cynthia Ng @TheRealArty
    39
    

    View Slide

40. Cynthia Ng @TheRealArty
    40
    

    View Slide

41. https://www.youtube.com/watch?v=nJRIqVRbGIM
    Cynthia Ng @TheRealArty
    41
    

    View Slide

42. https://www.youtube.com/watch?v=LHkL0A4xi-I
    Cynthia Ng @TheRealArty
    42
    

    View Slide

43. Accessible UI
    jQuery UI
    Dijit
    YUI Library
    Cynthia Ng @TheRealArty
    43
    

    View Slide

44. Takeaway
    Make Your Website Better for All Your Users
    Cynthia Ng @TheRealArty
    44
    

    View Slide

45. Cynthia Ng @TheRealArty
    45
    http://www.flickr.com/photos/blieusong/7234335792/
    

    View Slide

46. Assessing Web Accessibility
    WCAG Quick Reference
    HTML Codesniffer
    W3C Web Accessibility Tools list - WAVE & Fangs
    Cynthia Ng @TheRealArty
    46
    

    View Slide

47. Additional Resources
    The Paciello Group Blog
    The Accessibility Project
    Cynthia Ng @TheRealArty
    47
    

    View Slide

48. Questions?
    Cynthia Ng
    csng@ryerson.ca
    @TheRealArty
    about.me/cynthiang
    Cynthia Ng @TheRealArty
    48
    

    View Slide