Doing Your Part Coding Accessible WordPress Websites

WordPress and Accessibility Icons

Mark Root-Wiley is…

MRW Web Design Logo

…not an Accessibility Expert.

Mark Root-Wiley headshot

Here we go!

  1. What accessibility is & why it's important
  2. Real tips & tricks
  3. WordPress-specific accessibility

All with lots of links for future reference.

Slides at

What is Accessibility?

Web accessibility is a subset of [user experience] focused on making your websites usable by the widest range of people possible, including those who have disabilities.
"MYTH: Accessibility is 'blind people',"

See also: "Reframing Accessibility for the Web"

"Gretel": Keyboard Navigator

Gretel writes code for a living and navigates with a keyboard because of RSI.

A coder with laptop
Image c/o railsgirlsssa on Flickr. CC BY-NC-SA 2.0

"Hansel": Screen Reader User

Hansel is a writer and has a visual impairment so listens to computers with a "screen reader" software.

Person typing and using Skype
Image c/o inveneo on Flickr. CC BY-NC-SA 2.0

"Jack," "Sawyer," & "Kate"

Red-green color blind. Uses voice commands. Can't find glasses.

Three people with computers on couch
Image c/o mpa on Flickr. CC BY 2.0

They're all lost without web accessibility!

And so is everyone else…

Lego person with map
Image c/o clement127 on Flickr. CC BY-NC-ND 2.0

"Universal Design"

We all benefit from accessible spaces and interfaces.

A good website IS an accessible website.

Why It Matters: WebAIM's Hiearchy of Motivating Accessibility

Hiearchy Pyramid

From least to most effective: Guilt, Punish, Require, Reward, Enlighten, Inspire!

Adapted from: "WebAIM's Hierarchy for Motivating Accessibility Change"

Benefits of Accessibility

Hiearchy Pyramid

Do Your Part!

  1. Designers: Contrast, font size, :focus states
  2. Developers!
  3. Editors: Descriptive link text, alternative attributes, video/audio transcripts
Four-person relay team
Image c/o najeebkhan2009 on Flickr. CC BY-NC-SA 2.0

Accessibility First!

Both thinking and coding. Just like "mobile first."

Fewer mistakes. Better foundation.

Single lego on foundation pad
Image c/o cefeida on Flickr. CC BY 2.0

Accessibility for Developers

Common issues and techniques:

Code Examples

artsy abstract code snippet

Screen Reader in Action!

Video: "Web Accessibility 101: Web Headings for Screen Readers" available with subtitles/captions on YouTube.

Screen Reader Text

Required for all new themes!

Bad Code

.screen-reader-text {
	display: none;
.screen-reader-text {
	visibility: hidden;

Good Code

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;

Twitter Icon


Bad Code

<a href="dashicons dashicons-twitter" href=""></a>

Good Code

<a class="dashicons-before dashicons-twitter" href="">
	<span class="screen-reader-text">@MRWweb on Twitter</span>

"Read More" Links


Video: "The accessibility impact of having duplicate "more" links" available with subtitles/captions on YouTube.

Bad Code

<a href="#">Read more&hellip;</a>

Good Code

<a href="#">Read more<span class="screen-reader-text"> of "{Put Article Title Here}"</span>&hellip;</a>

"Read More" Links in WordPress

Straight outta the Theme Handbook!

			__( 'Continue reading%s', 'textdomain' ), 
			'<span class="screen-reader-text">  ' . get_the_title() . '</span>' 
	); ?>

Search Form Result

Bad Code

<form role="search" method="get" id="searchform" class="searchform">
	<input type="text" value="" name="s" id="s" />
	<button type="submit" id="searchsubmit">Search</button>

Good Code

<form role="search" method="get" id="searchform" class="searchform">
	<label class="screen-reader-text" for="s">Search for:</label>
	<input type="text" value="" name="s" id="s" />
	<button type="submit" id="searchsubmit">Search</button>

Skip to Content Link

Let keyboard navigators skip TABing through menus.

Video: "Skip to Main Content Link for Keyboard Users" available with subtitles/captions on YouTube.

	<a href="#primary" class="screen-reader-text assistive-text">Skip to Main Content</a>

	<!-- Stuff like menus and banners -->

	<main id="primary" tabindex="-1">...</main>
Assistive Text :focus CSS

.assistive-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	z-index: 100000;
	/* make it pretty too! */

Facilitate Accessibility Example: User-set alt attribute

The Wrong Way

<?php printf( '<img src="%1$s">',
	esc_url( wp_get_attachment_image_src( $id ) )
); ?>

<img src="#">

The Right Way

<?php echo wp_get_attachment_image( $id ); ?>

<img src="#" alt="{User-set alt attribute!}">

WordPress + Accessibility = #WPa11y

WordPress and Accessibility Icons

#WPa11y Community

#WPa11y Guidelines & Code

Accessibility Plugins

More Accessibility Resources

Wall of books
Image c/o oneterry on Flickr. CC BY-NC 2.0

General Accessibility Resources

Accessibility Blogs

There are many, these are just some of my favorites.

Testing for Accessibility

A Few More Parting Tips…

Do Your Part!

  1. Code: Make your websites accessible.
  2. Englighten: Make the web accessible.
  3. Inspire: "Democratize" web publishing!
Abstract sea of people
Image c/o pagedooley on Flickr. CC BY 2.0

In Other Words…

WordPress + Accessibility = Happy Internet

(Yes, all those icons have text alternatives!)

Thank You!