WAVE Accessibility Checker
What is WAVE?
WAVE is a browser extension that assesses a web page for accessibility barriers. The errors that it reports are aligned with WCAG 2.1. It's ideal for quick spot-checks in HTML pages.
The same technology behind WAVE is used by PopeTech, which is a whole-site scanning tool licensed for use by the university. WAVE is recommended by the Office of Information Technology.
Limitations
Not all accessibility errors can be found with an automated checker. Additionally, WAVE can’t scan PDFs, and isn’t ideal for complex web applications. View our other Targeted Accessibility Guides (TAGs) for recommendations on other ways to find and remediate accessibility barriers.
How to install WAVE
WAVE is available from WebAIM as an extension for Chrome, Firefox, and Edge browsers.
- Install WAVE for Chrome through the Chrome Web Store.
- In the Chrome Web Store, click “Add to Chrome”, then click “Add Extension” in the pop-up dialog box.
- The WAVE icon should now show in the top right corner of Chrome, and you’ll see a dialog box indicating how to use the extension.
- If you don’t see the WAVE icon, check for available extensions by clicking on the puzzle piece icon near the top right corner of Chrome (tool-tip “Extensions”)
- In the list of extensions, you can click the “Pin” icon beside the listing for WAVE to ensure WAVE always shows.
How to install WAVE for other browsers (from WebAIM, a trusted source)
Getting Started
WAVE will add markers to the page indicating accessibility features, barriers, and potential issues that it finds. This visual preview allows you to get an idea of where problems are. A sidebar on the left will outline the results.
The main things to look for are “Errors” or “Contrast Errors." Click on the “Details” Tab (or “View Details” button) to get more information.
“Alerts” and “Features” are not always problems, but in some cases you may need to consider specific manual checks. “Structural Elements” and “Aria” are not classified as problems, but help you confirm that pages that look usable are also accessible.
Details tab
The Details Tab is the place to check for problems. These will be listed in general order of severity:
- Errors
- Contrast Errors
- Alerts (not quite errors, but still something to check)
- Features (which often require human judgment to determine if there are any accessibility barriers)
Checkboxes: Elements in the Details Tab have checkboxes that may be checked or unchecked. Unchecked elements won’t show a marker in the page preview on the right. You can toggle checkboxes to make it easier to find markers in regions where there are lots of problems. You can also hide Features and Alerts while you focus on Errors.
Corresponding icons: Checked elements will show the icon corresponding to the marker in the page preview on the right, and a “More Information” icon. You can click on the icon in the Details Tab to make the corresponding marker “blink” for a couple of seconds, making it easier to see visually.
More info: Clicking on the “More Information” icon (stylized as the letter “i” encircled) beside the element’s marker icon will switch to the “Reference” Tab and bring up helpful information specific to that element.
What to look for
The list of things that can show up as errors in WAVE is quite extensive and every fix has the potential to make pages better by removing accessibility barriers, and sometimes also improving pages’ usability.
Missing alt text
One of the most common accessibility issues is images and other non-text web page elements that lack proper textual representation: alt text. Missing alt text is most commonly flagged as an Error in WAVE, but can also show up in Alerts or Features.
When WAVE flags an image missing alt text as an Error, that means the image tag in the page’s HTML lacks an “alt” attribute which would provide an important textual substitute to assistive technologies.
When WAVE flags an image with “null or empty” alt text as a Feature, that means the image tag in the page’s HTML has an alt attribute that is empty. In some cases, this is intentional, like when the image is purely decorative.
Contrast errors
Using text with enough contrast ensures that people with partial visual impairment can use pages effectively without assistive technology, or minimal adjustment. Contrast requirements apply to the text of a page and text included in images (even when it is also provided through alt text).
The most common causes of insufficient contrast are:
- Text size: avoid making text too small.
- Text color compared to the background color: avoid using light gray and pastel colors against white, avoid manually colored text, and make sure any highlight colors are very light.
While virtually all modern browsers include an easy way to zoom in to make text and images bigger, the contrast requirements apply to the page as it is presented by default.
Empty or missing HTML features
Many Errors and Alerts presented by WAVE indicate that some HTML element, like a heading or link, is “empty.” Most often, this just means the element needs to be removed. Stray empty tags are a common by-product of collaboratively editing documents. While these errors individually create minor accessibility barriers, they can quickly pile up to a significant nuisance.
Similarly, WAVE will give an Error or Alert when HTML tags are present that require some complementary feature to make them accessible.
Examples:
- Form elements that have no label. In this case, the “label” is information indicating what the field is used for, so it is possible that the information exists in the page, but isn’t part of a label tag, or the label isn’t properly associated with the text field.
- Table headers. Data tables require headers for accessibility: header rows and header cells.
Since these errors occur in the HTML, you may need the help of a web developer to fix them.
Tip: the “More Information” provided by WAVE will help you figure out what has to be addressed for Errors and what to consider before ignoring an Alert. The other Targeted Accessibility Guides (TAGs) are another resource to get more information about different Errors and Alerts.
Check your work
After fixing any issue, reload the page in your browser and run WAVE again to verify the change.
What to check manually
There are a number of issues that WAVE may list as an “Alert” or can’t detect at all. For example, if there are no section headings on a page, WAVE will flag that as an Alert. However, if some section headings on a page are properly tagged but others are just normal text with a similar style to headings then WAVE won’t give an alert since it can’t tell that styled text should or shouldn't be a header.
Using WAVE and learning more about accessibility requirements and barriers from the guidance it provides will help you build skills for identifying potential issues and understand the critical features needed to make HTML pages accessible.
Headings
Every page should have section headings. Section headings are HTML tags (such as <h2>) used to organize long documents and skip to different parts of the page. Section headings work with assistive tech like screen readers to provide that same functionality, no matter how people experience the information.
WAVE will indicate structural elements like headings with a marker to make it easier to spot-check documents. If you find something that is styled like a header (larger text, sometimes bold), but doesn’t have a corresponding structural marker, that means it isn’t properly tagged as a header.
There are also some basic guidelines to using headings to ensure using them to navigate the document is reasonably consistent. The Libraries' Web Style Guide provides advice about heading structure.
Keyboard navigability
One way to ensure all parts of the page are navigable with a keyboard is to simply "tab" through the page. This will give you a sense of several important accessibility considerations:
- Navigating by keyboard should enable access to everything in a page.
- People navigating by keyboard should be able to understand where they are on the page.
- The page’s linear order (for keyboard navigation and for screen readers) matches the intended reading order.
To check this from any browser:
- Load the page in your browser.
- Press the Tab key: the focus should move to the first link or form element on the page. (On some Mac computers this may be both Control and F7 instead. You may need to adjust some settings.)
- Keep pressing the Tab key, and pay attention for the following issues:
- Do you lose sight of the focus? There should be a visual indication of which page element has focus.
- Does the focus skip around in an unexpected way?
- Do you get stuck in a loop?
If you can get to the bottom of the page just using the Tab key, and none of the three issues (3a-c above) present themselves, then you likely have a page that can be reasonably navigated with a keyboard.
Other things to check for to be certain a page is more navigable:
- One of the first things that gets focus while tabbing through should be a “skip navigation” link, and following this link should take focus to the start of the main content for a page.
- One of the last things that gets focus should be a link that returns to the top of the page or main content.
- These links don’t have to be visible until they receive focus.
Finding hidden elements
Sometimes, you might see that WAVE flags an error or feature that seems to be invisible. There are two ways to expose elements that are hidden on a page:
Use the “Styles” toggle in the sidebar. This toggle removes CSS (Cascading Style Sheets) for the page preview, so all elements should be visible.
Open the Code view. Click on the “Code” tab at the center-bottom of the page preview. This exposes the HTML for the page.
With either or both of these options activated, clicking on the marker icon for a hidden element in the Details tab should now focus or highlight a corresponding marker.
Data sensitivity
WAVE is recommended by NC State University OIT. It does not transmit data about what is being scanned. However, it is a third-party product; it should not be used with pages containing highly sensitive information (Ultra-sensitive “purple”, or Highly Sensitive “red”). WAVE is always fine to use on pages that are publicly available, not requiring login. Please consider the sensitivity of the data on a page before using WAVE on a page you have to login to access.
Check extension permissions
While WebAIM is a trusted and reputable organization, it is recommended to check the extension permissions after installation.
- Right click on the WAVE extension icon and click “Manage extension”
- Scroll down to “Site access”
- Change the default permission: “Allow this extension to read…” option should be “On click”
Unpinning WAVE
If you work with sensitive data regularly, you may want un-pin WAVE from your toolbar (something you can do in the extensions or plug-ins page of your browser settings). This just reduces the chances that you’ll accidentally activate WAVE on a page with sensitive data.
More resources
- Other TAGs from the Accessibility Committee
- Wave Documentation explains what the different markers mean