Building websites that are accessible to all users has become a major focus of our industry. Not only do we need to ensure that our creations look great on different browsers and devices, but they also need to work well with assistive technologies like screen readers.

This is not just a moral imperative, but an increasingly legal one as well. Even in countries (such as the United States) that don’t have concrete rules for website accessibility, companies can still be found responsible for major missteps. You only have to look as far as the Domino’s Pizza case for an example.

Ideally, each website we build would be accessible from the very start. Unfortunately, that is not always the case. Older websites can suffer from various shortcomings in this area. And, if a redesign isn’t in the budget, it may feel like you’re stuck with these issues.

All is not lost, however. There are a number of things you can do to make an existing website more accessible. With that in mind, here are some ideas for improving your WordPress website’s accessibility.

First, Perform an Accessibility Audit

The first step to improving accessibility on your existing website is to determine which issues you need to deal with. This can be accomplished with a basic audit.

There are a couple of different ways to conduct an accessibility audit and they should be performed in tandem. The first involves using an automated tool and the second is a more manual approach. Let’s take a deeper look.

Automated Tools

A number of automated tools have been developed that will scan your website for potential accessibility issues. Some aim to be an all-encompassing suite while others offer more niche functionality. If you’re interested in seeing what’s available, the W3C has put together an extensive list of options.

For our purposes, the free WAVE Web Accessibility Tool is a good choice for getting an overview of your site. It provides an interactive markup of your website – complete with a listing of errors, warnings and related information. Even better are the free browser extensions for Chrome and Firefox. They allow you to test whatever page you happen to be visiting with a single click.

WAVE will report issues such as low color contrast, missing alternative text on images and even redundant features that can make screen reader navigation more difficult. You’ll also find a rundown of page structure and ARIA labels.

Once you have the results of the automated test, you’ll have a list of specific items to check. Since WAVE is a visual tool, it’s easy enough to simply click on the errors and alerts it has mapped out on your screen. This can provide you with enough information on whether to take a deeper dive into any particular flags.

It should be noted, however, that some items flagged as “Errors” or “Alerts” aren’t necessarily problematic. For example, the W3C advises that decorative images don’t need alternative text. So, while WAVE may cry foul on any image with an empty alt attribute, it’s not always a reason for alarm. The lesson here is to take the report with a grain of salt.

But, while automated tools are great for catching the issues directly related to code, what about some of the harder-to-find user experience shortcomings?

Manual Testing

Some accessibility issues are best detected by manually inspecting your website. Among the items you’ll want to check:

Keyboard Navigation

Website functionality such as links, form fields and buttons should be accessible via a keyboard. To test, load a page in your web browser and press the Tab key repeatedly. You should be able to navigate through the various items on the page in a logical order.

In addition, a :focus pseudo-class should be applied in your CSS to help users identify the current item in the tab index (as highlighted in the enhanced screen capture below). Simply put, if you can’t tell where you are on a page when navigating via the keyboard, neither can your visitors.

Intuitive Elements

Take a look around your website and pay particular attention to interactive elements such as links and buttons. Are they intuitive? Is their purpose clear to the end user?

Avoid using elements that are solely dependent on color, shape or an icon. Ensure that every interactive element is clearly marked as to what it does. The goal here is to take the guesswork out of performing various tasks so that users can get around more easily.

Typography

Typography is a vast subject, so we won’t dig too deep. But it’s important to review your website’s font choices, sizing and spacing. You’ll want to ensure that your text is legible and that elements such as headings are easily distinguishable from the rest of the page’s content.

Of course, there are a number of other things to look for. Check out the WGAC Quick Reference for additional items you’ll want to inspect.

Fixing WordPress Website Accessibility Issues

Knowing that your website has shortcomings when it comes to accessibility is half the battle. The other half is implementing solutions.

Much of what you find through both automated and manual testing can be fixed by tweaking your site’s styles. Depending on your theme, it may be a matter of visiting a settings panel or the WordPress Customizer to change things such as typography and colors.

Otherwise, it may be a matter of going through your theme’s stylesheet and manually making the necessary changes. This is where your browser’s inspection tools can be a great help in determining exactly which styles to change.

When Plugins Get in the Way

One very handy thing a browser inspection tool can help with is determining whether a particular bit of HTML or CSS is coming from your WordPress theme or a plugin. Just look to the right of the style in question to see where it originated from.

The process for adjusting themes is fairly straightforward. Plugins, however, can be a tad more difficult.

If you happen to find that a plugin you’re using is interfering with your website’s accessibility, you have a few options. You could:

• Attempt to override any troublesome CSS via your theme’s stylesheet;
• Use WordPress hooks or filters to change the plugin’s output;
• Contact the author and ask them to patch any accessibility issues;
• Stop using the plugin;

That last option isn’t ideal, and not always easily done. Therefore, it’s best to exhaust all other avenues first.

Use a WordPress Plugin to Enhance Website Accessibility

The WordPress developer community is always looking to fill a need, and accessibility is no exception. A number of plugins have been released that can help you tackle various tasks. Here, we’ll focus on a virtual Swiss Army knife of accessible features: WP Accessibility.

The plugin can help you fix a number of common issues. For instance, it will add a “skip” link (should your theme not include one), which allows keyboard users to bypass navigation and get straight to page content. You’ll also find the ability to add focus outlines to links and other elements, a long description tag for images, as well as removal of items that can have a negative impact (link targets, title attributes on images, tabindex attributes, etc.).

One of the more unique features of WP Accessibility is its toolbar. This set of buttons will attach itself to the side of your website (or any other element you assign it to). It enables users to increase text size and turn on a dark color scheme. Site administrators also get an optional grayscale view, which you can use to ensure that your site isn’t too dependent on color alone.

Note that the toolbar does its best to fit in with your site’s existing styles. However, you may still need to tweak a few things in your theme for the best possible experience.

Also included are tools for testing color contrast ratios, enforcing alt attributes on images and a CSS diagnostic that will display potential issues in the visual editor or on the front end of your website.

WP Accessibility won’t cure every issue. But it can help in situations where you need to make improvements in a hurry. And, it’s not the only option. Take a look through the WordPress Plugin Repository for more accessibility plugins.

It’s Never Too Late to Add Accessible Features to your WordPress Site

Regardless of its age, any WordPress website can be made more accessible. The good news is that, in most cases, the process doesn’t have to be overly difficult or costly.

There are a number of tools out there that can help you determine potential issues. From there, it’s a matter of investigating each item on the list and applying fixes as necessary. And, while some accessibility problems can be stubborn to rectify, virtually none are impossible.

Structural issues such as those found in CSS or the use of semantic HTML are generally simple to change. Depending on the size of your site and your theme’s makeup, you might be able to knock out these fixes within an afternoon.

On the other end of the spectrum, items such as providing transcripts for audio or video content can be more cumbersome. They may require the help of an outside service, which could be a budget buster.

However, any investment in making your website more accessible should be considered a wise one. It not only helps to create a better relationship with visitors, it’s also the right thing to do.