Making Accessible Content and Websites in WordPress

Presented at the Cowichan Valley WordPress August 2018 Meetup

This presentation was all about web accessibility, thinking about the users affected, technology involved, creating accessible content in WordPress, and finally, choosing accessible themes and plugins.

Transcript

1. MAKING ACCESSIBLE
   MAKING ACCESSIBLE
   CONTENT AND WEBSITES
   CONTENT AND WEBSITES
   IN WORDPRESS
   IN WORDPRESS
   August 18, 2018
   Cynthia Ng
   @TheRealArty
   

   View Slide

2. WHAT IS WEB ACCESSIBILITY?
   WHAT IS WEB ACCESSIBILITY?
   

   View Slide

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

   View Slide

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

   View Slide

5. WHY SHOULD YOU CARE?
   WHY SHOULD YOU CARE?
   

   View Slide

6. Statistics Canada. (2017). Infographic: Canadian Survey on Disability Canadian Survey on Disability. https://www150.statcan.gc.ca/n1/pub/11-627-m/11-627-m2017008-
   eng.htm
   

   View Slide

7. DISABILITY > MINORITY*
   DISABILITY > MINORITY*
   * Based on 2016 Canada census Visible minority population from Census Pro le, 2016 Census
   

   View Slide

8. POLICY & LEGISLATION
   POLICY & LEGISLATION
   

   View Slide

9. 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

10. 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

11. GETTING BUY-IN
    GETTING BUY-IN
    

    View Slide

12. Source: Sutton, Marcy. (2015). .
    Wildlife Conservation Society Showcasing Accessible Websites
    

    View Slide

13. BENEFITS
    BENEFITS
    re ect institutional mission, leadership, and values
    serve all users
    make sound scal policy
    add value to the institution
    Sources: Maler, A. (2013). The Complete Beginner’s Guide to Universal Design. UX Booth. and
    Rowland, C., Mariger, H., Siegel, P. M., & Whiting, J. (2010). Universal Design for the Digital Environment: Transforming the Institution. EDUCAUSE Review*, 45(6).
    http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/
    http://www.educause.edu/ero/article/universal-design-digital-environment-transforming-institution
    

    View Slide

14. APPROACH TO ACCESSIBILITY
    APPROACH TO ACCESSIBILITY
    

    View Slide

15. Accessibility often gets pigeon-holed as
    simply making sure there are no barriers
    to access for screen readers or other
    assistive technology, without regard to
    usability.
    - Whitney Quesenbery @whitneyq
    Quesenbery, W. (2009). Usable Accessibility: Making Web Sites Work Well for People with Disabilities. UX Matters. http://www.uxmatters.com/mt/archives/2009/02/usable-
    accessibility-making-web-sites-work-well-for-people-with-disabilities.php
    

    View Slide

16. DESIGNING FOR ASSISTIVE TECHNOLOGY
    DESIGNING FOR ASSISTIVE TECHNOLOGY
    

    View Slide

17. ASSISTIVE TECHNOLOGY
    ASSISTIVE TECHNOLOGY
    screen readers
    text-to-speech
    screen magni ers
    joysticks
    mobile devices
    keyboards
    

    View Slide

18. All Technology is Assistive Technology.
    - Sara Hendren @ablerism
    Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability. https://medium.com/thoughtful-design/a8b9a581eb62
    

    View Slide

19. CONTENT GUIDELINES
    CONTENT GUIDELINES
    

    View Slide

20. GENERAL WRITING
    GENERAL WRITING
    use consistent language
    write out acronyms the rst time you use them
    be clear and concise
    

    View Slide

21. HEADINGS
    HEADINGS
    Header 1 (Title): Making Content Accessible
    Header 2 (Topic): Creating Documents
    Header 3 (Subtopic): Using Headers
    Header 2 (Topic): Creating Media
    

    View Slide

22. HEADINGS IN WORDPRESS
    HEADINGS IN WORDPRESS
    

    View Slide

23. LINKS
    LINKS
    vs.
    Click here
    WordPress site
    

    View Slide

24. MEDIA
    MEDIA
    

    View Slide

25. IMAGES
    IMAGES
    Alternative Text: alt=""
    

    View Slide

26. griangrafanna. (2006). Red Panda Pensive. https://www. ickr.com/photos/rh_photographic_art/12831639683/CC BY-NC 2.0
    

    View Slide

27. INSERTING IMAGES IN WORDPRESS
    INSERTING IMAGES IN WORDPRESS
    

    View Slide

28. Alexander, Dey. (2014). .
    Text alternatives for images: a decision tree
    

    View Slide

29. View Slide

30. AUDIO
    AUDIO
    Woman: You should give an example.
    Man: Very well. (clears throat) This is the best example I can think
    of.
    

    View Slide

31. VIDEO WITH CAPTIONS EXAMPLE
    VIDEO WITH CAPTIONS EXAMPLE
    LabofOrnithology. (2012). Birds-of-Paradise Project Introduction. https://www.youtube.com/watch?v=YTR21os8gTA
    

    View Slide

32. DESCRIPTIVE VIDEO EXAMPLE
    DESCRIPTIVE VIDEO EXAMPLE
    Suddenly, a hooded gure springs out and zaps R2 with a gun. R2
    stops dead in his tracks, his metal body crawling with electrical
    current. His lights go out and he keels forward.
    Electrox3d. (2011). Star Wars for Blind People (Blu-ray audio track): description of a Jawa shooting R2!. http://www.youtube.com/watch?v=PCZqKxQME6o
    

    View Slide

33. MORE ON AUDIO/VIDEO
    MORE ON AUDIO/VIDEO
    Text Alternate not needed if already explained in text.
    No autoplay
    Have controls
    Avoid ashing
    

    View Slide

34. MEDIA SUMMARIZED
    MEDIA SUMMARIZED
    Images: alt text
    Audio: transcript
    Video: transcript, captions, descriptive audio
    

    View Slide

35. ACCESSIBILITY STATEMENT
    ACCESSIBILITY STATEMENT
    WCAG Conformance Claims
    Accessibility Statement Generator
    

    View Slide

36. WORDPRESS SITES
    WORDPRESS SITES
    

    View Slide

37. CHOOSING AN ACCESSIBLE THEME
    CHOOSING AN ACCESSIBLE THEME
    By WordPress.org
    Accessibility Ready Tag
    

    View Slide

38. PLUGINS
    PLUGINS
    WP Accessibility
    Make WordPress Accessible: Useful Plugins
    

    View Slide

39. ASSESSING YOUR WEBSITE
    ASSESSING YOUR WEBSITE
    SIMULATION
    SIMULATION
    Colorblind Web Page Filter
    Fangs
    EVALUATION
    EVALUATION
    (bookmarklet)
    (Firefox plugin)
    W3C validator
    HTML Codesniffer
    WCAG Contrast Checker
    WAVE Toolbar
    FRAMEWORKS
    FRAMEWORKS
    aXe accessibility
    Tenon.io
    

    View Slide

40. ASSESSING PLUGINS
    ASSESSING PLUGINS
    

    View Slide

41. HTML CODESNIFFER EXAMPLE
    HTML CODESNIFFER EXAMPLE
    

    View Slide

42. ACCESSIBILITY STATEMENT
    ACCESSIBILITY STATEMENT
    WCAG Conformance Claims
    Accessibility Statement Generator
    

    View Slide

43. TAKE AWAY
    TAKE AWAY
    

    View Slide

44. The power of the Web is in its
    universality. Access by everyone
    regardless of disability is an essential
    aspect.
    - Tim Berners-Lee @timbernerslee
    World Wide Web Consortium. (1997). World Wide Web Consortium Launches International Program Of ce for Web Accessibility Initiative. http://www.w3.org/Press/IPO-
    announce
    

    View Slide

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

    View Slide