Building More Accessible Websites with WordPress
If you’re a web designer, you probably see the term “accessibility” mentioned quite a bit. And that’s a wonderful thing. The industry has become very much aware of the need to ensure that what we build can be accessed by everyone.
While some locales (the United States being a prime example) don’t have crystal-clear laws pertaining to accessibility, there are a lot of great guidelines for implementing it. So, even if there isn’t necessarily a legal imperative, there certainly is a moral one. Better still is that we have the technology to do it.
But, if you’re building sites with WordPress, there are some additional challenges when it comes to accessibility. By itself, WordPress is accessible (although the Gutenberg editor still has some work to do in that area).
However, we don’t just use WordPress alone. We implement themes, plugins and our own customizations into the mix. This can muddy up the waters when it comes to ensuring our websites follow best practices.
And although we can’t snap our fingers to instantly make everything accessible, there are some common sense actions we can take. Here are a few tips for putting accessibility at the forefront of your WordPress website.
Use or Build an Accessible Theme
Choosing the right theme is about so much more than looks or fancy features. Since it provides the outward face for how users interact with a website, accessibility has to be baked in from the start. Make the wrong decision here and it’s akin to having a beautiful house with a faulty foundation.
If you’re building your own theme, the process is a little easier. Since you’re not reliant on a third-party developer, you can implement only the features you need and test as you go.
But for those looking at either free or commercial themes, it can take some research. You’ll need to look for themes that claim to be accessible. The trouble is that many themes either don’t mention this or are very vague when it comes to details.
In that case, try contacting the theme author and find out what (if anything) they did to ensure that the theme doesn’t get in the way of screen readers or other assistive technology. You might also want to run a demo version through one of the validation or simulation tools out there. Then, try navigating the site via a keyboard.
Since many themes allow you to choose colors and typography, it’s also important to keep contrast and readability in mind. Is the text too small? Do the colors provide enough contrast to allow text to be read? This is something that should be relatively easy for you to control.
Determine the Effect of Plugins
WordPress plugins are another area worth paying attention to. While some simply adopt your theme’s CSS, others add their own markup. Both the accessibility and quality of this code can vary.
This means that, even if you have a theme that follows best practices, the wrong plugin could cause unintended issues. And the bigger the plugin’s front-end footprint on your website, the more potential it has to negatively impact accessibility.
If you can’t avoid using these types of plugins, that’s okay. But it is recommended you run tests with and without plugins active to gauge the impact. You can also utilize your web browser’s inspector tools to pinpoint any troublesome code.
Have an Existing Site? Add Accessible Features
For websites that are already out there in the public space, retrofitting can be difficult. Factors such as a site’s age and how it was initially built can play a role in just how much work is involved. In some cases, a full-on revamp may not be within a reasonable budget.
Certainly, if you’re working on a site that has so many challenges, an argument can be made for a redesign. That might well be the best path forward, as you can establish accessibility as a primary goal. But it’s understandably not always realistic, either.
In these situations, there are still some things you can do:
Make Small Enhancements
Maybe those big, all-encompassing changes aren’t going to happen. Instead, look for little things you can change without too much trouble. For instance, bumping up the font size and increasing line spacing will offer a cleaner look and allow your content to be more easily consumed. The same goes for colors.
Other possibilities include making sure that images have descriptive ALT text and that hyperlinks have a
:focus state defined. There are any number of small changes that can add up to a better user experience.
Provide Users with Options
Another way to make an existing site more accessible is by empowering users make some choices for themselves. By allowing them (within reason) to adjust things such as font sizes or color contrast, you’re helping to meet their needs.
One simple and cost-effective way to do this is by installing a plugin, such as WP Accessibility. It adds font and contrast features in a handy front-end toolbar. Plus, it can optionally add
:focus states to your links, add a skip link to your pages, along with other goodies.
Awareness Is Half the Battle
Because the WordPress platform offers so many possible looks and functionalities, we often take things for granted. It’s easy to pick a theme or install a plugin and not think twice about how they affect accessibility. Yet, each decision makes a difference.
Just having an awareness of the potential impact makes us better designers. It encourages us to take that extra step of testing and to be more discerning about what we use.
The result is that we start putting users first – in front of unreadable color schemes and special effects that hurt usability. Once we do that, accessibility becomes just another feature we build in by default.