A 12-Step WordPress Accessibility Checklist [+Tips from WCEU 2022 Speaker Maja Benke]

Improving WordPress accessibility was a major focus in the latest release of the software, ie.  WordPress 6.0. This version includes more than 50 updates specifically focused on enhancing the accessibility of the platform. 

While improvements in the core are being made, users should continue to follow best practices to ensure their WordPress website is as accessible to as many users as possible. 

Below we’re going to cover the following topics, and include insights from Maja Benke’s session “Accessibility for Dyslexia” at WordCamp Europe 2022. Feel free to click on any of the links to jump to that section:

• whether WordPress is accessibility-ready
• why WordPress accessibility matters
• how to make your WordPress website accessible

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.

That said, not everything in WordPress 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 to ensure that WordPress accessibility is taken care of. 

The good news is that WordPress.org has an entire handbook dedicated to the subject:

Image Source

You can use these WordPress-specific accessibility tips (as well as the ones below) to provide a better user experience to all your visitors.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Website Accessibility Checklist

This checklist will help you make the following more accessible on your website:

• Web Pages
• Navigation
• Video & Media
• And More!

Download for Free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

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 people worldwide. 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, etc.

However, in a follow-up interview to her session at WordCamp Europe 2022, Maja Benke, a WordPress contributor and blogger for WP1x1, stressed that a major reason that businesses haven't invested in web accessibility is that "they think it’s not their clients or that they don’t 'see' people with accessibility needs so they think they don’t exist." As a result, many websites are accessible to only a portion of their visitors.

For example, the image below shows a website with an ‘80s retro vibe that can only be accessed by dragging the moving quarter into the triangle. While this interactivity is cool, it can be a terrible choice in terms of accessibility for people with motor issues like Parkinson’s.  

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 there's no room for creativity. It just means that simplicity and clarity should be prioritized over complexity. This will impact not only your site's accessibility, but its overall usability as well. 

In the follow-up interview to her WCEU session, Benke said she encourages people to think of accessibility as an extension of usability, SEO, and user experience, instead of a stand-alone category. 

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:

If you want your website to rank well in search results, then you need to factor in accessibility.

4. Accessible design practices will benefit all users, including non-natives.

Accessibility design practices benefit all users, not just users with disabilities. For example, in her WCEU session, Maja Benke mentioned several accessibility design practices that content creators could implement to help users with dyslexia, including using active and plain language, avoiding uncommon abbreviations, using transcription, closed captioning, and subtitles for videos, among other practices. 

"All these things help people who are non-natives or those with strong dialects, too," she said. 

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

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 users living with disabilities. 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.

Before we dive into these tactical strategies, it's important to note that every solution won't work for every user. In her talk at WCEU 2022, Benke stressed that accessibility is a spectrum: "Something that helps me doesn’t necessarily mean it helps another person with dyslexia or a similar problem."

That's why implementing as many accessibility best practices as possible is so important. Each best practice can help make your site more accessible to a wider range of users. Keeping that in mind, let's dive in to the checklist below. 

1. Familiarize yourself with W3C, WAI, and the most recent WCAG guidelines.

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:

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 to catch major issues.

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, for example, has one of these widgets installed:

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

Some elements have several accessibility issues. The contact form in particular can be difficult for any visitor to fill out if it’s designed poorly.

Using a WordPress accessibility plugin can be a better solution.

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 several plugins to choose from. However, both WordPress.org and HubSpot rate WP Accessibility as one of the best WordPress accessibility plugins. So that’s an excellent 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 seriously impact users who depend on screen readers to help them navigate around a site and 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.
• Language attribute: This will help screen readers determine what language a web page is in. Without a language attribute, screen readers will default to the operating system’s language, which could result in mispronunciations of the title and other content on the page. In her WCEU session, Benke said, "For example, if text is German and there's no lang attribute , then a screen reader may use an English voice, which is hard to understand for users with dyslexia and other users."
• 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. However, alt text isn’t necessary for decorative images.

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 by content creators in the WordPress editor.

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

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. Use captions for images, GIFs, and videos. 

While alt text is excellent for screen readers and the visually impaired, captions are great for adding context to your multimedia content, including images, GIFs, and videos. A major advantage of captions is that they are displayed within the main content whereas alt text is "hidden." Since captions can be read by sighted users and assistive technology, they provide the greatest amount of access to information about an image. 

Take the image below as an example:

Image Source

6. Make your site keyboard navigable. 

Accessibility involves making it possible and easy for mobility-impaired visitors to navigate your site using keyboard controls. 

That means that parts of your website like the menus, navigation elements, homepage, and others must be accessible via keyboard commands. 

7. Choose accessible colors.

Color is an important aspect of making design accessible.

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

• Low vision
• Color blindness
• Dyslexia

• Contrast insensitivity

• Photo-sensitivity

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

For example, in her WCEU session, Benke said, "High contrast is good for people with low vision but can be distracting for those with dyslexia. So don’t go too high contrast. A sepia background color and dark gray font color are a good pair."

Here's an example:

Image Source

8. Choose accessible fonts. 

Typography can also affect the accessibility of your WordPress site. 

Font size, in particular, is a crucial factor in WordPress accessibility. Generally, your smallest font should be no smaller than 16 pixels.

Another 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, with additional insights from Benke's WordCamp session:

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Website Accessibility Checklist

This checklist will help you make the following more accessible on your website:

• Web Pages
• Navigation
• Video & Media
• And More!

Download for Free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

Choose simple over complex styles.

In her session, Benke explained that handwritten font is difficult to read for most users, including users with dyslexia. 

Choose clarity over ambiguity when it comes to characters.

Benke also explained that some font families have characters that look similar or even identical, which can affect reader comprehension. In that case, it's best to avoid them or at least offer multiple options. One option could be a font family that's specifically designed for users with dyslexia, like Open Dyslexic.

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

It's important to limit the number of fonts you use on your site to help users with dyslexia, and all users, quickly parse text and process its meaning. 

Choose fonts with ample spacing between characters.

Spacing between characters is as important as spacing between lines since some users with dyslexia swap letters, which can completely change the meaning of a sentence. 

Choose font weights with some substance.

Benke said that thinner fonts are harder to read. While you could bold your font, it's best to opt for a font with a heavier weight. We'll explain why below.

Be careful with how you style and size your fonts.

Benke explained that text transformation, like uppercase, changes the shape of words, which can make it more difficult for some users with dyslexia to read. Bolding and italicizing text can also be challenging because this styling breaks the flow of the text. 

9. Make sure your content is accessible.

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

Some of what you do in regard to coding and design will impact the accessibility of your content. 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 the surrounding text, which will enhance 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:

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.

10. Avoid auto-playing videos.

Autoplaying videos are annoying for most users and are especially frustrating for people with cognitive disabilities.

If the video also plays audio automatically, it can be distressing to users with screen readers and affect the reading of the page.

So if you want to add videos to your website, consider using a video plugin like SmartVideo that allows you to choose whether you want the video to play automatically.

Image Source

11. Use clear and simple layouts.

Another way to improve accessibility is by using clear and simple layouts that make it easier for every visitor to read and process your content. Here are some tips that Benke offered in her WCEU session:

• Make content areas compact: Limit content areas so users are not scanning the page like a telegram, which makes it easier for users with dyslexia to swap lines. The more compact, the better. 
• Use white space generously: Because some users with dyslexia (and others) jump from one point on the page to the next, white space enables them to rest their eyes and concentrate again. Without whitespace, the content is harder for everyone to read.
• Break up text blocks with other elements: Breaking up text blocks with visual elements, like images, as well as white space makes it easier to understand and process your content. These visual elements can also add more contextual information when explaining complex topics.

1% for the Planet, for example, commits to accessibility by using high-contrasting text, incorporating lots of white space, and striking a balance between images and text. The website’s simple layout makes it easy for users to navigate through it without getting lost or confused.

12. Test your WordPress site for accessibility.

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

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.

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:

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:

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:

All you have to do is input the section's background color and 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:

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 eleven 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.
3. Install a WordPress accessibility plugin to catch major issues.
4. Make sure your code is accessible.
5. Use captions for images, GIFs, and videos.
6. Make your site keyboard navigable.
7. Choose accessible colors.
8. Choose accessible fonts.
9. Make sure your content is accessible.
10. Avoid auto-playing videos.
11. Use clear and simple layouts.
12. Test your WordPress site for accessibility regularly.

Is WordPress WCAG compliant?

WordPress.org set the expectation that all code written into the core and 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 was a setting in older versions of WordPress that made it easy for users to add widgets to their pages. You could find it in the top-right corner of the Appearance > Widgets screen on your dashboard using the Classic editor. This is no longer available in the more recent versions of WordPress using the Gutenberg editor. 

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

Editor's note: This post was originally published in July 2021 and has been updated for comprehensiveness.