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
[…]
This article was written by Eric Karkovack and originally published on WPShout.