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.
Table of Contents
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.
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.
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:
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:
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:
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:
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:
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, 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:
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:
- testing it with a keyboard and different kinds of assistive technologies such as text-to-speech apps and screen readers
- 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:
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 website, including the WordPress core, themes, plugins, the Gutenberg editor, and accessible content. Also check out the first part, which discusses website accessibility in general, and the third part, which looks into the four dos and four don’ts of choosing an accessible WordPress theme.
