Web accessibility evaluation tools can help determine whether a web page are accessible by identifying accessibility issues which can be automatically determined. Although tools can make assessing a web page easier and faster, checking for accessibility still requires human judgement. Using tools with human judgement will help ensure your page is as compliant as possible.
Although there are many options for each type of tool, the tools mentioned are ones we cover in our hands-on training and use ourselves.
Using the HTML_Codesniffer and WAVE evaluation tools, address accessibility issues identified by the tools
These tools identify accessibility issues by reading the code of a web page and checking it against coding techniques that satisfy WCAG 2.0.
- You should test with at least two evaluation tools because there are different coding techniques that can satisfy the WCAG 2.0 requirements, and tools may check for different code and show different results
- HTML_Codesniffer and WAVE generate results for a page and group them into types of accessibility issues:
- Errors are issues where the tool has detected that something is missing and is able to indicate what and how to fix. Resolve the identified errors.
- Warnings are items that the tool has detected as potential issues which may need to be fixed depending on the situation, or issues that need to be addressed but how to resolve them depends on the situation. Resolve all warnings that apply.
- Notices are a comprehensive list of redundant accessibility checks that a tool provides for a page. Review these to get a sense of the kinds of checks you should be doing for certain elements.
- For any errors or warnings that you don't understand or can't resolve, contact your local web support for assistance.
- In cases where the error or warning doesn't apply to the particular situation or has been addressed in another sufficient manner, a note should be made of how the error doesn't apply or has been addressed.
Check the linear text structure of a page using WAVE and the FANGS screen reader emulator
Some users, such as those who use screen readers or Braille displays, may need to change how a page is displayed to read the content on a page. Check to see how well a page works by "linearizing" content into one column, disabling style sheets which specify visual layout and formatting, and checking headings, links, and text descriptions for images.
- In WAVE, switch to the No Styles view to display the page in a linear presentation with styles disabled. Check that the content makes sense when read in linear order. Check each image to make sure there is an appropriate text alternative.
- In FANGS, switch to the Headings List view to check that headings on the page are described appropriately and structured in a proper hierarchy. Switch to the Links List view to check that links have unique and appropriate link text.
Check whether the page is keyboard accessible
Some users can't use a mouse and use a keyboard to navigate and interact with web pages. Users need to be able to access and operate links and functionality using a keyboard. As users navigate through a web page using a keyboard, links and functionality should be presented in a logical order and the element that is currently being focused on should be visually indicated.
- In most web browsers, use the Tab key to tab through a page.
- Check that all links (including linked images) and functionality (including forms, slideshow/video player controls, menus, calendars) can be tabbed to and tabbed out of, in a logical order, and that there is visual indication of where the current focus is
- In some cases, functionality may require the use of other keys (such as the arrow or Enter keys) to navigate or operate
- If there are keyboard accessibility issues you can't resolve, you may need to contact your local web support for assistance
Check the color contrast of page elements that have coloured text and/or coloured background using a colour contrast tool
Some users may not be able to read text if there is not enough contrast between the text and background colour. If there are areas on a page that have coloured text and/or coloured background, use a colour contrast tool to check that the colours meet the minimum contrast ratio requirement.
- Using a colour contrast tool, enter the colour values for the text and background colours to find out whether the colours have enough contrast (AA Compliant). If you do not know the exact colour values for your colours, use a colour picker tool.
Check that audio and videos on the page are accessible
- Ensure that audio have transcripts
- Ensure that videos have transcripts and captions. If a video is only hosted on an external service (e.g. YouTube), provide transcripts and captions if they are supported by the service.
Check that documents linked to on the page are accessible
- Ensure that documents are accessible using techniques outlined in the Designing Accessible Documents course offered by the Centre for Staff Development & Technical Learning, or the Inclusive Design Research Centre's Accessible Digital Office Document Project website. Some authoring tools have an "Accessibility Checker" feature that identifies possible accessibility issues.