Making Accessible Content and Websites in WordPress

Cynthia Ng
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.

Types of Disabilities

  • visual
  • auditory
  • physical/motor
  • touch
  • learning

Why Should You Care?

icon of 7 people, with one fill in Statistics Canada. (2017). Infographic: Canadian Survey on Disability Canadian Survey on Disability.

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.

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


  • organization
  • grants
  • sponsorship

Getting Buy-in

screenshot of Wildlife Conservation Society website homepage Source: Sutton, Marcy. (2015). Wildlife Conservation Society. Showcasing Accessible Websites


  • 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. and Rowland, C., Mariger, H., Siegel, P. M., & Whiting, J. (2010). Universal Design for the Digital Environment: Transforming the Institution. EDUCAUSE Review*, 45(6).

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.

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.

Content Guidelines

General Writing

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


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

Headings in WordPress


Click here
WordPress site



Alternative Text: alt=""

red panda griangrafanna. (2006). Red Panda Pensive. CC BY-NC 2.0
Inserting Images in WordPress
image information editor box in WordPress
alt text decision flow chart Alexander, Dey. (2014). Text alternatives for images: a decision tree.
bar graph example


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.

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

More on Audio/Video

  • Text Alternate not needed if already explained in text.
  • Have controls
  • Avoid flashing

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


Assessing Your Website




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.



nodoka holding a stack of books