Websites are great, aren’t they?
Personally, as a web developer, they have kept me employed since the late 1990’s. These days, you can do pretty much anything using one. You can get everything you need your weekly grocery shop to a reserving a flight into space! They can help enrich every aspect of our life.
Recently of course, this was never more the case than during the COVID-19 pandemic, when website traffic rose dramatically, with more retailers taking advantage of selling online while the lockdown was in force.
All this is great…unless you have a disability that is.
According to the UK Government, “at least 1 in 5 people in the UK have a long-term illness, impairment or disability.” That is a lot of people, when you think about it. Not only is it unfair on the user if your platform isn’t accommodating towards them, it is also a lot of missed opportunity for you too. Your website could be missing out on all those potential customers, simply because your website cannot be read as easily as a competitor’s website. Sobering thought really.
Over the last couple years, website accessibility has really started to come to the foreground. In the UK, accessibility regulations came into force for public sector bodies back in September 2018.
What is accessibility for websites all about?
It was back in December 2008, when the Web Content Accessibility Guidelines (WCAG) 2.0 were published. This is the industry standard that accessibility is tested against. It was designed as “providing a single shared standard for web content accessibility that meets the needs of individuals, organisations, and governments internationally.” The guidelines are written for website developers like me, as “testable criteria for objectively determining if content satisfies them”.
The testing can involve a combination of automated testing and human evaluation and is primarily intended for Web developers to use to identify such issues. There are 12-13 guidelines, organised under 4 principles:
- Perceivable: Users must be able to perceive the information being presented and not invisible to any of the senses
- Operable: Users must be able to operate the website with any disability
- Understandable: Users must be able to understand the information and the operation of the user interface
- Robust: Content must be robust enough to be interpreted reliably by a wide variety of user tools, such as assistive technologies (screen readers, etc.)
Each guideline, there are testable “success criteria” giving levels of: A / AA / AAA. In order to achieve the next level up, you must achieve the previous level. I.e. you need to achieve “A” first and then you can look at achieving “AA”.
Want some quick tips to help you out?
In the last year, I have been involved in working on accessibility for a client and their large estate of websites. It is surprising how little effort is required to make sites more compliant. Just small changes to the design of the site can improve your accessibility rating.
Here are some quick fixes that could transform how accessible your site is:
The rules governing links are as follows:
- If a link goes to another page or asset, it should have the same text for that URL with the page
- The same text on a link should not be used on different URL within a page
You often see online shops with rows of products, each with a “More information” or “Buy” button. This is not good for accessibility. Best practice is to make any text for a link to a URL the same and unique throughout a page. Not just helpful to disabled customers. If the page uses links to the same URL throughout the page, the text should be the same. This means by simply changing “More information” to “More information about product X”, it makes it compliant.
If you have a visual impairment, you could struggle to see contrast between colours.
The Guidelines say that you should ensure there is at least a ratio of 3:1 between background and foreground colours. The higher the ratio, the clearer it is to see. Black text on white background comes up at 21:1, for example. Best way to know this is to test using an online testing site to help with these. You enter background colour and foreground colour and it gives you the contrast ratio. WebAIM has a very good free version: https://webaim.org/resources/contrastchecker/
Ensure that the language is the right level for your audience and that, if you have a multilingual site, that you always show the right language. All system text should be translated as well. This is not something that most automated testing websites do, so worth taking some time to check out yourself.
Ensure that any downloadable content is compliant too.
It can be as simple as making a well-structured simple document that avoids complicated forms. For PDFs, there are plenty of different free and paid for services online. For Microsoft Office, Microsoft has this handy checker: https://support.office.com/en-us/article/use-the-accessibility-checker-to-find-accessibility-issues-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f
Ensure any video on your site has closed caption and audio description, where necessary. It is also worth considering adding a downloadable transcript of the video to help those that would struggle to access the video itself.
Need some extra help?
One of the best ways to check your pages for free, is to download some browser extensions. When installed, if you are sat on a page, you can press a button and see the issues on the browser.
For pure accessibility testing, I would recommend WebAIM WAVE: https://wave.webaim.org/extension/
It is very good at testing and explains the issue is, why it matters to fix it and how to fix it. It also tells you the standard you would achieve by fixing it.
Full page test plug-in
Google quietly had a full-page tester out for some time. It is a free browser add-in called Lighthouse: https://developers.google.com/web/tools/lighthouse.
This does a full spectrum of tests on your website’s page from Accessibility, through performance to SEO.
Does that help?
Accessibility is perceived as a big task for website owners to get sites compliant. Hopefully, in this article, I have been able to demystify it slightly and with minimal effort and little cost, you can go some way to becoming a bit more accessibility compliant. You never know, you might get an increase in website traffic.