Discovering WAVE web accessibility

Capgemini recently hosted a Technology Event in The Old Library building, part of the Custard Factory complex in Digbeth, Birmingham, UK.

The promise of free entry, free food and free drink really caught my eye, but also I was interested to find out some more information about what Capgemini were working on in the area of projects. Afterall did win Design of the Year award in 2013 so maybe I could have my eyes opened a little.


Among the demos and presentations on offer, one that intrigued me was a demo being given by Basit Pathan (Twitter @PathanBasit) about the various tools and software that were being utilised day to day within his web development team.

WAVE web accessibility

One tool demoed was the WAVE web accessibility evaluation tool by WebAIM.

WebAIM’s mission is to expand the potential of the web for people with disabilities by providing the knowledge, technical skills, tools, organizational leadership strategies, and vision that empower organizations to make their own content accessible to people with disabilities.

WAVE appeared to be a very useful tool to highlight accessibility errors, alerts, contrast errors and more, all directly within your browser. This assessment can then be used to improve the accessibility of your web pages.

As well as discovering potential problems with your own designs and sites, it could also be used to assess other websites to see what they are doing right or not so right.

WAVE example for, showing accessibility summary and inline tool tip prompts.

Accessing WAVE

Three methods:

  1. Install the Chrome Extension. More info here:
  2. Paste before any URL on any browser e.g.
  3. Visit on any browser and type in a URL

Using WAVE

After initialising WAVE with one of the methods outlined above you are greeted with a side bar down the left side of your screen. This gives you an overall summary of the page highlighting the number of Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, and Contrast Errors.

You can switch between the summary and further details using the side tabs, and also see more info on the contrast errors using the horizontal tabs at the top.

Especially useful are the in page buttons which relate directly to the offending elements. Clicking these give further information, then clicking More Information gives even further helpful information in the left side bar.


Go make the web a more accessible place.




UI/UX Designer. Birmingham, UK

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Haigh

Dave Haigh

UI/UX Designer. Birmingham, UK

More from Medium

Building a Sketch Design System: Tips & Tricks

Web Accessibility Best Practices on Hyperlinks

NVDA screen reader speech viewer showing the Amazon Card page buttons text announced with context as ‘Delete Darden Restaurants Gift Card $50’, ‘Delete SENNHEISER HD 599 SE Around Ear Open Back Headphone’ for different products added to the cart

Do you know the Importance of UI/UX Development?

UI vs. UX Design: The Difference is in the Details

User experience design or UX design