Lessons from Building an Accessible WordPress Theme

This post is a summary of a talk I gave at WordCamp Lancaster in March, 2014.

A phone call that lasted less than five minutes started my obsession with accessibility.

Dave, Meet Accessibility

During my first few weeks on the job at The Arc as Online Communication Manager, I spoke with one of our board members who told me he was having trouble using our newly redesigned website. He liked the new one much better than the old one, he said, but still struggled with a few key areas on the site. He rattled them off as I scribbled on a notepad.

After we hung up the phone and I digested the conversation, I realized I only knew how to fix one of the handful of items that he listed off to me. He was blind and used a screen reader to navigate the web. I’d never used one, but knew I had to learn so I could build a better experience for not just him, but anyone who came to our sites. I followed Jeffrey Zeldman, the father of web standards, and understood the very basics of accessibility, but didn’t really know how challenging and rewarding web accessibility could be. I dug in. (Need to know more about what accessibility is? Read WebAIM’s introduction.)

WordPress + Accessibility

A few years later, I wanted to give back to the web and WordPress. I honed so much of my front end development and accessibility skills off of opening up WordPress themes to see how they worked. So it made sense to build my own theme and release it under the GPL, like WordPress. How would I make my theme unique among the many already out there? I would bake accessibility in from the start, of course! And I would learn a lot along the way.

Accessible Zen

I released Accessible Zen in the fall of 2013 as a simple, accessible WordPress theme modeled after the themes I’ve admired on Zen Habits, built especially for personal bloggers. It proved to be a ton of hard work, but worth it. Here’s what I learned during the process:

Keep Your Goal in Mind

I set out to build a simple, accessible WordPress theme, but it turns out that’s hard when the web world keeps changing and tossing out new ideas at you every day. A theme design could go in a trillion directions. The one way that kept me on track was just opening up zenhabits.net in a browser once a week to bask in its simplicity. It served as a visual reminder.

Lesson: If you love your goal, stick with it.

Good Accessibility is Undetectable

Why is accessibility hard? The answers to web accessibility challenges and problems aren’t always clear. So much of the right approach often depends on the context of the website or web application in question. Plus, you can’t really see accessibility, like a design or content – whether it’s done well or not. Accessible Zen is built on the back of Underscores. The underlying code isn’t much different and when I look at Accessible Zen, I can’t see what makes it accessible.

Lesson: Love your starter theme of choice and use it.

 Small Details Make a Big Difference

In accessibility, details matter. When creating Accessible Zen, I focused a lot of attention on things like color contrast, skip nav links, default link styling and read more links. All these small things helped make the theme much more accessible.

Lesson: Small stuff needs love too.

Recognize What You’re Doing

You’re making something!

I spent countless hours crafting the design and code for Accessible Zen. I wasn’t sure if anyone would like it, download it or use it. But shortly after I released one of the beta versions, I saw this tweet from Shane Jackson:

I could have stopped right there and the theme would have succeeded in my mind.

Lesson: Find someone who loves your work.

Today, Accessible Zen has been downloaded a few thousand times and is used by my friends and even a company made of up of assistive technology professionals who are blind. Not bad for something born out of a five-minute phone call.

If you’re interested in making WordPress more accessible, join the WordPress Accessibility team.

Quick Wins for Accessible WordPress Themes

You may not know where to start when trying to create an accessible-ready WordPress theme. It’s easy to become overwhelmed at the thought of tackling accessibility, but it doesn’t have to be.

You can knock out several quick tips along the way, which will help your theme be more accessible.

What is Web Accessibility?

First, what is web accessibility? Definitions vary. I like:

The practice of making websites and applications
usable by people of all abilities.

Now that we have that out of the way, let’s get to the tips.

1. Start with Accessibility in Mind

Accessibility spans all the disciplines:

  • Project management
  • User Experience
  • Design
  • Development
  • Testing

You have to start with it as an objective in order to reach it.

2. Find a Good Base

You don’t have do do it all. Look here for help when beginning a theme:

3. Color Matters

High contrast helps everyone.

  • Text and images of text have a contrast ratio of at least 4.5:1
  • Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1

Choose wisely:

4. Sweat the Small Stuff

Because it can make a big difference.

  • Be mindful of your reading order
  • Skip nav links = awesome
  • Keep the underline on links and define focus styles
  • Relative units on fonts = also awesome
  • Keep titles with “Read more…” links

5. Wait a Minute!

I know what you’re thinking. I didn’t really talk too much about WordPress themes That’s true because accessibility is more about people than technology.  When you’re building your themes, keep your users at the forefront, and know yourself and your team. That will help you more than anything.

This blog post served as inspiration for a Lightning Talk at WordPress DC, called Quick Wins for Accessible WordPress Themes. You can view the talk slides on GitHub.