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

WHAT IS WEB ACCESSIBILITY? WHAT IS WEB ACCESSIBILITY?

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

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

WHY SHOULD YOU CARE? WHY SHOULD YOU CARE?

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

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

POLICY & LEGISLATION POLICY & LEGISLATION

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

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

GETTING BUY-IN GETTING BUY-IN

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

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

APPROACH TO ACCESSIBILITY APPROACH TO ACCESSIBILITY

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

DESIGNING FOR ASSISTIVE TECHNOLOGY DESIGNING FOR ASSISTIVE TECHNOLOGY

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

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

CONTENT GUIDELINES CONTENT GUIDELINES

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

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

HEADINGS IN WORDPRESS HEADINGS IN WORDPRESS

LINKS LINKS vs. Click here WordPress site

MEDIA MEDIA

IMAGES IMAGES Alternative Text: alt=""

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

INSERTING IMAGES IN WORDPRESS INSERTING IMAGES IN WORDPRESS

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

No content

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

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

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

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

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

ACCESSIBILITY STATEMENT ACCESSIBILITY STATEMENT WCAG Conformance Claims Accessibility Statement Generator

WORDPRESS SITES WORDPRESS SITES

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

PLUGINS PLUGINS WP Accessibility Make WordPress Accessible: Useful Plugins

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

ASSESSING PLUGINS ASSESSING PLUGINS

HTML CODESNIFFER EXAMPLE HTML CODESNIFFER EXAMPLE

ACCESSIBILITY STATEMENT ACCESSIBILITY STATEMENT WCAG Conformance Claims Accessibility Statement Generator

TAKE AWAY TAKE AWAY

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

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