What is the WAVE Tool?
The Wave tool is a great tool to check your website's accessibility, and it also provides a wealth of information about the code that goes into your site. WAVE is a Web Accessibility Evaluation tool. It is used by developers to check their work on a website, and make sure that your site is passing some basic, computer testable accessibility standards. The WAVE tool is not able to tell you if your content is accessible though, only human testing can tell you that. If focuses on issues that are known to impact end users, in an attempt to educate and inform about Accessibility.
Using the WAVE Tool
The WAVE tool can be used in a couple of different manners. You can visit the page directly (http://wave.webaim.org), and enter your web site URL in the text field on the middle of the page.
This should bring up your website, with a fair amount of icons and additional information being provided into the site.
Understanding the results of a WAVE Test
The WAVE Results are summarized for you, into 6 categories, 3 of which are negatives that you should consider looking further into and correct, and 3 are more informational giving you a chance to review the items and make sure they are correct.
Please keep in mind though, the absence of errors or alerts does not guarantee that your site is compliant. Only a human can check fully for accessibility.
-
Red – ERRORS:
These are things that fail the WAVE test and will likely disrupt the accessibility of the site. The Goal of your site should always be to get the Errors to 0.
-
Yellow – ALERTS:
Alerts are items that they recommend you look further into the site. For some reason, the tool saw some things that could potentially cause on issue on your sites accessibility. These are items that you should look into, and see if there is anything you can do to correct the item, thought they do not mean that your site does not meet WCAG 2.0 AA, WCAG 2.0 AAA, or Section 508 compliance. These alerts should be as close to 0 as possible.
-
Grey – Contrast Errors:
Contrast applies to individuals who may be color blind, or who may be visually impaired but not blind. This lets you know if there are any color combinations on your site, that maybe difficult for persons with visual impairment to read. The tool also provides an analysis tool with different recommended Font Sizes, and the chance to enter in different color combinations to see if it would meet the minimum contrast needed to stay compliant ( https://webaim.org/resources/contrastchecker/ ). These should be as close to 0 as possible.
-
Green – Features:
Features are a good thing through this tool. These are items that will most likely improve accessibility, but they should be reviewed and make sure they are displaying accurate information. Examples of these would be Alt Tags on your images, which provides an alternative text for your imagery that a screen reader can read to describe the content of the image to the user. They are shown here so you can quickly, click through these features and make sure that they are providing relevant information.
-
Blue – Structural Elements:
This lists out elements within the HTML code-base, that could affect accessibility. Common examples of this could be headline tags, or lists. Both of these items should be used in a specific way, so the WAVE tool is providing you quick access to all of those elements, and information about how to correctly use those elements. Determining that these elements are being used in the correct context, is not something that the WAVE tool is able to determine at this time, so it is up to the developer to review and confirm they are being used appropriately.
EX: It could flag an unordered list (a bullet list), and provide you with information about when to best use unordered (bulleted) lists vs when to use an ordered list (numbered). It would then be up to the person reviewing to make sure that the correct type of list has been implemented based on the content being presented.
-
Pink – HTML5 and ARIA:
HTML5 introduced a new set of tags to help the sites with accessibility. It also introduced Accessible Rich Internet Applications (or ARIA), as a means to make more feature rich portions of the web more accessible to those with disabilities. ARIA enables more accessible navigation landmarks, JavaScript Widgets, form hints and error messaging, live content updates, and more. The WAVE Tool groups all of these items together, and provides quick access to them, along with a documentation of how they should be used for human review to make sure they are being used properly.
False Positives and Browser Differences
Sometimes, this tool can show different results, and report different issues based on which browser you are using (Firefox, Chrome, Safari, Internet Explorer and Edge). Sometimes some of these errors and Alerts are false positives, such as when testing in Microsoft Edge.
In Microsoft Edge, there are a set of Alerts with the Icon Navigation, that say the text shouldn’t be underlined unless they are links. They are links though, so this is an example of a false positive that doesn’t appear in all browsers.
With these subtle nuances between the browsers, it is impossible to get a “perfect score” across all of the browsers. We recommend testing between all of the browsers, and using your best judgement. If there is anything that is concerning when doing the tests, please do not hesitate to reach out to your FedComp representative to help take a look and interpret the results.