An Essential Guide to WordPress Accessibility (Part 2)

WordPress accessibility is a complex subject because a WordPress website consists of several parts, all of which need to comply with multiple requirements that address different kinds of accessibility needs.

Therefore, making an accessible WordPress site is not an easy task. It involves various steps, including choosing an accessible theme, creating accessible content, and testing the website with different types of assistive technologies, such as screen readers, keyboard navigation, and text-to-speech tools.

What Is WordPress Accessibility?

WordPress accessibility is a design objective and implementation process that makes all parts of a WordPress site: 

  • perceivable, operable, and understandable for people with permanent or temporary disabilities
  • sufficiently robust so that different devices, browsers, screen readers, and other assistive technologies can interpret it

These four objectives (Perceivable, Operable, Understandable, and Robust) make up the POUR principles of web accessibility, defined in detail in the WCAG 2.0 guidelines.

An accessible WordPress website must consider the needs of the following user groups:

  • visitors who access the frontend of the website
  • logged-in users or subscribers who also access member-only areas and the WordPress dashboard
  • contributors, writers, editors, and administrators who access everything that logged-in users plus the block editor and some or all of the admin pages 

Therefore, WordPress accessibility consists of the accessibility of:

  • the WordPress admin area, including the block editor and Customizer interface
  • the activated theme
  • all of the activated plugins
  • the content appearing both on the frontend and backend, including widgets, notifications and error messages, and media content such as images and videos

Is WordPress Accessible by Default?

While WordPress is not fully accessible yet, it’s already a requirement that all new code uploaded to WordPress.org conforms with the WordPress Accessibility Coding Standards

WordPress also has an Accessibility Handbook, and you can follow the state of the block editor’s accessibility issues on GitHub.

WordPress accessibility issues of the block editor

Despite the existing issues, WordPress accessibility has improved a lot in recent years. With the help of an accessible theme, it’s possible to create a WordPress website that’s fully accessible on the frontend and in most parts of the admin area.

How to Make an Accessible WordPress Site?

Now, let’s see the most important steps to implement WordPress accessibility.

1. Choose an Accessible Theme

Accessible website design starts at the design phase, which, in the world of WordPress, means an accessible theme, such as Blocksy.

Blocksy, an example of an accessible WordPress theme

You can evaluate the accessibility of a WordPress theme after installing and activating it.

WordPress theme accessibility refers to the accessibility of the basic design and code of a theme. However, you still need to pay attention to configuring the settings (e.g. colors) with accessibility in mind and adding accessible content (posts, articles, images, videos, etc.) to your site.

An accessible WordPress theme: 

  • can be fully navigated with a keyboard, including all the links, menus, forms, and buttons
  • has a ‘skip-to-content’ link
  • all links are underlined
  • the :focus state (the position of the Tab key on the screen) is visible and easily distinguishable
  • has a semantic and clean code base so that screen readers can interpret the content structure
  • loads fast
  • provides settings that let website owners implement accessible design

For example, Blocksy’s default design includes highly visible, underlined links and a thick, blue outline for the :focus state:

Example of keyboard-accessible focus state

2. Adjust Your Theme’s Settings to Improve WordPress Accessibility

Theme accessibility doesn’t only mean an accessible frontend, but the theme’s settings also must be well-structured and provide options for administrators to create an accessible website, such as:

  • increasing color contrast
  • choosing easy-to-read fonts
  • adjusting the font size and line height
  • making buttons and other controls larger
  • creating menus and submenus that are fully accessible for both screen reader and keyboard users
  • adding supplementary navigation elements, such as breadcrumbs or a scroll-to-top button

For instance, Blocksy enables you to fine-tune your menu settings, including the dropdown:

Blocksy's theme options to creating an accessible menu

3. Create Accessible Content

Choosing an accessible WordPress theme is just the first step in WordPress accessibility. You also need to ensure that each piece of content you add to your WordPress site is accessible.

The WordPress block editor has many built-in settings that help you create accessible content. For example, you can add alternative text to images for screen reader users:

Alt text - an example of WordPress accessibility settings in the block editor

You can also use the info box to check the document outline (the structure of your headings).

A consistent heading structure helps people with cognitive disabilities understand your content, and screen readers can also better interpret it:

Document outline box in the WordPress block editor

There are also many content blocks available by default that let you break up your content, which makes it easier to skim through longer articles.

You can add tables, lists, images, videos, blockquotes, and more — for example, here’s a customizable table block:

Customizable table block in the WordPress block editor

In addition to using the default options of the WordPress editor, also make sure that the content you embed from external sites or upload from your computer is accessible. For instance, videos must be close-captioned so that people with hearing impairments can watch them without information loss.

4. Don’t Rely on WordPress Accessibility Plugins

While there are some accessibility plugins available for WordPress, generally, it’s not a good idea to rely on these tools. People with disabilities tend to configure accessibility settings globally from their operating systems, browsers, screen readers, or other assistive technologies. 

For example, they can set a high-contrast color theme for all the applications they use (including the browser, together with every website they visit from there) or increase the default font size. Modern browsers also offer a reader mode that helps declutter web pages and uses high color contrast by default.

By adhering to the general WCAG recommendations, browsers and devices will support disabled users in the best possible way, so they won’t need a separate accessibility plugin to configure settings specifically for your website (these accessibility widgets also add clutter to the page and can be confusing to many people).

For instance, here’s a screenshot of Windows 11’s contrast theme settings that will be applied to all web pages:

Windows 11 accessible contrast themes

5. Test Your WordPress Site for Accessibility

There are two ways to test your website for WordPress accessibility — I recommend that you use both methods:

  1. testing it with a keyboard and different kinds of assistive technologies such as text-to-speech apps and screen readers
  2. using accessibility testing tools, e.g. WAVE, axe, or Lighthouse

It’s important that you:

  • run the accessibility testing tools in Incognito mode
  • test both the desktop and mobile versions of your website

For example, here’s Lighthouse’s accessibility audit for my Blocksy test site — it scored 100/100 for both desktop and mobile:

Blocksy accessibility test results in the Lighthouse web performance tool

Conclusion

Making your WordPress site is a multi-step process that starts with choosing an accessible theme, involves creating accessible content and design, and ends with careful testing.

However, WordPress accessibility is not something that you do once, then forget about it. 

To ensure long-term accessibility, you need to stay consistent, keep following the principles of accessibility, and regularly test your website.

Editor’s note: This article was the second part of our WordPress Accessibility series. It covered how to create an accessible WordPress site, including the WordPress core, themes, plugins, the Gutenberg editor, and accessible content. Check out the first part, too, which discusses website accessibility in general that applies to both WordPress and non-WordPress websites.

Anna Monus
Anna Monus

Anna Monus is a professional technical writer and editor, covering web development, programming, cloud computing, tech culture, accessibility, and more. Her work has been published by leading tech blogs and publications, including IBM Cloud, Envato, Raygun, Hongkiat, LogRocket & others. See more on her website or Twitter @azaleamollis.

Articles: 2

Leave a Reply

Your email address will not be published. Required fields are marked *