Making Accessible Content and Websites in WordPress

Cynthia Ng
@TheRealArty
August 18, 2018

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

visual
auditory
physical/motor
touch
learning

visual: other than blindness, this might also refer to people who have difficulty with judging distances and hand-eye coordination
auditory: other than deafness, this might also refer to other hearing issues, such as having difficulty focusing on a single voice
physical/motor: examples include not being able to grip something or problems with precise movements
touch: namely this refers to a lack of sensation with touch
learning: is a rather large umbrella term, but includes dyslexia and other reading disabilities, as well as dysphasia and related issues with writing

With all the different types of devices used to access websites, any one or a combination of these disabilities may apply to a user trying to access a website.

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*

* Based on 2016 Canada census Visible minority population from Census Profile, 2016 Census

Policy & Legislation

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

Accessibility for Ontarians with Disabilities Act (AODA) (2005)
Canadian Human Rights Act (1977)
Standard on Web Accessibility (2011) for Government of Canada

Policy

organization
grants
sponsorship

AODA requires Web Content Accessibility Guidelines (WCAG) 2.0 Level AA with a couple of exceptions by 2021 for all public institutions and large private and non-profit organizations. Canadian Human Rights Act which ensures equal opportunity but applies only to organizations with federally regulated activities. All other organizations fall under provincial or territorial law. Though due to a court case, the Standard on Web Accessibility came into effect for all department and agencies in the Government of Canada in 2011, which also outlines the requirement to meet WCAG 2.0 Level AA with a couple of exceptions.

Beyond legislation itself, there may be policies at particular organizations, and as requirements of grants or sponsorships for specific projects, also often requiring WCAG.

Unfortunately, I don't have time to go into WCAG today, but I do have some blog posts about it and if you need your site to be web accessible, WCAG 2.0 or even the new 2.1 would be the guidelines to meet.

Getting Buy-in

screenshot of Wildlife Conservation Society website homepage

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

Benefits

reflect institutional mission, leadership, and values
serve all users
make sound fiscal policy
add value to the institution

Sources: Maler, A. (2013). The Complete Beginner’s Guide to Universal Design. UX Booth. http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/ 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.educause.edu/ero/article/universal-design-digital-environment-transforming-institution

In any case, there are numerous reasons you can present as benefits for putting into practice the methodologies presented, including that they:

reflect institutional mission, leadership, and values,
serve all users, - not just those with disabilities, and I’ll talk more about this
make sound fiscal policy, - since it improves efficiency and reduces costs while maintaining quality, avoids retrofitting, avoids inequitable solutions, avoids litigation; frequently fulfills grant/contract requirements - and
add value to the institution. - because you have better content, it benefits more people (e.g. captions help people with varying language skills), easier to maintain and update, and higher compatibility with various software and hardware.

Of course, knowing why doesn’t tell you how to approach 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

Assistive Technology

screen readers
text-to-speech
screen magnifiers
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

General Writing

use consistent language
write out acronyms the first time you use them
be clear and concise

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

Links

Click here
vs.
WordPress site

Media

Images

Alternative Text: alt=""

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

Inserting Images in WordPress

image information editor box in WordPress

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

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

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

Descriptive Video Example

Suddenly, a hooded figure 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

Image Carousel or Slider

Screenshot from Should I Use a Carousel

Media Summarized

Images: alt text
Audio: transcript
Video: transcript, captions, descriptive audio
No Autoplay

WordPress Sites

Choosing an Accessible Theme

Plugins

Assessing Your Website

Simulation

Evaluation

Frameworks

Assessing Plugins

HTML CodeSniffer Example

Accessibility Statement

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 Office for Web Accessibility Initiative. http://www.w3.org/Press/IPO-announce

Thanks!

Cynthia Ng
@TheRealArty
about.me/cynthiang