How to Use the WAVE Web Accessibility Evaluation Tool
Getting started with automated web accessibility testing
For my capstone project during my software engineering immersive course with the Flatiron School, I used the WAVE accessibility evaluation tool. The target audience for my project was individuals with disabilities so I wanted to ensure my app was accessible. This tool, in addition to regularly doing manual checks, allowed me to create a final project that is accessible and helped me to further learn about writing accessible code.
Using the WAVE Chrome Extension
The WAVE tool can be run at the WAVE homepage or by installing their chrome extension. Note that the WAVE tool is a tool, it still requires interpretation and an understanding of accessibility by its user. With a project open that you would like to test, open the chrome extension (mac shortcut: command+Shift+U). You will now see a sidebar with a summary and inline icons at the location of WAVE’s findings.
Wave Summary Findings Categories
Errors: Issues that do not meet WCAG standards and will impact users with certain disabilities
Contrast Errors: Text that does not meet WCAG contrast standards
Alerts: Elements that may cause issues, you will need to interpret these and decide if the impact is relevant or not.
Features: Elements that can improve accessibility if used correctly. It is important to check that these are being used correctly.
Structural Elements: Identifies the structural elements of your page. Seeing these structures can help you identify issues that can affect accessibility such as a footer not in the correct location of the page or skipping of headers.
ARIA: Identifies where ARIA attributes have been used. Note that ARIA when used correctly increases accessibility. However, when used not correctly ARIA attributes can make your page less accessible.
Interpreting Icons
If an icon is greyed out, this indicates that the element is hidden. You may also see an element with multiple icons. You can switch styles off to easily see the page's elements and what icon is for each part of an element. Clicking on an icon will display a short explanation of what the icon is indicating. From here you can click the references to see more about the potential issue or code to see the element within the code of the document.
Contrast
WCAG level AA requires a contrast of at least 4.5:1 for normal-sized text and 3:1 for larger text. Clicking on a contrast icon will display the contrast in the sidebar. Here you can adjust the lightness of the foreground and text to see what it would need to be to meet contrast requirements. Note the WAVE that manual checks are still needed for contrast as images with text or elements with background gradients will not be recognized by WAVE.
Accessibility Decisions in my Project
Throughout my capstone project, I used the WAVE tool to help me make UI decisions. I found this helped me to make smart choices with my color palette and steered me towards using component libraries.
Contrast
I had originally planned to have a light orange as my primary color. Once I got into applying that to elements the WAVE tool indicates that the contrast did not meet WCAG standards. I adjusted to using red instead of orange and found it passed accessibility checks much more reliably and still fit with the design I had in mind.
Material-Ui
I knew that I wanted to include a number of forms and styled buttons in my project. I started by coding it out myself each time and found when I used the WAVE tool some of these elements were displaying errors. I made the decision to use Material-Ui for these elements and components so I could have a consistent design and also take advantage of the accessibility already built into Material-Ui.
