In the lead up to Christmas I’m going to be doing a series of posts of thoughts and doodles. Sort of like a 12 posts of Christmas or a Christmas advent collection. So my first one is about accessibility.
Too often we forget that not everyone has the same experience as us when using websites.
It might be something simple like they don’t have the same experience because they have a different phone and the website isn’t geared up to be mobile ready. Or they can’t see it properly because of the browser they are using, and the site you’ve built doesn’t work right on that browser.
It could be that someone who is blind, partially sighted or deaf is coming to the site and they’re unable to use it. Or it could even be as sinister as a user being colour blind and they are unable to differentiate between colours on the site.
All of these things are important for council websites, because residents will vary so much. The site is there to serve a very wide ranging community. So what things do we need to be thinking about to get to grips with accessibility.
Here’s my list and also some useful links that will help you get it spot on.
Content editors. You need to think about:
- What you are writing and who your target audience is.
- Don’t refer to top right, bottom left etc. If the site is responsive then the content blocks on the pages move round depending on how you look at it. Instead refer to the heading for that section.
- Don’t use click here. This can be really frustrating for screen reader users who may tab through links.
- Wherever possible try to make link text as similar as possible to the page you are linking to, for example don’t put link text ‘contact us’, if the page you are sending people to has a page title of ‘visit us’! The same with links to external websites. Make sure you write BBC website, not www.bbc.co.uk
- It’s always good to write out all email addresses
- Make headings as useful as possible, front loading the heading with the keyword wherever possible.
- Screen readers search on terms, and would more likely be searching for the term ‘contact’ rather than ‘getting’.
- Make sure you put alt text on images where needed. If they don’t need alt text because they are purely decoration, they will still need a null alt text.
- Make sure your images are accessible. In other words don’t use a poster that has been shrunk to size and the wording is no longer legible.
Accessibility things that are really super important:
- You should offer a text resizing option and don’t just rely on the browser doing this job.
- High contrast should also be offered. Many partially sighted people will really rely on this to see your content.
- Think about listening to web content, using things like browsealoud.
- Translation options should be made available by embedding Google translate somewhere on the site, usually the header or footer.
- What colours are you using? These must pass contrast tests.
- Is there a site map?
Browsers and operating systems:
- If you want your site responsive then do testing on phones and tablets. Particularly
in IE 8, 9, 10, 11 Safari, Firefox and Chrome.
- You should also make a massive effort to test content and functionality on smartphones and tablets.
- On an iPhone and iPad/mini iPad
- On an Android phone and tablet
- On a Windows Phone and Tablet.
And here are my useful links:
#1 – this one is called Wave and it’s a Web Evaluation Tool. You just put your web address in and it will tell you how many accessibility errors there are in your site.
#2 – this one is good for checking how good your content is and how easy it is to understand. It’s called Online Utility.
#3 – here are the full Web Content Accessibility Guidelines. It’s a pretty long but if you’re in doubt then take a look at this.
#4 – this one is really good for colours. Simply pop your colours into the Web Aim Colour Contrast Checker and it will tell you how compliant, if at all, your site is.
#5 – Courtesy of the University of Nottingham this is a SMOG calculator. It’s pretty good. You just pop your text in and it’ll give you a score. Aim for a score of about 16 and you should be OK.
#6 – And my final pick is the Website Usability Dashboard this one has been developed by the very talented Simon Gray (@simonjgray). It lists lots of councils and it allows you to run tests on your own and others’ sites and then gives you an average score.
Got any other accessibility tips? Tweet my @karenjeal