It’s not a secret that I love WordPress– I love its versatility, capabilities, and the huge community that makes it possible. One of the biggest positives of WordPress- the sheer number of contributors- is also one of its most challenging components as it leads to inconsistencies throughout the platform. I was surprised that even popular themes and plugins are not guaranteed to adhere to basic accessibility standards without some work. Obviously, an inaccessible site isn’t good for anyone- users or site owners.
There is a lot of work to be done all around, on the part of the developers who distribute content, on the part of publishers to communicate which standards are built-in and which are not, and on designers to assure that their final product is accessible to all users. There are many steps to take to create an accessible experience for everyone. The following are by no means comprehensive, but I’ve found them to be helpful when getting started.
Proper Alt Text
I’ve mentioned alt text quite a bit, and for good reason. It is a major component in making sure your web pages provide value to people who may not be able to perceive the images in your web content.
A concise description of the image is perfect. If it is strictly decorative and does not support the content of your page, be sure to include an alt tag in the HTML markup with no content between the quotation marks- this will tell screen reader devices to skip the content of that image- creating a faster, better user experience all around.
Ensure that the Focus Indicator is Working
A focus indicator is an important tool that helps people who do not use a computer mouse determine which element they are selecting at any given time. It creates an outline of each linked element as it’s selected or focused on. You can test this function for yourself by using the tab key on your keyboard to navigate a site. If the focus indicator is functioning properly, you’ll see an outline appear around each element as it is selected.
Unfortunately, there are some themes, design tools, and others who eliminate the focus indicator for aesthetic/branding purposes. This creates a barrier for any user who is trying to navigate through your site without a mouse. If you notice that focus indicators are missing, you can use a plugin like WP Accessibility to resolve the issue or add your own with a little bit of CSS like this:
a:focus{
outline: 2px solid #00abeb !important;
}
Incorporate Skip Links
A skip link is a tool that helps users who are visually impaired or non-mouse-using skip cumbersome, repeating content like navigation bars, logos, and banners. It helps users get to the main content on each page more efficiently. A skip link can be visible or be set to appear when the element is focused on. Ensure that you have one before your navigation/header content to help users navigate effectively without wasting their time. An invisible skip link can be created using a bit of CSS or an accessibility plugin that’s compatible with your theme.
This list is just a small set of recommendations, for a more complete set, I’d recommend visiting the World Wide Web Consortium (W3C) to see their full WCAG guidelines. Making the web a more accessible place takes work at every step of website design, development, and maintenance. Have you taken steps to make your site more accessible? Let us know in the comments!
