Web accessibility testing can seem like a tedious task, especially if you don’t know where to start. We have already discussed why web accessibility is important in a previous post, if you haven’t read it yet, it is a good place to start.
Getting started with web accessibility testing can be made easier by using tools, we will look at 3 of them.
W3C Markup Validator
This tool isn’t directly testing web accessibility, but it does check to see that a page is coded correctly and conforms to HTML standards. One of the most important aspects of accessibility is making
sure a page works as it is suppose to. By eliminating syntax errors and assuring your code meets standards you will avoid creating many of the basic accessibility issues resulting from bad code.
To use this tool visit the W3C Validator, input your HTML or a link and click the ‘Check’ button. Once completed you will see a breakdown of your code. All errors must be eliminated, the tool provides feedback on how to fix the issues or where to start looking for a solution. Warnings may also be found, these issues aren’t as significant, but should be resolved if possible.
Chrome Accessibility Developer Tools
Chrome has great developer tools, a good addon is the Accessibility Developer Tool. After downloading this tool it will be added to Chrome. To use it you need to click View -> Developer -> Developer Tools, once opened click on the last tab ‘Audits.’ On the Audits tab you should see Accessibility, make sure it is checked and ‘Run’ the audit.
The results will be displayed within the tab, some issues found with the Markup Validator will also be found here. Severe issues will be labelled in red and will be the highest priority, these must be fixed. Moving down you will see warnings, these issues should be resolved if possible. The green labelles are tests that have passed, it might be helpful to take a look at them to see what you have done right.
Color Contrast Analyzer
Colour Contrast Analyzer is another Chrome plugin that can help with web accessibility testing. This tool helps you test color contrast within pages, it can analyze the whole page or only specific sections.
To start with this tool you need to download it. Once it is installed into Chrome you can click the icon on the toolbar beside the Chrome Hamburger Menu, it is three overlapping circles. When the tool is clicked a menu will drop down, select ‘Capture Page Region’. This will show an expandable square, move it or reshape it to select the area you want to test, click ok.
A new tab will open with options along the top, select your standards and press ‘Scan.’
The results will take some time to be calculated. Once they are done you will see your selected image, it will be darker with some white highlights. If there is a white highlighting around the text it means that it has good contrast. If there are no highlights it means the contrast is bad and maybe difficult to read.
Color contrast issues may be difficult to resolve, as the design and colors have already been selected. This might be an issue to bring up with the designers, but it is better to avoid these issues by considering accessibility from the start.
The tools described here are not a comprehensive set for discovering all the potential accessibility issues you will encounter, but they are a good place to get started.