Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Accessible Content and Websites in WordPress

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.

Cynthia "Arty" Ng

August 18, 2018
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

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