5 minutes reading time (952 words)

A first approach to accessibility testing


Accessibility is a key aspect of our sites and from the JAT we put our efforts into making Joomla more accessible. But Joomla is just one of the pieces in the final puzzle of your website. The final result depends on your template and other extensions you use.

On this regard we have provided in previous issues of the magazine a couple of articles with Accessible resources you may use in your Joomla 3 website right now:

Nevertheless, even using these resources in your website, the final website completely depends on how integrators put together all the pieces to develop a website and testing accessibility is paramount to allow everyone to reach and use all the features you have to offer.

So in this issue we want to offer you a quick and easy way for you to test the accessibility of your website.

Accessibility is for all but not in the same way.

Accessibility really depends on how you intend people to interact with your content and they way you handle this interaction. This means that some techniques that work fine for a website, might have the opposite effect on a different content or even on a different audience.

A quick example of this is the alt description for images. On a first glance you may think you have to use an alt tag for all your images where you describe the image, but when you read deeper you learn the alt description is only required when the image has some meaning so you can spare your decorative image of adding text to the alt attribute (in any case the alt attribute must be present with empty value). That’s fine.

Now the question is: What is a decorative image? For sure all images we add using CSS or that comes with the template can be part of this group, but how about the images that usually illustrate a blog post. These images usually have the only intention to call your reader attention to the article. Are these images useful to understand a website or just decorative? That’s probably the question you have to ask yourself when planning and testing accessibility on your website 😉.

First approach to accessibility: Using current a11y testing tools

Once we understand that each content is different, we are ready to start our testing process and for that we are going to use a couple of a11y testing tools that will help us on our first approach.

Google Chrome Lighthouse

If you use Google Chrome or Chromium browsers, you may have noticed that when you open the built in web inspection tool, there is a tab called Lighthouse. This tools allows you to create a report on several aspects of your website.

Lighthouse tool before starting a report with an arrow pointing to the Accessibility option

One of these aspects is Accessibility. When you create your report with this tool you can see how you score on a11y according to Google standards and what is more interesting, the aspects in which you need to improve:

Lighthouse report for Joomla.org web site showing a score of 95 for Accessibility

Obviously this is just our first check on the website, but improving these aspects will for sure make your site look better for people with different abilities.

WAVE Checker

WAVE checker is a popular tool to check a11y in your site. This tool is developed by the Center for Persons with Disabilities in the Utah State University and you may find Firefox and Chrome addons to easily check a11y in your website.

This tool offers you a more detailed set of issues and it classifies them according to their gravity. It’s much more visual than Lighthouse as it loads your website and places an image on every part of your page with any of these issues so you can easily see where it is:

WAVE test for Joomla.org screenshot where all issues are marked on the website with different labels

Besides that, it also offers you a detailed list with all the issues and it also shows all the a11y features that are already implemented on your website. One aspect of this tool I personally like a lot is the structure area where it shows you how your content is structured according to your markup and which I find specially useful when checking the meaning of the website.

AXE Checker

To use AXE testing tool you need to install their extension on your browser:

Once installed, this tool will add a new tab to your inspect tools in either browser and you will see a big button with the text: ANALYZE.

After analyzing your website, a list of issues will arise and you can navigate them easily from the tool and even highlight the specific elements with the issues:

Results of the AXE testing tool on Joomla.org showing a list of a11y issues to address

Different tools, different results

As you may notice when you use these tools, different tools provide different results. Lighthouse is probably the less exhaustive, but in any case it provides an easy approach out of the box (if you use Chrome browser) to see the state of your website.

AXE and WAVE provide much more information with specific links to the issues on your website and hints on how to solve them but in any case, both see the page differently so which one is best?

Here is where you need to read a bit more about the issues your site presents and think of how do you want people with different abilities to experiment your website.

In any case, please always take into account that these tools are of great help when they show you the issues, but do not blindly trust them for accessibility. In the end it’s humans who read your website and your users are the ones that need to be able to fully understand your content and use your website.

Where to find the best Joomla tutorial videos
How the Speed of Your Website Can Impact Your Sale...


Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/