WCAG compliance

What is it?

This test checks for compliance with the WCAG 2.1 Accessibility standard, the leading standard for web accessibility. Section 508 adopted the WCAG 2.0 standard in January 2018.

Levels

WCAG has three levels of conformance:

• WCAG A – the bare minimum
• WCAG AA – the recommended level for accessibility
• WCAG AAA – ideal, but even the creators of the standard concede this is not usually practical

This test automatically checks the vast majority of WCAG A and AA, and a significant portion of WCAG AAA. Some WCAG checks require subjective human judgment, and are flagged by this test for your consideration.

How to use it

This test displays a table of outstanding tasks, for your currently selected WCAG level. You can see which level applies by the colors tag (“A”, AA”, “AAA”) next to each title:

• The Priority column shows you which tasks to tackle first. You can click on the priority and change it if you wish.

• The Task column includes the name of the task, its severity (Error, Warning or Notice), the WCAG standard that it applies to (e.g. “1.4.3 Contrast (Minimum)”), a unique number to identify the task (e.g. “#37”) and when it was first discovered.
• The Issues column counts how many individual issues exist for the task.
• The Progress column measures how close this task is to being completed. This counts the number of pages that don’t have an issue against the number which still do. By fixing pages this bar will increase.
• The Inspector icon (a magnifying glass) on the far right can be clicked to view pages with this issue on, and step through those pages.

Clicking on a task will display it in more detail:

The layout of the task will vary depending on what it covers. In the above example, where text is being reviewed for contrast, issues have been grouped by their color scheme. There is also an option to view the same issues by page, by clicking the “Pages” switch.

Clicking on any issue will open that issue in the Inspector.

In the Inspector you can click on issues on the left-hand side to view them highlighted on the page. If you prefer to view the HTML code for the page, click HTML in the top-right corner.

Depending on how you reached the Inspector, you may well be viewing a series of pages. If this is the case, you will see “Page 1 of …” in the top right corner. Clicking the arrows to either side of this will move forwards and backwards through the list of pages with this issue. You can also click on this text to view all pages affected by this issue, and go to one directly:

If you are viewing filtered results, it can sometimes be useful to see other issues that affect the current page. To do so, click the “X” in the yellow page in the top right, next to “Showing filtered results”. This will clear the filter, and allow you to explore other issues on the same page.

You can filter these results yourself with the controls in the bottom left corner of the Inspector.