In this article I want to bring up an important topic. Can a theme be compliant with WCAG, and how do we test it?
This article is an overview of what is a wide and complicated topic. I am not going to be able to cover everything, and this article assumes that you have a basic understanding of what WCAG is.
Recently I was approached by a wonderful lady who wanted to know if there was a WCAG compliant WordPress theme that she could recommend to her clients who needs an accessible website.
So can a theme be compliant with WCAG?
The answer is no. It is not possible for a theme to be fully compliant with WCAG, only partially. You can find the answer in the name of the guideline:
Web Content Accessibility Guideline.
This is why we in the WordPress community often use the term accessibility-ready instead.
WCAG covers both content, functionality, navigation, layouts and colors.
-But a theme is not content aware.
It is only possible to test if a website where the theme is installed is following the guidelines.
You can see the dilemma here.
You don’t want accessibility to be an afterthought, where it is not considered or tested until the website is ready. To avoid delays and to avoid having to make drastic changes to your website last minute, accessibility needs to be part of your process from the beginning, and every time you add new content.
A theme developer needs to make sure that their theme works with a wide range of different types of content. Even if you design a theme for a blog, someone may still want to use it for their webshop, and the theme should just work.
Partial compliance and shared responsibility
You can consider the theme a wrapper for the content. A theme typically has a header, main menu, footer, perhaps a sidebar, and a content area.
The theme brings the layout and adds functionality to all areas, but the content area is the site owners, not the themes.
Menus and modals
The theme may have one or more menus, as well as responsive versions of those menus.
The menus likely display sub menus and have a toggle button for the responsive mode. The theme must make sure that the menus and buttons work well with the keyboard only and on different devices.
But it is up to the site owner to make sure that the navigation is understandable and consistent, and that link texts are relevant.
Modals are common in WordPress themes. They can be used to open additional menus, sidebars, a shopping cart, or a search form.
All users needs to be able to access the modal. They need to be able to navigate inside of it, and they need to be able to close it.
For keyboard users, the focus should remain inside the modal, and the modal should not be closed until the user actively chooses to close it.
Multiple ways to access content
- Search -A theme may have an option for adding a search form, or one can add a search form using a block or a widget. This responsibility is shared between the site owner and the theme.
- Post navigation -A theme typically has navigation for archives and for single posts.
- Site maps -Some themes may have additional functionality for displaying site maps, but a plugin is often needed. This responsibility is shared between the site owner and the theme.
- Bread crumbs -Some themes may have additional functionality for displaying bread crumbs, but a plugin is often needed. This responsibility is shared between the site owner and the theme.
Skip links and repetitive content
The theme is responsible for including a skip link so that visitors can go directly to the content.
The theme is also responsible for making sure that repetitive links like “read more” and “Edit” have context and that the link text is unique. For example by including the title: “Read more about (title)”.
There are 3 kinds of forms that are technically included in WordPress, but controlled by the theme:
- Search form
- Comment form
- Drop downs for accessing categories or pages
The theme must ensure that there are clear, understandable labels, -preferably visible labels, for all forms.
This is a shared responsibility between the theme and the site owner. If the site owner adds more forms, like a sign up form or a contact form, then those are not controlled by the theme, and the site owner must confirm that they are accessible.
Colors and contrasts
A theme can control the default colors, but a lot of times, the site owner can change these colors. When colors are changed it is the site owners responsibility to test that the colors are accessible.
Visible focus and focus order
This responsibility is shared between the theme and the site owner.
The theme is responsible for the default colors, but the website owner must make sure that the focus is visible if the colors are changed.
The website owner is also responsible for making sure that the focus is visible when plugins are added.
You may be interested in my post about improving the focus outline.
Focus order is difficult to describe. It is about making sure that:
- The visual order of elements matches the focus order and the underlying code.
- The focus moves in a logical way
For example, if there are three focusable elements, the focus order needs to go from left, to the middle element, then to the rightmost element ( on ltr ). Not from the left, to the right, and then to the middle.
This responsibility is the themes, but different sidebar settings activated by the site owner often have a negative impact on the focus order.
Alternative text for images
With the block editor, site owners now have more than one way to add alt texts to images.
They can add an alternative text in the media library, or they can add it in the editor when they add an image to a post or page.
The theme is responsible for including the alt text programatically, depending on the context.
If an image is linked and focusable, and there is no other link text, then the alternative text is also the link text, and it should describe the link target.
This is important to remember when developers make changes to the image markup.
I often see theme authors forgetting to include the alt attribute when they change the markup for featured images, or when they add decorative placeholder images. An alt attribute for decorative images should be present, but empty.
Video and audio
The most common type of video content added by a theme is a header or background. It is the themes responsibility to make sure that this type of video and it’s controls are accessible.
A new addition is that video backgrounds can be used in cover blocks.
WordPress also includes media players for video and audio content. These players are not accessible by default, and they can’t be fully accessible on their own.
It is important to note that these players are not part of the theme, and it is not the themes responsibility to make the media players accessible.
Only the site owner, who adds the video and audio content can make sure that the content is accessible and has:
- Audio descriptions
- Text alternatives
Animations and sliders
It is common for themes to include small animations that makes controls and the display of content smooth, and to increase the perceived interactivity.
It is the themes responsibility to also consider those who prefers reduced motion.
This is a shared responsibility between the theme and the site owner.
Sliders can be difficult to make accessible. They need to have the correct speed for users to be able to read the content, they need to have controls for starting, pausing and stopping, and they need to have controls for moving between slides. This is the responsibility of the theme.
It is the site owners responsibility to not choose a theme with a slider and it is the site owners responsibility to disable all sliders if they choose a theme with a slider.
Really, do not use sliders, they make content inaccessible for all visitors, not only visitors with disabilities.
WordPress theme accessibility requirements
Themes that are submitted to the official theme directory can opt-in to follow a limited set of accessibility requirements. The requirements are based on WCAG 2.0 and you can read them here: https://make.wordpress.org/themes/handbook/review/accessibility/
The themes are carefully tested, and can then be identified by a tag named accessibility-ready, that is added to the tags list in style.css.