Table of Contents
- So what is accessibility? Accessibility defined.
- So, what’s the case for prioritising accessibility?
- How to inspire change to a more accessible place
- Tips on how to make your web experience more inclusive
- Ready to get started? Here are some resources and tools for you to get started with
Picture this. You go to a soup restaurant and take in the glorious smells – the ambiance is terrific and you can’t wait to eat. The waiter comes over and serves you what looks like a delicious bowl of soup and then… they give you chopsticks to eat your meal with.
You get hungry and leave frustrated – leaving in the process.
Now, the analogy might be a leap – but it does speak to the idea of accessibility. You can create the most amazing website in the world, but if it’s not available to everyone: you’re doing them and yourself a disservice.
So what is accessibility? Accessibility defined.
W3.org define accessibility as “designing and developing tools and technologies that anyone can use”. Note here that there isn’t usage of the word ‘disability’. This is about creating a universal experience that allows users to perceive, understand, navigate, interact and contribute to your content.
And what about disability?
Disability is categorised in four ways when considering accessibility: hearing, visual, cognitive, and visual. There is also permanent, temporary and situational disabilities. Basically – it’s a spectrum.
So, what’s the case for prioritising accessibility?
Moral argument for more accessible experiences
This one should be fairly cut and dry. But when you start to realise the scale of the challenge, that’s when things really start driving home. 1.85 billion people across the world have some kind of impairment. In the UK:
- 1 in 25 people are visually impaired
- 1 in 12 are colour blind
- 1 in 10 have dyslexia
- We also have an ageing population: by 2050 we’ll have 20.6 million people in the 65+ age bracket, as opposed to 12 million today
- Of these, 80% of disabilities are invisible
As much as these stats are shocking – they don’t convey the humanity of the challenge. We need to step in others shoes because fundamentally – everyone deserves to access the wonder of the internet!
The commercial argument for accessibility
Cynically – big change doesn’t happen without a business case (as sorry as that is). So here you are:
- First, 1.85 billion people is a lot of people!
- This equates to a global spending power of some $1.6 trillion. That’s a lot of money, too.
- Clearly, there is a breakdown that goes on here with local markets and industries, but this stat is here to provide an idea that there is money on the table for those willing to prioritise accessibility.
- 71% of disabled users will leave a site they find difficult to use. Go back to the soup! If you get a spoon and have a great experience – you’re going to go back!
Legal basis for accessibility
There are laws across the world that exist, but right now they’re a bit toothless. But, we said the same about data and then GDPR happened – so don’t think it’s not coming. It’s worth getting ahead of the curve. A stitch in time saves nine.
How to inspire change to a more accessible place
- Get to know your disabled audience
- Quick win – interview disabled customers to understand their perspective
- Big win – Create personas/journey maps to match the disabled perspective
- Provide a business case
- Quick win – Quantify your metrics against accessibility metrics. Show your business what they’re missing!
- Big win – Use these performance and efficiency metrics to create a case for investment, including brand metrics
- Create accessibility advocates
- Quick win – help others understand the issue – maybe this write up and video will help!
- Big win – Start an accessibility squad to really drive forward the agenda
Tips on how to make your web experience more inclusive
- Avoid unnecessary animations
- Do not autoplay videos
- Do not have any flashing content
Use plain language
- Check your reading level – Hemingway Editor (https://hemingwayapp.com/) is a great place to start with this!
- Explain abbreviations and acronyms
- Label everything clearly – what does a specific button do when you click it? Is ‘submit’ enough or is ‘create account’ clearer?
- All videos should have captions (including social media!)
- Provide transcripts where possible for audio, such as podcast recordings! (Full disclosure: we need to get better at this at TMM!)
Describe content for screen reader users
- Use visible labels where possible
- Associate labels with inputs
- Make sure error messages are clearly communicated
- Give your images ‘alt’ text (note: you don’t need to provide alt text if the image is simply decorative, but if it’s not just decoration, provide alt text!)
Make sure all content is accessible via the keyboard
- Users should be able to ‘tab’ through your site. With the order of elements following the visible reading order (top to bottom, left to right)
Check your colours and have good contrast!
- Test your designs using a colour blindness simulator – for example, Colourblindly (https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en)
- Have good contrast across your content
- Do not use colour as the sole means to communicate information – for example in graphs, use dashed lines as well as different colours
Ready to get started? Here are some resources and tools for you to get started with
- Understanding WCAG 2.1 (Only look at level A and AA criteria which comes down to 50 success criteria)
- How to meet WCAG 2.1 (Link has been filtered down to 2.1 AA)
- A generic WCAG 2.1 Checklist (although I would strongly recommend making it your own so that it applies to your content)
Web accessibility Tools:
- Axe DevTools – a chrome extension that allows automated checks (picks up about 30% of issues), the paid version can be implemented in the pipeline for automatic testing
- ARC Toolkit – another extension that does automated checks (overall picks up a bit more than axe but still around 40%), the paid version can be implemented in the pipeline for automatic testing
- Headings map – allows you to check if your headings are well structured, for reference see this WCAG Tutorial on headings
- Colorblindly – allows you to check your pages through the “lens” of someone who is colour blind
- Visual ARIA – allows you to check your ARIA attributes (more on ARIA here)
- Alt Text Tester – allows you to quickly check the alt text of your images
App accessibility Tools:
- Testing on apps requires more manual work but you can look to familiarize yourself with using screen readers and accessibility settings on your mobile devices
- Voice Over for iPhone and iPad (video)
- Voice Control for iPhone and iPad (video)
- Voice Access for Android (video)
- Talk Back for Android (video)
- A11ycasts! – a Google video resource for all things accessibility
- Linkedin Learning has a few useful courses if you have access to that
- There is a free Digital Accessibility Foundations course provided by the W3C
- Alt text for SEO: How to optimise your images (article)
- Accessibility Personas by GDS (article on how to run a workshop)