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
2. WHAT IS WEB ACCESSIBILITY? WHAT IS WEB ACCESSIBILITY?
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
4. TYPES OF DISABILITIES TYPES OF DISABILITIES visual auditory physical/motor touch learning
5. WHY SHOULD YOU CARE? WHY SHOULD YOU CARE?
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
7. DISABILITY > MINORITY* DISABILITY > MINORITY* * Based on 2016 Canada census Visible minority population from Census Pro le, 2016 Census
8. POLICY & LEGISLATION POLICY & LEGISLATION
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
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
11. GETTING BUY-IN GETTING BUY-IN
12. Source: Sutton, Marcy. (2015). . Wildlife Conservation Society Showcasing Accessible Websites
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
14. APPROACH TO ACCESSIBILITY APPROACH TO ACCESSIBILITY
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
16. DESIGNING FOR ASSISTIVE TECHNOLOGY DESIGNING FOR ASSISTIVE TECHNOLOGY
17. ASSISTIVE TECHNOLOGY ASSISTIVE TECHNOLOGY screen readers text-to-speech screen magni ers joysticks mobile devices keyboards
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
19. CONTENT GUIDELINES CONTENT GUIDELINES
20. GENERAL WRITING GENERAL WRITING use consistent language write out acronyms the rst time you use them be clear and concise
21. HEADINGS HEADINGS Header 1 (Title): Making Content Accessible Header 2 (Topic): Creating Documents Header 3 (Subtopic): Using Headers Header 2 (Topic): Creating Media
22. HEADINGS IN WORDPRESS HEADINGS IN WORDPRESS
23. LINKS LINKS vs. Click here WordPress site
24. MEDIA MEDIA
25. IMAGES IMAGES Alternative Text: alt=""
26. griangrafanna. (2006). Red Panda Pensive. https://www. ickr.com/photos/rh_photographic_art/12831639683/CC BY-NC 2.0
27. INSERTING IMAGES IN WORDPRESS INSERTING IMAGES IN WORDPRESS
28. Alexander, Dey. (2014). . Text alternatives for images: a decision tree
30. AUDIO AUDIO Woman: You should give an example. Man: Very well. (clears throat) This is the best example I can think of.
31. VIDEO WITH CAPTIONS EXAMPLE VIDEO WITH CAPTIONS EXAMPLE LabofOrnithology. (2012). Birds-of-Paradise Project Introduction. https://www.youtube.com/watch?v=YTR21os8gTA
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
33. MORE ON AUDIO/VIDEO MORE ON AUDIO/VIDEO Text Alternate not needed if already explained in text. No autoplay Have controls Avoid ashing
34. MEDIA SUMMARIZED MEDIA SUMMARIZED Images: alt text Audio: transcript Video: transcript, captions, descriptive audio
35. ACCESSIBILITY STATEMENT ACCESSIBILITY STATEMENT WCAG Conformance Claims Accessibility Statement Generator
36. WORDPRESS SITES WORDPRESS SITES
37. CHOOSING AN ACCESSIBLE THEME CHOOSING AN ACCESSIBLE THEME By WordPress.org Accessibility Ready Tag
38. PLUGINS PLUGINS WP Accessibility Make WordPress Accessible: Useful Plugins
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
40. ASSESSING PLUGINS ASSESSING PLUGINS
41. HTML CODESNIFFER EXAMPLE HTML CODESNIFFER EXAMPLE
42. ACCESSIBILITY STATEMENT ACCESSIBILITY STATEMENT WCAG Conformance Claims Accessibility Statement Generator
43. TAKE AWAY TAKE AWAY
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
45. THANKS! THANKS! CONTACT CONTACT Cynthia Ng @TheRealArty about.me/cynthiang