Building More Accessible Websites with WordPress

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

Use or Build an Accessible Theme

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.
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.
Web page source code.
In these situations, there are still some things you can do:
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.
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.

Determine the Effect of Plugins

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.
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.
A font style chart.
For example, a page builder plugin could theoretically add a ton of HTML, CSS and JavaScript beyond your theme. If it’s not been built with accessibility in mind, that could be a problem. But this goes for any plugin that injects its own markup.
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.

Have an Existing Site? Add Accessible Features

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

Make Small Enhancements

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

Provide Users with Options

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.
A laptop screen.
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.

Awareness Is Half the Battle

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

Posted by WordPress Guru