Over the last few decades, we’ve seen countries implement accessibility laws to create a more equitable environment for everyone. The change has been obvious in public places, like restaurants equipped with ramps, public signage with Braille, and wheelchair-adapted restrooms.

Slowly but surely, governments have begun to repurpose existing accessibility laws so they now include websites as places of public accommodation. As this happens, we’re seeing a big change in how the “user” in user experience is interpreted. It’s not just about building a great website for your ideal customers anymore — your website needs to be able to serve everyone who visits it.

If you’re the owner of a WordPress website, or you build WordPress websites for clients, this post is for you. We’re going to look at what WordPress accessibility is and some best practices and useful tools you can use to achieve it.

But first, let’s start with a brief overview of what accessibility looks like (or doesn’t look like) in web design.

Download Now: Free Website Accessibility Checklist

Accessibility in Web Design

Web accessibility is the act of removing barriers that stand in the way of users with impairments. The ultimate goal in accessible web design is to create a website that can be equally accessed by everyone.

There are a variety of issues that can arise and make a website inaccessible to some visitors and not others.

While we can break them up into categories like Mobility, Visual, Auditory, and Cognitive, it’s not as clear-cut as that. There are Environmental, Situational, and other kinds of circumstances which can render someone impaired on the web.

Below are some examples:

A blog post contains a chart with critical supporting information. One set of data is represented by red bars and the other by green bars.

Inaccessible chart example for users with red green colorblindness

Roughly 8% of all men and 0.5% of women have red-green color blindness, which would make this chart nearly impossible to decipher without a caption or labels. Even then, the inability to quickly visualize the data puts these readers at a disadvantage.

An ecommerce website includes details about the shipping and returns policy in a blink-or-you’ll-miss-it line beneath each “Add to Cart” button.

Ecommerce website with inaccessible link below Add to Cart button

With each passing year, it takes a person 0.8% longer to use a website and hard-to-read fonts only make it more difficult for shoppers as they get older. When important details are effectively imperceptible or unreadable to some users, their experience with the brand and site can be greatly compromised.

A commuter is reading highlights from a local newspaper’s site, but has to skip the videos so as not to bother nearby passengers.

YouTube video with captions is example of accessibility in web design

According to a survey by Verizon Media, 92% of US consumers watch videos with the sound off on mobile. That’s only possible though if captions are enabled. Otherwise, users with hearing issues or, like in the example above, those that don’t have ready access to headphones won’t be able to access the content.

A website has an ‘80s retro vibe. The moving tunnel seems to be pulling visitors into the center, but the only way to enter the site is by dragging the moving quarter into the triangle.

Animated website is poor accessibility design example

While an avant-garde design may be unique and eye-catching, it’s often a terrible choice in terms of accessibility — and for a number of reasons.

For instance, users with motor issues, like those with Parkinson’s, might not be able to execute the drag-and-drop. Or take users with memory issues. They might look at the site and not know how to approach it since the traditional landmarks on a site —like buttons, menus, and vertical scroll —are missing. Flashing elements are also problematic for people with epilepsy, a neurological disease that affects 50 million people around the world.

Is WordPress accessibility-ready?

WordPress has stipulated the following under its Acessibility Coding Standards: “Code integrated into the WordPress ecosystem – including WordPress core, WordPress.org websites, and official plugins, is expected to conform to the Web Content Accessibility Guidelines (WCAG), version 2.1, at level AA.”

So, the expectation is that developers contributing to the WordPress core or creating plugins or themes for it will comply with WCAG 2.1. For reference, level AA compliance is defined as the following in WordPress’s Accessibility Coding Standards: “Level AA success criteria address concerns that are generally somewhat more complicated to address and may impact smaller groups of people, but are still common needs with broad reach.”

That said, not everything in WordPress even meets that standard. For instance, themes marked as “Accessibility Ready” in the theme repository won’t necessarily meet AA compliance.

As noted in WordPress’s Accessibility Handbook: “‘Accessibility Ready’ does not mean that the theme meets the WCAG guidelines AA-level. It means that the theme reaches the minimum standards that the theme review team has set.”

As with most factors when building a WordPress website — like speed, security, and SEO — the onus is on the owner and builder to ensure that WordPress accessibility is taken care of. While some accessibility is baked into the WordPress core as well as plugin and theme contributions, it’s not enough.

That’s why WordPress.org has an entire handbook dedicated to the subject:

Accessibility Handbook homepage in WordPress codex

Image Source

You can use these WordPress-specific accessibility tips to pick up where WordPress.org and its developers left off.

Why WordPress Accessibility Matters

As a website owner, there are a number of reasons you should be concerned with the accessibility of your website. Here are just a few.

1. There are over a billion people with disabilities.

According to the WHO, there are over a billion disabled peoplearound the world. As the global population approaches 8 billion, you can see how common it is for people to deal with impairments related to their vision, hearing, motor skills, cognitive reasoning, and so on.

If your website is truly going to cater to everyone, then it can’t only be accessible to 7/8 of your visitors.

2. Accessibility encourages better design practices.

While you can do amazing things with a WordPress site, sometimes less is more. And accessibility forces us to scale back the excess and really think about how to create a baseline experience that’s positive for everyone.

That doesn’t mean that creativity should be thrown out the window. It just means prioritizing simplicity and clarity over complexity.

3. Google uses accessibility as a ranking signal.

In the new Core Web Vitals update, accessibility is one of four factors used to score a website’s rankability based on its user experience.

You can see it for yourself in the Core Web Vitals tool:

Accessibility used as ranking factor in Google's Core Web Vitals

If you want your website to rank well in search results, then accessibility has to be factored in.

4. Inaccessibility can impact your ability to earn.

There’s the obvious loss of earnings you’ll experience from having a website that’s inaccessible to some users. According to an article by the New England Low Vision and Blindness Association, Americans with disabilities have an estimated $200 billion in spending power.

But there’s also the growing possibility of a lawsuit, too.

According to Seyfarth data, the number of Americans with Disabilities Act (ADA) Title III-related lawsuits (related to both digital and physical inaccessibility) has been on the rise year over year:

number of Americans with Disabilities Act (ADA) Title III-related lawsuits increased year over year depicted in colorful bar graph

2020 was obviously an anomaly, but a strong rebound is expected.

According to a report by American Institutes for Research, “Importantly, people with disabilities are not a solitary market; they are surrounded by family members and friends who also recognize the value in products and services that accommodate all people in society.”

So, an inaccessible website and a lawsuit brought against you for such won’t just cost you disabled users. It could cost you their trusted connections, too.

Okay, so it’s clear that accessibility is a must. It’s also clear that WordPress isn’t responsible for making sure your site is accessible.

So let’s go over what you can do to make your website accessible.

1. Familiarize yourself with W3C, WAI, and WCAG.

The World Wide Web Consortium(W3C) is an organization that develops standards aimed at a “Web for All”. Accessibility is just one part of its mission to make the web a better place.

The Web Accessibility Initiative(WAI) is an arm of the W3C that develops global accessibility standards for the web along with resources and strategies people can use to implement them on their websites.

And the Web Content Accessibility Guidelines(WCAG) are the official standards published by the WAI.

By familiarizing yourself with these guidelines and where they come from, it’ll be much easier for you to apply them to your website.

2. Use a WordPress accessibility-ready theme on your site.

For WordPress specifically, you have to consider not only how your design and content choices affect accessibility, but how your WordPress theme does as well.

If you go to the WordPress.org theme repository, you can filter through the 4,000+ themes available there:

Accessibility Ready is filter option in WordPress theme directory

Under Features, you’ll find the option for “Accessibility Ready”.

Remember: Accessibility-ready WordPress themes do not necessarily meet level AA compliance of the WCAG. So while these themes will give you a good head start in your contribution towards a more accessible web, there’s other work you have to do.

3. Install a WordPress accessibility plugin.

If you’ve ever been to a website with an accessiBe widget, you’re probably thinking, “Why don’t I just use that to make my website accessible?”

Billabong has one of these widgets installed:

Billabong website with accessibe Widget enabled

The only problem is that external accessibility solutions aren’t always effective in WordPress.

One area where they’re particularly weak is the contact form — an element that can be difficult enough for non-impaired visitors to fill out if it’s designed poorly.

Instead, using a WordPress accessibility pluginis the better solution.

list of accessibility plugins in WordPress directory

While these plugins won’t completely solve any and all accessibility issues found on your site, they can help you find and resolve some of the more obvious issues.

There are a number of plugins to choose from. However, both WordPress.org and HubSpot rate WP Accessibility as one of the best WordPress accessibility plugins. So that’s a good place to start.

4. Make sure your code is accessible.

Even if you’re not planning to do any coding yourself, the various choices you make when configuring features and settings in WordPress can lead to inaccessible code. This can have a serious impact on users who depend on screen readers to help them navigate around a site and to read the content on it.

Here are some things that will help your website’s code become more accessible:

  • ARIA landmarks: This will help screen readers know how to get around a page.
  • Semantic HTML: This will tell visually impaired visitors what types of elements they’re engaging with.
  • Skip links: These help users with assistive devices easily return to the menu, search bar, and other navigational features.
  • Header tags: A logical, hierarchical heading structure can clarify the relationship between content.
  • Contact forms: Forms with the appropriate labels, helper text, success messages, and error messages are easier to complete.
  • Image alt text: Descriptive alt text helps everyone “see” what’s in your images. Alt text isn’t necessary for decorative images though.

Some of these things, like ARIA landmarks and skip links, will need to be coded in by a developer. Others, like image alt text and header tags, can be done in the WordPress editor.

For example, you can add alt text in the Image settings:

Adding image alt text in WordPress Gutenberg editor to improve wordpress accessibility

This will then add the alt text to your code and make it readable to screen readers as well as those who can’t otherwise see the images.

5. Make sure your design is accessible.

When we talk about making design accessible, we’re typically focused on two elements: colors and fonts.

With color, you’ll have to be mindful of how your choices impact the following visual and cognitive impairments:

  • Low vision
  • Color blindness
  • Dyslexia

So, choosing web accessible colors goes beyond avoiding pairings that are bad for color blind users. You also have to think about how color contrast impacts the readability of your content.

Typography can also affect the accessibility of your WordPress site. One factor to think about is your font choice. WebAIM has a good set of guidelines to follow when choosing typefaces that (most of) your visitors will be able to read with ease. Here’s a quick review of them:

Choose simple over complex styles.

Side by side comparison of simple and complex typography

Choose clarity over ambiguity when it comes to characters.

Side by side comparison of clear and ambiguous typography

Choose no more than two or three fonts to use site-wide.

Sentence with multiple fonts is not accessible for WordPress

Choose fonts with ample spacing between characters.

Font with less spacing between characters is not as accessible as sentence with ample spacing

Choose font weights with some substance.

Sentence with heavier font weight is more accessible than sentence with light weight

Be careful with how you style and size your fonts.

Four sentences with different styling have accessibility issues

Size, in particular, is a really important factor in WordPress accessibility. It’s generally recommended that your smallest font be no smaller than 16 pixels.

6. Make sure your content is accessible.

One last thing you’ll want to make accessible is your content.

Some of what you do in terms of coding and design will have an impact on this. For instance, using hierarchical header tags will improve the organization and readability of a page. Also, choosing the right colors for text links can help them stand out from surrounding text, which will improve click confidence.

There are other things you can do to improve content accessibility:

  • Anchor text: Write descriptive anchor link text so people know exactly where the link will take them.
  • Link destination: Don’t open links in new browser tabs.
  • Content length: Avoid writing in large blocks of text. Shorter sentences and paragraphs are best.
  • Images: Use relevant images to break up your content and provide additional context.
  • Captions: Add captions to embedded videos so people who can’t hear the audio can still follow along.
  • Transcripts: Include on-page transcripts for embedded video and audio files. They’re also good for SEO.

You’ll be able to implement most of these within WordPress. Here’s an example of how you’d write descriptive anchor text for a link and then direct it to open in the same window:

Writing descriptive anchor text for a link helps ensure your WordPress content is accessible

For something like video captions, you’ll need to add them yourself. A platform like YouTube will auto-generate them for you, though it’s not always a flawless execution. Most video hosting platforms (YouTube included) allow you to upload your own.

7. Test your WordPress site for accessibility.

It’s important to audit your WordPress site for accessibility — not just when you’re building it, but on an annual basis as well.

There are tons of accessibility testing tools that’ll make light work of this. Let’s look at a few:

Core Web Vitals

The first one to check in with is Google’s Core Web Vitals.

WordPress accessibility tool:  Core Web Vitals

If Google can detect any accessibility issues, you want to deal with them ASAP so it doesn’t impact your website’s ranking.

axe DevTools

Another tool you can use integrates with your Chrome browser. It’s a DevTools extension created by Deque and it works like this:

WordPress accessibility tool: axe DevTools

When you Inspect any page on your website, axe DevTools will show you how many accessibility issues there are and where to find them.

WAVE Evaluation Tool

If you’ve never used the Inspect tool in your browser, the WAVE Evaluation Toolcreated by WebAIM may be the better choice:

WordPress accessibility tool:  WAVE Evaluation tool

It’s a browser extension just like axe is, but this one marks up the errors on the page you’re looking at.

Color Safe

Use the Color Safe tool to find colors that meet the WCAG level AA compliance:

WordPress accessibility tool: Color Safe

All you have to do is input the background color of the section as well as the font and font size you intend to use against it. The app will then generate all the colors that meet the 4.5 contrast ratio needed for accessibility.

Coblis

You can check your website’s images or even full page designs for color blindness-related issues using Coblis:

WordPress accessibility tool: Coblis

Simply upload your file into the system and run through each of the color blindness types to see how your graphic looks for different users.

If you want help staying on top of everything you need to do to make your site accessible, take a look at this web accessibility checklist.

Frequently Asked Questions about WordPress accessibility

We’ve covered a lot so far —but you may still have questions. Here are answers to some of the most commonly asked questions about WordPress accessibility.

How do I make my WordPress site accessible?

There are seven things you can do to improve WordPress website accessibility. These are detailed above:

  1. Familiarize yourself with the W3C, WAI, and the most recent WCAG guidelines.
  2. Use a WordPress accessibility-ready theme and ensure your code is in peak condition.
  3. Install a WordPress accessibility plugin to catch major issues.
  4. Make sure any code you write is accessible to visitors and screen-reading devices.
  5. Design your fonts and colors so they don’t impede discoverability or readability of your content.
  6. Make your content well-organized, well-written, and properly documented.
  7. Test your WordPress site for accessibility regularly.

Is WordPress WCAG compliant?

WordPress.org set the expectation that all code written into the core as well as within contributed themes and plugins be WCAG 2.1 level AA compliant. However, it’s ultimately up to the owner or builder of the site to ensure that it ends up being accessible.

What is accessibility mode in WordPress?

Accessibility mode is a setting in WordPress that makes it easy for its users to add widgets to their pages. It can be found in the top-right corner of the Appearance > Widgets screen:

Accessibility mode in is widget in WordPress dashboard

When enabled, the Widgets page will look like this:

WordPress dashboard with accessibility mode enabled changes icons to words

Are WordPress themes accessibility ready?

Some of them are. On the WordPress.org site, filter the Themes using the “Accessibility Ready” feature.

What’s the best WordPress accessibility plugin?

While there are a number of great WordPress accessibility plugins, the one that WordPress and HubSpot recommend is called WP Accessibility.

Is your WordPress website ready to serve everyone?

There are many reasons to prioritize WordPress accessibility. Here’s a few:

  • Allows all users to get the most from their experience with your website and brand.
  • Can improve your website’s ranking in search results.
  • Avoids the monetary and reputation penalties associated with having an inaccessible website.

The great news is that WordPress, its contributors, and a whole host of free online tools can help you build, test, and refine your website for better accessibility.

New Call-to-action

 website accessibility

Originally published Jul 20, 2021 7:00:00 AM, updated July 22 2021

Topics:

Web Accessibility