WAVE Accessibility Report

Aysan opens a new window recently wrote about accessibility testing in Rails applications opens a new window using your test suite to ensure that your application is accessible to all users.

However, you may not have a test suite in place or you may not have a Rails application, but you still want to test the accessibility of your web application, right? So, we discovered the WAVE Web Accessibility Evaluation Tools opens a new window that can help you test the accessibility of your web application, regardless of the technology stack you are using.

Does this sound interesting to you? Let’s dive in!

What is WAVE?

WAVE opens a new window is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guidelines (WCAG) opens a new window errors, facilitating human evaluation of web content.

How to Use WAVE

Just visit the WAVE report opens a new window page and enter the URL of the web page you want to evaluate. WAVE will then analyze the page and provide you with a detailed report of any accessibility issues it finds.

Or even better, you can install the WAVE Chrome Extension opens a new window to evaluate the accessibility of any web page you visit. Having the extension installed will allow you to run the WAVE report on any page with just a click of a button. It’s that easy!

Understanding the WAVE Report

Let’s take our homepage as an example. This is what the report looks like for the FastRuby.io opens a new window homepage:

As you can see, the WAVE report provides a summary of the errors, alerts, structural elements, contrast errors, features, and ARIA found on the page.

Here is the detailed breakdown of the report:

if you compare Aysan’s results opens a new window with the list below, you’ll see the same reported issues, however, the WAVE report is more detailed and it is user friendly since we are using an interface to click on the error and see more information about it.

• 4 Errors:
  • 1 x Missing alternative text for images
  • 2 x Missing form labels
  • 1 x Missing document language
• 7 Contrast Errors:
  • 7 x Very low contrast
• 3 Alerts:
  • 1 x Skipped heading level
  • 1 x Redundant link
  • 1 x Noscript element
• 50 Features:
  • 6 x Alternative text
  • 29 x Null or empty alternative text
  • 3 x Linked image with alternative text
  • 11 x Form label
  • 1 x Language
• 25 Structural Elements:
  • 5 x Heading level 1
  • 13 x Heading level 2
  • 1 x Heading level 5
  • 1 x Ordered list
  • 1 x Unordered list
  • 1 x Header
  • 1 x Navigation
  • 1 x Main content
  • 1 x Footer
• 74 ARIA:
  • 6 x ARIA
  • 29 x ARIA label
  • 1 x ARIA tabindex
  • 3 x ARIA button
  • 30 x ARIA hidden
  • 5 x ARIA expanded

How to Fix the Issues

Now that we have a detailed report of the accessibility issues on our web page, I’ll fix the first error found by WAVE: “Missing alternative text for images” as an example.

As soon as you hover over the error icon, it will highlight the element on the page that has the issue. In this case, the error is pointing to the background map image on the FastRuby.io homepage.

if you click the info icon, it will take you to the Reference section where you can find more information about the error and how to fix it.

So, as the Reference section suggests, I added an alt attribute to the image tag with an accurate and succinct description of the image.

- <%= image_tag "map.png" %>
+ <%= image_tag "map.png", alt: "Background of the FastRuby.io's Address Map" %>

After making the change, and pushing the code to production, I re-run the WAVE report and the error is now gone.

I will continue to fix the other errors, alerts, contrast errors, and features found by WAVE to ensure that the FastRuby.io homepage is accessible to all users.

As for the structural elements and ARIA, they are not errors but rather features that are present on the page. However, it is important to ensure that they are used correctly to enhance the accessibility of the page.

Conclusion

I hope you found this article helpful and that you now have a better understanding of how to use the WAVE accessibility report to test and fix accessibility issues on your web page to make it accessible to all users, regardless of their abilities.

Big shoutout to the WebAIM opens a new window team for creating such a useful tool!

Ready to take your application’s accessibility to the next level? Send us a message! opens a new window