WordPress 6.1 "Misha" has been released, and with this new release, Matt Mullenweg mentions that the team added more than 60 accessibility improvements. After going through the list, I couldn't help but notice that most of those improvements were made to the Admin dashboard rather than the site's front pages. But there are reasons for this.
The WordPress team can make themes like Twenty Twenty-Three fully WCAG compliant, but what they cannot do is control themes from third parties. And as of today, there are more than 10,000 free themes in the WordPress public directory, and more than 10,500 premium themes on the Themeforest marketplace.
Would you like to bet on how many of those themes are not compliant with the latest WCAG standard? The answer is - a lot. Chances are that if you're running a theme that was created 2-3 years ago, it will fail even for the most fundamental checks like color contrast and alt attributes for images. As was reported by The Web Almanac report.
Is fixing accessibility issues with a plugin viable?
Interestingly, even Google is starting to look at alt text & accessibility as one and the same. This report from the Search Engine Journal explains why Google wants webmasters to tag their images properly, and accessibility is high on that list. But outside of images, you also have things like color contrast, animations, video previews, and numerous "modern" features that aren't necessarily going to be rendered on screen readers and other assisting devices.
So in this context, a plugin can greatly improve how accessible your site is, particularly for people who need those features or otherwise they can't engage with your content.
The following plugins are what you can use to enhance the accessibility of your WordPress site by a significant margin. And, if you already have some accessibility features implemented, you may not need an entire suite of a plugin, as a number of the plugins below provide more nuanced features that focus on specific accessibility issues.
How to test your site for accessibility issues?
Taking into account, everything said above, you might be wondering how to check whether or not your WordPress site is accessible. And the good news is that, in most cases, there should be minimal problems as long as the theme you're using is built using semantic HTML tags.
<!-- Non-semantic HTML code (Bad) -->
<div role="site-banner">
<div role="site-navigation"></div>
</div>
<!-- Semantic HTML code (Good) -->
<header>
<nav></nav>
</header>The tool that I recommend using for checking accessibility issues is the WAVE Web Accessibility Evaluation Tool from WebAIM. You can enter any URL and get a quick overview of issues like image alt text, contrast, labels, and other recommendations.
Once your report is generated, you can hover over individual elements on the website you analyzed to check for recommendations and clarifications on specific errors. The nice thing about a visual evaluation tool such as this is that it really goes to show that accessibility isn't the "monster" it is made out to be. There will always be room to improve, but as far as WordPress goes, most problems arise from customization rather than the platform itself.
1. One Click Accessibility
As far as complete solutions go - this one gives your readers an easy way to manage their preferences for text, color contrast, and font readability. It works as a sidebar widget that you can customize (where to place it), but also enable or disable specific features.
It's also a nice alternative if you're looking for a way to enable dark mode (or high-contrast mode), but also vice-versa since not all themes are built with both color schemes.
Here are the settings included in the toolbar:
- Font resize. Increase or Decrease text size.
- Grayscale.
- Contrast. Enable High or Negative contrast.
- Link Underline.
- Readable font. Users can change to a readable font if that's their preference.
And the general settings from the admin dashboard let you customize outline focus, skip to content for screen readers, target attribute removal, and landmark roles for links.
2. Accessibility by UserWay
UserWay also provides a sitewide widget that users can use to enable various accessibility features. It does seem like several features are locked behind their Pro version, and you also have to create an account with their platform upon activating the plugin for the first time.
That said, the free version provides plenty of ways for your readers to make your site content more accessible on a visual level and text.
If you know for sure that your website will be visited by people who need strict accessibility features - UserWay's plugin provides several good choices. For example, the Reading Mask feature you see in the GIF above.
Here is the full list of features (in the free version):
- Fonts. Let users change to legible fonts or enable Dyslexia-Friendly typeface.
- Contrast & Saturation. Various levels of color contrast and saturation.
- Link highlight. Users can enable all links to be highlighted in high contrast.
- Pause animations. One-click solution to pause all animations.
- Cursor. Change to Big cursor, Reading Mask, or Reading Guide.
- Text. Line height, Text alignment, and Text spacing.
You can select a custom toolbar style and color from the admin dashboard. You can also customize the position of where you want the toolbar to be displayed.
3. WP Accessibility Helper
The WAH plugin lets you build and design your own accessibility toolbar from scratch. The features found in this plugin include things like font settings, with the ability to set custom font options and sizes.
For Contrast settings, you can add multiple variations (e.g. White, Dark, Gray). You can also enable features to make it easier for your readers to see links and add a role="link" tag so that screen reader users can properly interpret your links.
These are all free features. The Pro version adds additional features such as title highlighting, monochrome and sepia styles, icon-based buttons, and various controls for managing line height and letter spacing.
4. AccessibleWP
Like other solutions, the AccessibleWP plugin also adds a toolbar to your site, which users can then use to change their accessibility preferences. By default, this plugin provides options such as keyboard navigation, animation management, contrast (from white to dark), text resizing, font management, and the ability to highlight titles and links.
You can customize these settings from the admin dashboard. It's possible to disable certain features, and it's also possible to adjust things like the "readable" font you want to use.
You can adjust the toolbar style by setting custom colors and positioning it on the screen's right or left side. Last but not least, you can also choose to show the toolbar on mobile devices.
5. Accessibility Press
After installing this plugin, you'll have a custom accessibility widget added to all your pages. This can be positioned as either Left or Right side. And, you can also choose to Enable or Disable the widget for mobile devices.
The accessibility features in this plugin include the following:
- Keyboard navigation
- Block animations
- Greyscale & Color inverse
- Link underline (on all links)
- Magnifier (to increase text size)
- Black & white cursor options (large)
- Title underlines and Image tooltips
You can also change the title from the admin dashboard for each of these settings. And from what I can tell, unfortunately, there is no way to disable specific features.
It's an all-in-one package.
6. wA11y
This plugin from Rachel Cherry provides two ways to evaluate accessibility issues. The first is through the tota11y toolkit, and the second is through WAVE (the tool we discussed at the beginning of the article). From the admin dashboard, you can enable either of the tools and then use them to scan your website in real time for potential issues.
If you enable the tota11y toolkit, it will add a small widget at the bottom of the pages (for administrators only), which you can then use to check for issues like headings, contrast, labels, image alt-text, but also enable the Screen Reader Wand feature.
With this feature, you can hover over any site element, such as text or sections, and the widget will show you what that content looks like on a screen reader.
Summary
Over the last couple of years, accessibility has become one of the most important topics for those who are actively involved in website building and management. When it comes to WordPress, if you stick with the default themes and plugins - you probably don't have to worry.
And if you don't, then the alternative way of fixing those accessibility concerns is through any of the plugins outlined in this article. All in all, I think there are many great options to choose from, especially if you know that you're serving visitors who need those specific features.
If you'd like to learn more about accessibility (a11y) - you can check out the official WAI-ARIA Overview site, and the WAI-ARIA basics page on MDN. Contrary to popular belief, modern HTML is semantic, and screen readers are built to respect it. So, if there are serious accessibility problems on your site, they will typically fall into categories such as color contrast, text size, and animated objects. The ARIA standard states, "The goal is not to use ARIA at all.".