I recently ran a workshop on accessibility at the Intranet Now conference with my colleague Billy. You can see the presentation deck and notes, although a lot of what we talked about included a live demo – I’ve summarised what we discussed below.
Using Wave to evaluate the accessibility of your intranet
Wave is a Chrome extension which evaluates a single page and identifies any errors, alerts, features or semantics. It is easy to use – you can download Wave here.
Once you’ve installed the extension, simply go to a page and select the WAVE button in the toolbar. It provides a summary of accessibility issues, and gives you additional information – such as the problem, why it is a problem, how to solve it, and the reference to the standards they relate to. It’s a very quick way to check your content and we’ve been able to find invisible broken links, missing headings and more and have since resolved them within our product.
Using a screen reader to put yourself in the shoes of your users
There are a number of screen readers available on the market, and each has a different preferred browser that it works with. JAWS works with Internet Explorer, and has a 40-minute free trial that’s really useful for testing. There’s documentation online which will help you get started – all you need to know is the basic commands to get you on your way.
Getting your users to show you
As Paul demonstrated in his keynote presentation, different users will use accessibility software at different speeds and in many different ways.
We’ve met a variety of people during our process of testing our product and it gave us a real insight into the challenges they face. If you can, get in contact with someone who actually relies on accessibility software as that’s the audience you want to cater for. They may also be able to refer you to other users; you could also ask for volunteers to become part of a focus group.
Make your alt text do what it says on the tin (or picture)
Alt text stands for alternative text and does what it says on the tin – it’s a text alternative to media, to convey information about that media and it is what is announced when a screen reader comes across it.
There are some quirks and decisions made when deciding alt text – here are a few of them:
If images are used as links, alt text must be present, otherwise users won’t get any context from that picture and link.
Don’t include information in Alt Text that isn’t provided within the picture – that makes for a different and possibly confusing user experience for everyone.
Purely decorative images should have no alt text so screen readers skip them.
There is a really useful explanation on this at WebAIM – we tried out some of these examples in our office and weren’t always able to agree on the right answer in each scenario!
If you’re stuck then always ask yourself – are you withholding or restricting access to any information which is presented in this image? If so, present it through alt text.
Formatting lists
Making sure you use the provided lists is something very quick and easy to do and I’ve been guilty of not doing it before myself. Some users use lists to navigate around a site – if they’re not formatted correctly, it can make for a confusing experience.
Using the numbers or bullets as provided in your web editor is a quick and easy way to improve the experience of your users.
Headings – be clear, not bold
Clearly written headings are vital to making your writing easier to digest for all of your users; a person using a screen reader will really benefit from a well-structured page. Another common method for navigating a site is to skip through the headings on the page. If you don’t have headings on all of your content, how will a screen reader know what is there?
Don’t use bold text if it is an important section. If it should be a heading, make it a heading. This makes the process of navigating for accessibility software users a lot easier.
Colour me good
Don’t just guess if your colours are accessible – use a free tool, like this one provided by webaim to prove it: http://webaim.org/resources/contrastchecker/. What you’re looking for is a contrast of 4.5:1.
If you are creating or editing content and want to add some colour, consider who will be viewing it, make sure it passes so it’s accessible to those who may struggle. Protip: it’ll also keep the experience more consistent for everyone!
Useful accessibility resources list
Accessibility evaluation tools – https://www.w3.org/WAI/ER/tools/
Alt text test – http://webaim.org/techniques/alttext/
Colour contrast checker – http://webaim.org/resources/contrastchecker/
GDS Team guidance – https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility
Wave Chome web extension – http://wave.webaim.org/extension/
