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 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.
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.
Accessing WAVE
Three methods:
- Install the Chrome Extension. More info here: http://wave.webaim.org/extension/
- Paste wave.webaim.org/report#/ before any URL on any browser e.g. wave.webaim.org/report#/www.bbc.co.uk
- 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.
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.
Conclusion
Go make the web a more accessible place.
Useful Links:
- WebAIM http://webaim.org/
- WAVE http://wave.webaim.org/
- WAVE Chrome Extension http://wave.webaim.org/extension/
- W3C Accessibility https://www.w3.org/standards/webdesign/accessibility
