Web accessibility: How to make your website more accessible

James Norris, Marketing Leader at Contentsquare and Tzveta Dinova, Accessibility Specialist at ASOS

Home » Events » Web accessibility: How to make your website more accessible
James Norris and Tzveta Doniva

Over 21% of the UK population report some form of disability that will impact their ability to access digital experiences in a way that suits them.

This is both simultaneously shocking and an opportunity, as a poor customer experience can lead to lost customers.

In this talk, James and Tzveta will focus on:

- The big picture: How can you inspire a shift in corporate towards accessible transformation?
- The small picture: what changes can you practically implement to your digital experience to enable more people to access and understand the information presented?

Table of Contents

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!

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

Remove distractions

  • 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?

Use captions

  • 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!

Ready to get started? Here are some resources and tools for you to get started with

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:

Other Resources:

This event was live on 31 May 2022, 08:30