Image for post
Image for post

Discovering WAVE web accessibility

Dave Haigh
Jul 16, 2016 · 3 min read

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 Gov.uk projects. Afterall Gov.uk did win Design of the Year award in 2013 so maybe I could have my eyes opened a little.

Image for post
Image for post
Attentive

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.

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.

Image for post
Image for post
WAVE example for bbc.co.uk, showing accessibility summary and inline tool tip prompts.

Accessing WAVE

Three methods:

  1. Install the Chrome Extension. More info here: http://wave.webaim.org/extension/
  2. Paste wave.webaim.org/report#/ before any URL on any browser e.g. wave.webaim.org/report#/www.bbc.co.uk
  3. Visit http://wave.webaim.org/ 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.

Image for post
Image for post

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.

Image for post
Image for post

Conclusion

Go make the web a more accessible place.



Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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