Web accesibility: How to carry out a quick WCAG audit

We have previously talked about the importance of making your website accessible to everyone. In this article, we will go one step further and show you the practical steps you can take to ensure that your website meets the basic requirements to do a quick WCAG audit. It is essential to ensure that your website is accessible, thus becoming an opportunity to create a positive impact on society and reach all users, regardless of their needs.

What is needed to be able to do a WCAG audit?

To carry out an audit, you need to have the WCAG guidelines at hand. In this link, there is a quick reference guide (in English) by the W3C. Although it is called a ‘Quick Reference Guide’, the page provides substantial information; there is a lot of content and links which expand upon the information.

Directrices WCAG para asegurar una buena auditoria de accesibilidad en tu sitio web

In addition, we also need a document that allows us to check whether the different guidelines are complied with or not. For this, we can use this online report tool provided by the W3C.

WCAG-EM Report Tool

Step 1: Sample and level

Once we have the documents, we need to select which pages we will analyse and at which level. The usual level is AA, the standard level for web pages.

WCAG-EM Report Tool

It is recommended that a minimum of 3 pages (that are different from each other) are analysed. For example, the home page, an internal page (which can be a product page, a blog entry, a team page…), and a contact page. If it has a form, even better. We will indicate these pages in the tab “3. Select Sample”. It is necessary to indicate the name and URL.

WCAG-EM Report Tool

Once we have selected the sample, we can go to the “4. Audit Sample” tab to start the WCAG audit.

Step 2: Review guidelines

In the “4. Audit Sample ” tab, we are presented with a series of guidelines ordered by number and with a selector and text area.

audit and select sample

The guidelines are divided into 4 principles:

  1. Perceptible
  2. Operable
  3. Understandable
  4. Robust

If you look at each guideline, they are identified by a number, for example, “1.1.1: Non-text Context”. This number matches the WCAG guidelines on the quick reference page. Each guideline is always associated with the same number.

So, in this code, we find that:

  • The first digit indicates the principle, in this case, the first one: Perceptible.
  • The second digit indicates the guideline, in this case, the first one: Textual alternatives.
  • The third digit indicates the success criterion and identifies the name of each guideline we have to analyse, in this case, the first one: Non-textual content.

On this tab, we must select all the checks on “Add results for pages” on the left sidebar. This way, all pages will appear on each criterion. Now we must check if the requirements for each guideline have been met and set the result accordingly on the selector “Outcome”:

WCAG audit

The result can be:

  • Passed: The success criterion has been checked and is met. Only check if the requirement is fully met.
  • Failed: The success criterion has been checked and is not met.
  • Cannot tell: If the document is being filled in by different people, each person may be responsible for checking specific guidelines. If something is not within the scope of the person completing the document, it is marked with Cannot tell and then completed with the results of the other reviewers.
  • Not present: The standard does not apply to that particular website, possibly because it does not have the element to be analysed. For example, it is common to mark with Not present criteria that apply to videos when the page does not have videos.
  • Not checked: Indicates that a criterion has not yet been checked.

To help us complete the review, we can use several accessibility analysis tools:

  • TAWdis: This is an online tool that performs an automatic analysis of the page you enter. It will create a technical report of the guidelines in order, although there will be some that have to be reviewed manually. It is a good starting point
  • WAVE: This is an extension for different browsers that indicates structural elements, alternative text, contrast (in colour code, not in images), and other elements susceptible to error visually.

Step 3: Compliance

The final step, after selecting an Outcome for each criterion, is to click on “View Report”. On the next page, after some scrolling, there will be a section called “Detailed Audit Results” in which we can see if the website passed all criteria.

view report WCAG audit

If there are any failed criteria, they should be addressed. After updating the site to add accesibility measures, a new audit must be made to ensure that the issues have been resolved.

Web accessibility is a commitment to inclusion and equal opportunities. By following these steps and performing a good audit on your website according to the WCAG guidelines, you are contributing to a more accessible online world for everyone. At Itequia Design, we value the importance of accessibility and we are here to help you in this process. If you have any questions or need additional assistance, don’t hesitate to contact our team. Together, we can make the web a better and more inclusive place for everyone.

Subscribe to our newsletter

    How can we help you?