Locate Accessibility Issues With WAVE

A helpful tool for optimizing websites and apps for those who use assistive technology.

Illustration of a wave.

I haven't fully optimized this site for visually-impaired users yet. Still, I have found two tools invaluable when it comes to designing with accessibility in mind:

  1. WebAIM's Web Accessibility Evaluation Tool (WAVE)
  2. NV Access' NVDA screen-reader

I'll get to the benefits of using a screen-reader in a future piece. For now, I want to talk about WAVE and what makes it so helpful to sighted developers such as myself.

Pointing out your worst best practices

It's easy to fall into a pattern of designing sites and apps biased towards actually seeing the page. For instance, as of this article's publication, I have white text over images of various colors on the main blog post feed.

This stylistic choice might be easy for sighted users like myself to see, but I have perfect vision. A user with limited vision might have difficulties seeing this text due to contrast issues, so I have taken some other precautions for them (like using text-shadow to create an area around the text that will be darker, increasing contrast while being mostly invisible unless a user is paying very close attention).

A host of accessibility concerns pop up in development that many developers and designers are ignorant of. That's where a tool like WAVE comes in. When you tell it to review a site, you will be presented with a list of potential issues and things you (probably) have done right.

WAVE's review panel displaying various issues and correct choices for danbrioli.com.

Overt errors will be listed first on the left-hand side, with other alerts below that section. This is followed by the total number of structural elements present on the page. These structural elements are essential for screen-readers and other assistive technology to interpret the page, allowing users to quickly jump from section to section, view the navigation options, and locate lists of links they might want to visit.

Potential contrast errors are listed on the right-hand side—these would include issues with light text on light backgrounds and dark text on dark backgrounds, like my white text on images that I have mitigated with a black transparent background and text-shadow properties.

Below the contrast error section is a count of features, such as alt text (or missing alt text), site language metadata, and related information. You'll see that many features are present for this site—this is due to my omitting alt text for blog post cards. The images aren't critical since the title and excerpt text tells the user what the post is about, so I have removed them from the assistive technology's view (images with missing alt text won't notify the user if they are using a screen-reader).

And below features are a list of detected ARIA (Accessible Rich Internet Applications) elements. These are generated by labels and other information applied to HTML elements that go beyond the usual semantic HTML and help developers and designers communicate additional information to assistive technology (like notifying a user that an element is supposed to be treated like a button if the default HTML button element isn't used to create it, or to hide elements from assistive technology if they are simply for visual display).

These sections have expanded explanations and potential solutions to issues in the other tabs, so following through on each item and reviewing your design choices for increased accessibility is incredibly easy.

Accessibility concerns are growing

If you've never used WAVE before, I can't recommend it enough. Give your site or app a review with it and find out where your accessibility weak spots are, and then figure out how to make your product work for users who use assistive technology. Various studies have found that the number of users using these technologies may be as high as twenty percent of a site's traffic. This only increases for more niche industries like healthcare that may have many users who rely on assistive technology to manage their experience online.

I'll visit other tools (like NVDA) in the future and how developers and designers can use them for troubleshooting accessibility pain points in their site designs, resulting in a delightful experience for users who take advantage of assistive technology online.