Check web accessibility in the block editor

With the Accessibility Checker plugin for WordPress, you can check your content for web accessibility issues directly in the block editor and fix the errors as you create them. To my knowledge, Accessibility Checker is the only WordPress plugin that offers this option.

There is a free version of the Accessibility Checker available on WordPress.org. It is suitable for smaller websites with a few pages or articles. My blog here is a good example of a WordPress website that benefits from the free version.

For larger sites where we want to check the entire website at once, websites with WooCommerce, or websites with roles such as editors and authors, Accessibility Checker Pro is a better choice.

Accessibility Checker Pro includes full site scanning, scanning of custom post types, admin columns so you can quickly see accessibility status at a glance, centralized lists of all open issues and items ignored, and more.

Screenshots & Features – Equalize Digital

Table of contents

• Check web accessibility in the block editor
• Limitations of automated tests
• Identify posts with issues
• Errors and warnings for the current post
• See errors highlighted in context on the front-end
• Equalize Digital’s exemplary documentation
• False alarm? Ignore the error with a comment
• Overview of all errors on the site
• Tackle the most common errors with Fast Track
• List of errors with surrounding HTML
• Manual check of functionality
• Summary and conclusion

Limitations of automated tests

Around a third of web accessibility errors can be identified with automated tests. An error could be a social media logo with a link but no link text. While a normal sighted person can visually recognise a Facebook or a LinkedIn logo, a screen reader relies on the presence of link text.

A missing link text can be detected in an automated test.

Manual checks are necessary to uncover other web accessibility issues. The presence of link text is an important step, but if the link text is not descriptive, it is worthless.

Think about what click here or IMG1234.JPG tells you. Not much, right?

Identify posts with issues

After a full-site scan in Accessibility Checker Pro, the number of errors is displayed next to each post. The view here is customised to my preferences with Admin Columns.

There appears to be an error in my blog post Strengthen the security of WP with HTTP Security Headers. Let’s investigate what it could be.

View all posts with the number of potential errors in each post.

Errors and warnings for the current post

Details about errors in the post are displayed at the bottom of the block editor. The list is updated every time I press save. In my article, I have a Missing Transcript error.

The HTML code that triggers the error is displayed, which is often enough information for me to fix the error. When in doubt, I click View on page

All issues found are listed with the most serious ones first, links to more information and context.

See errors highlighted in context on the front-end

And this is where Accessibility Checker really shines. On the front-end, a pink dotted frame is drawn around the problematic element. A description of the error appears at the bottom right. There is a link to Equalize Digital’s detailed articles on web accessibility and suggested solutions. If more errors appear in the post, I can scroll back and forth.

Potential errors, in this case a “Missing Transcript”, are displayed and explained on the front-end.

Equalize Digital’s exemplary documentation

Errors and warnings are described in Accessibility Checker’s documentation – a goldmine of thorough, concrete solutions and references to relevant WCAG success criteria.

I’ve shared articles with plugin and theme developers many times. When we work together to identify and fix bugs in a plugin or theme, we improve accessibility on thousands of websites. It’s pretty amazing.

Equalize Digital provides comprehensive documentation and solutions to accessibility issues.

False alarm? Ignore the error with a comment

The video below, a converted GIF, is a cultural reference to the thieves from Olsen Banden and the expression “Bloddy good, Egon”. The video has no transcription – a text that describes any audio track in text form.

The Olsen Gang breaks into the Royal Theatre – Benny says “Bloody good, Egon”

Since the video does not affect the understanding of the article, and the audio track is non-existent, I choose to ignore the error about the lack of transcription with a comment about why.

Ignores potential issue with lack of transcription on video without audio.

Overview of all errors on the site

Errors in global elements such as header, navigation and footer are best handled from the Accessibility Checker dashboard. This is a Pro feature. Here you can initiate a new scan – on my site it took about a minute – and get an overview of how bad things are.

Full site testing shows the number of unique errors and warnings with links to all open issues.

Also note the announcement of the wordpress accessibility meetups. They are free to attend and very educational.

Tackle the most common errors with Fast Track

I select View All Open Issues and get 5 different warnings on my website. The most common potential issue is an ARIA Hidden attribute on certain graphic elements. This appears in a total of 315 locations on my website. Hmm 🤔

All open accessibility issues sorted by type.

List of errors with surrounding HTML

With the Fast Track feature, I deal with potential errors that are repeated on multiple pages. In the example below, I notice that a WordPress logo is hidden from screen readers with aria-hidden. I ignore this “issue” globally, i.e. for all 27 pages on which the logo appears. Why is this happening? Read on.

The social icon for WordPress has the ARIA hidden-attribute, which is OK in this case.

Manual check of functionality

This is where the manual review becomes necessary. A graphic will typically be described with an alt text. But in this case, the graphic is a WordPress icon and the link surrounding the icon is correctly described with an aria-label.

If I switch on my screen reader and tab through the various social media icons, the link is announced as expected as speech, with a clear focus outline around the icon.

So the Accessibility Checker helps me identify content or functionality that may have a web accessibility issue, but it’s up to me to confirm if that’s actually the case.

When tabbing through social icons with a screen reader, the destination is announced correctly

Summary and conclusion

There are a lot of great tools in the toolbox when it comes to web accessibility, and that’s a good thing. Of course, we need different tools for the different roles involved in publishing on the web.

Accessibility Checker helps identify and advises on how to solve web accessibility issues. The free version is fully functional and suitable for smaller blogs or brochure sites. For larger or advanced websites, the pro version is the obvious choice.

A “perfect score” in the Accessibility Checker is no guarantee that my site is accessible – but – having a helping hand during the actual editing of content is valuable. It makes me stop and think twice; I’m more diligent.

We all benefit from diligence, no matter how we use the internet.