Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to improve your WordPress theme’s accessibility right now

How to improve your WordPress theme’s accessibility right now

There’s not a day that goes by that I don’t use the web, not even when I’m on vacation. I’m going to take a wild guess that you can relate. More and more, the internet plays a critical role in how we conduct business, discover information, and connect with others.

I can’t imagine reverting back to life without the internet. For many, however, access to the web is limited due to factors such as geography or disability. For those of us who publish content online, it’s our responsibility to make the web more accessible.

So let’s talk about accessibility.

First, what is accessibility? Depending on who you ask and the context of what you’re asking, it means different things. Consider these examples:

  • For a college student, it’s an open door to a professor’s office.
  • For someone in a wheelchair, it’s a ramp into a building.
  • For a programmer, it’s a well-documented API.
  • For a visually impaired person, it’s a website that’s structured in a way to allow a screen reader to accurately interpret the content.

According to Wikipedia, accessibility is the degree to which a product, device, service, or environment is available to as many people as possible.

Web accessibility and WordPress

When we talk about web accessibility in the context of WordPress, there are two primary things to think about:

  1. The accessibility of your theme
  2. The accessibility of your content

What makes a WordPress theme accessible?

If you take a peek inside the stylesheet of a WordPress theme, chances are you’ll see a documentation block that includes the theme’s name, licensing info, and so on. Underneath that, there are usually tags that offer up descriptive words for the theme — things like colors and layout options. These tags aren’t words made up by theme authors; they’re reserved words determined by WordPress.org.

Style.css theme credits

When you see a theme tagged accessibility-ready, that means it meets the WordPress.org theme accessibility guidelines. In short, features that are baked into themes must meet accessibility guidelines to use these tags. Those features include things like good color contrast, proper use of alt tags, and obvious focus on an element to help make keyboard navigation easier.

At the time of this writing, if you use the WordPress.org tag filter to search the repository for “accessibility-ready” themes, you’ll see there are only 13. Of the almost 2,700 themes available at WordPress.org, less than half a percent meet accessibility requirements.

Certainly there are accessible themes out there that aren’t in the repository, like Rian Rietvield’s Lieden Theme for the Genesis Framework. But the fact remains that the availability of accessible themes is woefully lacking.

What does this mean for you?

If you’re a theme developer, consider how to move your code toward better accessibility. It so happens that a lot of accessibility features overlap with other business benefits, like more SEO-friendly markup and a better mobile user experience.

If you’re a theme user, raise your level of awareness around theme accessibility to create more demand in the market. If it’s important to customers, I guarantee you that it’ll become important to theme developers. Also, check out Joe Dolson’s WP Accessible plugin. It has some great features that can help nonaccessible themes be more accessible.

What makes your content accessible?

Okay, so we talked about theme accessibility. I’m not saying run out and change your theme right this minute, but when you do your next redesign or site facelift, remember accessibility. Until that time, focus on controlling the content you’re putting on your website.

Earlier this year, I discussed some quick tips to improve the accessibility of your content. These are easy steps you can start with today that don’t need any code.

For example, try doing the following on the very next post you write:

  • Use semantic headings. Read only the H1, H2, H3, etc. tags in your post. Does the content outline make sense? If not, reconsider the structure.
  • Use image ALT tags. Could a blind reader vividly imagine your photo? If you’ve used descriptive ALT tags, they can.
  • Use good anchor text. If you took the link text out of context, would it still offer an idea of where that link goes? Hint: “Click here” fails the test.

What else can you do to make your content more accessible?

For a good time, try running your site through this accessibility checker. The first time I ran it on my site, I wanted to cry — I don’t like flunking tests. Tears aside, that tool (and others that are similar) give you immediate feedback and tips for things you can do to improve your site.

Moving forward

If you want to increase your understanding of accessibility specifically for WordPress, start lurking where the WordPress accessibility team hangs out. You’ll get an idea of what’s on the radar for future versions of WordPress as well as “meet” the smart folks that drive the accessibility initiative.

For a broader perspective on web accessibility, check out the Accessibility Project, the Web Accessibility Initiative, or follow the #a11y hashtag on Twitter or Google+.

Wherever you hang out online (or heck, even offline), if accessibility is important to you, talk about it. The more you talk about it, the more you’ll help move accessibility forward.

4 Comments

  • I just had to share this. Great post Carrie, and thank you once again for helping to make other people aware of accessibility!

  • It is a great post. It helped me to look into the errors in the template that I designed. thank you for sharing this.

  • Kyle Alm says:

    HTML elements are here to help, but only if you use them properly. HTML can be so lovely and simple if you just give it a chance.

  • Exequiel says:

    Thank you for the article Carrie, I had an SEO and Accesibility course and I try to optimize the alt-tags and the title tags by trying to think not only in terms of keywords but in terms of how a person with accesibility issues would understand it better.

    If I upload a picture that has text in it I always write it verbatim so visually impaired people are able to know what the picture is supposed to say. And if I upload a picture that doesn’t have text I try to describe it so the experience is at least acceptable. If there’s an icon I try to describe it for example, however I don’t do this everytime because sometimes I use them for SEO purposes but I know I should adopt the practice everytime.

    I think that we as webmasters should consider accesibility as mandatory or at least try to, if we see a person in a wheelchair we go out of our ways trying to help, I don’t see how is the web different.

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free