How to Choose an Accessible WordPress Theme (Part 3)

To make your WordPress site accessible, your theme and content need to support each other. First, you’ll need to choose an accessible WordPress theme, then create accessible content.

An accessible WordPress theme can serve as a good foundation for your content that should ideally consist of well-structured, easy-to-skim text, close-captioned videos, images with text alternatives, and other accessible content elements.

To help you with theme accessibility, in this article, we’ll look into four things you should and four things you shouldn’t do before picking a theme for your WordPress site.

Four Dos on How to Choose an Accessible WordPress Theme

1. Do Start with Checking the Theme for Keyboard Accessibility

As keyboard accessibility is fairly easy to check, it’s a good idea to test it before anything else. If a theme doesn’t pass the test, it’s better not to use it.

After installing and activating a theme, hit the Tab key, and check whether:

  • a ‘Skip-to-content’ link appears at the top of the page
  • the links in the main content area are underlined
  • all the links are visible as you’re tabbing through them
  • you can access every menu item and form field (e.g. search bar, contact form) just by using your keyboard
  • the most common keyboard navigation keys work without issues

If a theme provides starter sites or demos, test the default install (with no starter site enabled) for keyboard accessibility, as this is how you can check if the theme has been built with accessibility in mind.

Blocksy test site with Tab navigation, annotated screenshot
Accessible keyboard navigation with a skip-to-content link

2. Do Understand the Color, Menu, Typography, and Spacing Options the Theme Provides

One of the most important aspects of WordPress theme accessibility is whether the theme provides you with all the necessary tools to create an accessible website.

In other words, you’ll need to understand the customization options built into the theme. While the WordPress Core adds some default options to the Customizer, most of the settings depend on the theme — and there can be huge differences between one theme and another.

While the options are located in the Customizer (under the Appearance > Customize menu), some themes provide a separate Theme Options panel, too, to help admin users find the most important settings (which also improves cognitive accessibility).

Blocksy's theme dashboard in the WordPress admin area, screenshot
Blocksy’s theme dashboard, Customizer shortcuts

To assess a theme’s options for accessibility, check:

  • what layout options you get for different post types (blog posts, pages, the search page, etc.)
  • if you can adjust the colors, typography, spacing, buttons, menu, etc.
  • if the options are structured logically and described in straightforward language

For example, here are our Blocksy theme’s color options that help you implement a fully accessible color palette:

Blocksy's accessible color options in the WordPress Customizer, screenshot
One of Blocksy’s customizable color palettes

Note: As navigation is an especially challenging part of web accessibility, you’ll need to test the theme’s menu options with extra care if you want to add a more complex menu to your WordPress site.

3. Do Test the Default Theme Design or Pre-Built Starter Sites

The default design or starter sites tell a lot about how the theme author approaches accessibility.

The demos are sometimes available online on the theme author’s website so that you can check them out without installing the theme.

As a rule of thumb, avoid treating starter sites as finished designs.

Instead, think of them as starter designs you can still tweak later using the theme’s customization options — for example, you can increase the color contrast or change the font type to a more readable one.

Accessible WordPress theme, example, the homepage of Blocksy's Garderobe starter site
Blocksy’s Garderobe starter site

4. Do Check if the Theme Uses Clean and Semantic Code

Theme accessibility is not simply about design — the underlying code base also needs to be accessible.

Code accessibility means that the code:

If you know how to read code, you can use your browser’s developer tools to inspect the page. For example, here’s our Blocksy theme’s semantic and accessible markup for the search form:

HTML code with ARIA syntax that adds an accessible search form to the page, Chrome DevTools screenshot
Blocksy’s accessible search form with WAI-ARIA syntax

Alternatively, you can use an accessibility testing tool, such as WAVE, to visualize the code:

Blocksy's accessible search form, visualized in the WAVE tool, screenshot
The same search form in the WAVE app

If you don’t want to look at code at all, you can turn on the screen reader or text-to-speech tool of your operating system or web browser, such as VoiceOver on MacOS; Narrator on Windows; or the Read Aloud feature of the Edge browser, to check how easy or hard it is to access the content with assistive technology.

Four Don’ts on How to Choose an Accessible WordPress Theme

1. Don’t Rely on the Accessibility-Ready Label of the WordPress Theme Repository

While the official theme repository at WordPress.org does have an ‘accessibility-ready’ filter, it doesn’t mean that a theme meets the WCAG guidelines at Level AA.

As the WordPress Accessibility Handbook puts it, the accessibility-ready label only acknowledges that a theme meets the minimum requirements set by the WordPress theme review team:

Screenshot from the WP Accessibility Handbook; included text: "accessibility-ready does not mean a theme meets WCAG guidelines at level AA. It means that the theme reaches the minimum standards that the theme review team has set."
Disclaimer of the accessibility-ready label in the WP Accessibility Handbook

While adhering to the minimum standards can be a good starting point, it’s better to use a more holistic approach when choosing an accessible WordPress theme.

2. Don’t Ignore Mobile and Tablet Users

Your WordPress site needs to be accessible on mobile and tablet devices, too. The best way to ensure this is by choosing a theme that comes with customization options that let you adjust the mobile design.

The biggest mobile accessibility issue tends to be the navigation, as there’s not enough space on the screen to show everything. To improve mobile accessibility, you’ll need a theme that allows you to create a separate mobile menu and fine-tune its design.

For example, Blocksy’s mobile menu options let you change the dropdown toggle icon, adjust the spacing between the menu items, and more:

Blocksy's mobile menu options in the WordPress Customizer, screenshot
Drag-and-drop mobile menu builder

3. Don’t Trust Any Single Accessibility Testing Tool or Method

To evaluate the accessibility of a WordPress theme, always use more than one method or tool to get a multi-angle overview of its strengths and weaknesses.

For example, you can:

  • do manual testing (with a keyboard, screen readers, styles disabled, etc.)
  • use online accessibility testing tools such as WAVE or Lighthouse
  • test for mobile and desktop performance with a tool such as Lighthouse or PageSpeed Insights
  • ask people with different types of disabilities to test your theme — they still might find accessibility issues that you have overlooked

4. Don’t Choose a Theme You Don’t Like Just for Accessibility

While making your WordPress site accessible is an important endeavor, don’t choose a theme you don’t like just because it scores well on accessibility tests. If it has a design that won’t engage your audience, it’s better to go with another theme.

To optimize user experience, you’ll need to find the balance between aesthetics and the different aspects of usability, including accessibility.

Theme authors can help you with that by giving you access to multiple good-looking starter sites and providing you with well-thought-out customization options that let you tweak the design.

Accessible WordPress theme, example, the homepage of Blocksy's Web Agency starter site
Blocksy’s Web Agency starter site

Summary

In this article, we looked into WordPress theme accessibility in detail.

Here’s a recap of the four dos and four don’ts of how to choose an accessible WordPress theme:

DoDon’t
… start with checking the theme for keyboard accessibility.… rely on the accessibility-ready label of the WordPress Theme Repository.
… understand the color, menu, typography, and spacing options the theme provides.… ignore mobile and tablet users.
… test the default theme design or pre-built starter sites.… trust any single accessibility testing tool or method.
… check if the theme uses clean and semantic code.… choose a theme you don’t like just for accessibility.

Finally, don’t forget that even if you have an accessible WordPress theme, you still need to create accessible content and regularly test the live site, as issues can always arise as you’re adding new content and functionality.

Blocksy is a fully accessible free WordPress theme — take a look at the features, check out the starter sites, or download it from WordPress.org and give it a test drive.

Editor’s note: This article was the third part of our WordPress Accessibility series — it covered how to choose an accessible WordPress theme. Check out the previous parts, too, on website accessibility in general (Part 1) and WordPress accessibility in detail (Part 2).

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: 8

Leave a Reply

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