Accessible Wordpress themes for WCAG 2.1 websites

Web accessibility is covering quite a lot, from usage of audio and video to using colors and working hyperlinks on any device and technology. You might be using a mouse, but not everyone is able to do so.

The official WCAG 2.1 documentation contains 16,969 words, excluding subcontent. For this article, I obviously limited my research. I audited the responsive menu of eleven Wordpress themes to be able to raise awareness on the accessibility of the Wordpress website you might be building.

Divi wordpresstheme

No need to elaborate on this Wordpress theme any further: Divi is using a non-focusable element and thus the navigation can't be opened when using a screenreader, keyboard or any other non touch or mouse supporting setup.

Don't use Divi as a Wordpress theme, or be sure to get it fixed.

Enfold wordpresstheme

Divi was the only theme where the navigation could not be opened. But that alone doesn't make a navigation better.

The so-called hamburger menu within the Enfold Wordpress theme can receive focus, but the action isn't being described. Those who aren't browsing on sight will have to guess what buttons do, or guess if there is a menu at all.

And even those who are not blind but are using a keyboard (for example, bad sighted people or those who are suffering from Parkinson's disease, will have to guess if the focus has reached a specific button.

• Enfold does not have a descriptive menu-button;
• An anchor is used instead of an HTML button;
• Doesn't receive an outline or highlighting on focus;
• The navigation isn't closeable using the escape key.

Ultra wordpresstheme

The hamburger menu within the Ultra Wordpress theme is also able to receive focus, but suffers from almost the same pitfalls as the Enfold WP theme.

• no descriptive text as to what the purpose of the button is;
• no CSS outline or focus-ring;
• The focus isn't moved to the expanded menu, which will make the tab order confusing. Any following cart or account buttons will receive focus first, before reaching the expanded menu;
• The aria-expanded attribute are missing to communicate wether the menu is open or closed.

Another footnote within the Ultra theme is the way it is handling order of focusable elements. Even when the navigation is closed, it's elements can still receive focus. As a result, Success Criterion 2.4.7 (Focus Visible) isn't met.

Astra wordpresspro

The Astra pro theme is another example of a screenreader-friendly WP theme when it comes to the navigation. Although:

• The focus isn't brought into the expanded menu;
• CSS outline is missing for the sighted users, but maybe not depending on touch or mouse;
• The expanded menu isn't closable using the escape key;
• The aria-expanded attribute is present, but isn't working.

Avada wordpresstheme

The hamburger menu within the Avada WP theme can receive focus, has a keyboard focus indicator and the button has a description. However:

• The focus isn't brought into the expanded menu;
• An anchor is used instead of an HTML button;
• The menu isn't closable using the escape key.

Genesis wordpress theme

The Genesis Wordpress theme is doing a good job. The hamburger menu is created using the more semantic button element and even the right aria-attribures are present. However:

• The menu won't expand when you introduce other focusable elements between the hamburger menu and the dropdown menu;
• The menu isn't closable using the escape key.

GeneratePress wordpress theme

Although the focus-ring is missing within the GeneratePress WP theme, a semantic button is used and the aria-expanded attribute is working. When the menu is being opened, the focus is even brought into the expanded menu.

Besided the missing focus-ring the visual or motor impaired users might run into:

• Menu-items can receive focus without ever being visible;
• Although the expanded menu is closable using the escape key, focus isn't brought back to the hamburger menu button.

Menu-items receiving focus without ever being visible used to be an issue as well, but has been fixed.

Storefront theme

Although all looks good on first sight, even with the Storefront WP theme we're not completely getting there:

• The focus isn't brought into the expanded menu;

Menu-items receiving focus without ever being visible used to be an issue as well, but has been fixed.

What you can do when (not) using Wordpress

As a (web)developer, we often have quite some flexibility and freedom. Are you using one of the above or another theme which isn't accessible. Then show the world how accessible menu's are build in 7 steps.