Accessible content with Accessibility Checker by Equalize Digital

Accessibility Checker for WordPress identifies and advises on how to solve web accessibility issues according to the WCAG success criteria.

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

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.

My website's list of posts shows the number of errors in each post. Highlighted are three posts with one error. The rest of the posts look fine.
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

Accessibility Checker's indication of a missing transcript issue, with links to more information and actions such as show on page and ignore.
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.

Display of potential problem. A video without transcript will be framed with a dotted pink border and in the bottom right corner there is a thorough description of the Missing Transcript error.
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.

Screenshot from Equalize Digital showing the recommendations on how to solve the problem of missing transcription.
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.

A "missing transcription" issue is highlighted on a video, but the video has no audio, so the issue is marked as ignored.
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.

The test summary that appears after the full test shows that 85% of the tests passed and that there were 2 unique errors and 21 unique warnings to deal with.
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 🤔

Accessibility Checker's Open Issues shows lists of all issues, sorted by the highest number first. In my case, it's the ARIA Hidden attribute, which is present 315 times throughout the site.
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.

Accessibility Checker's Fast Track view shows me, among other things, that the social icon for WordPress.org has the attribute aria-hidden. I can choose to ignore this issue globally.
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.

I'm tabbing through the social icon links with my screen reader on and my browser's inspection tool open. The relevant label for the WordPress icon is present in the link.
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.

Read more about Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Bjarne is a web developer with a passion for the sustainable, inclusive and respectful internet.

With a background as a computer technician anno 1992, he worked as a programmer, sysadmin and network specialist. Today, he focuses on website carbon footprint, web accessibility and GDPR compliance.

WordPress, HTML, CSS and LiteSpeed hosts are Bjarne's favourite tools, and the open-source community is his comfort zone.

Leave a Reply

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