Guide

Making a case for digital accessibility

And 5 steps for a quick accessibility fix

96.8% of home pages had detected WCAG 2 failures! (https://webaim.org/projects/million/))

More than 1 billion people with disabilities around the globe have nearly zero access to digital products

This same population wields market power in excess of £422.38 billion. (https://webaim.org/projects/million/))

That's a huge number and yet we seem to largely ignore this fact. Making digital products accessible makes a lot of financial sense, why would any business not want to sell its product an extra 1 billion people. Yet this is exactly what happens.

Accessibility errors on website home pages

Colour contrast is one of the easiest accessibility errors to fix. Check it with the contrast checker on Design Systems for Humans: test any background and foreground colours, for your text and for other elements, such as forms, buttons and icons.

More than 4 million abandoned a website because of barriers they encountered

That's a huge number to factor in. If you relate this to a physical experience of a shop, you just wouldn't put barriers in the way to stop people buy a product. For example: Making your point-of-sale hidden behind a wall or putting spikes on the floor to make it difficult to get into. We don't do these things in real-life, yet we accept them in digital experiences. (https://abilitynet.org.uk/)

Worth an estimated £17.1 million in lost sales, in the UK alone, for 2019

The lost sales due to inaccessible e-commerce experiences causes a massive £17.1 in lost sales. With a few minor tweaks and including accessibility early in your development makes good business sense and provides a better experience for everyone.

What can we do?

(in 5 easy steps)

Check your current accessibility score

You can quickly check the current accessibility of your website by running a quick check of some key elements. This helps to measure the progress you've made in your accessibility journey, while providing an overview of things that need fixing.

While automated testing gives you a good idea of where to focus your efforts, there's no real way of checking everything. For this, consult with an expert , such as, https://consultseated.com.

Top tools for checking your sites accessibility

Accessibility insights: You can use this tool to check your accessibility of Android apps, websites Windows apps. This tool gives you fixes that take less than 5 minutes.

Lighthouse: Using directly from the Developer Tools in Chrome or by adding the extension made the Google team.

Design everything with at least an AA contrast ratio

Make sure that all the designed elements have a contrast ration, use the contrast checker to quickly check accessibility between the background and foreground colours. When using colour don't use colour alone to indicate the status of something. For example, green text without an icon or explanation will not look green to everyone.

Examples of how colours look with different conditions of colour blindness

Use large fonts

Don't be afraid of using a large font, this not only helps with accessibility, but increases the readability of a webpage. People don't read all of your content, they scan pages for relevant and interesting sections. Using large fonts really helps people to scan and find this content. The Neilsen Norman group published the results of a study about how people scan a page, https://www.nngroup.com/articles/how-people-read-online/.

Never use light or thin fonts, light and thin fonts don't have the same colour accessibility and readability as regular and bold fonts. This also applies to strokes weights and focus states, for an in-depth guide on focus indicators; https://www.sarasoueidan.com/blog/focus-indicators/

Use a minimum size of 16pt, even on mobile devices using a 16pt font helps for a more comfortable read. The last thing you want is for your users to pinch and zoom into text and loose context of are they are in your storytelling.

Avoid using UPPERCASE, uppercase letters may give the UI impact, this is a huge problem for your users with dyslexia. 6.3 million people (around 10% of the UK population) have dyslexia. https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles/simone-dyslexic-user

Complex words and abbreviations, not everyone is an expert or knows what an MVP is (Minimum Viable Product or Most Valuable Player, depending on who you're talking to). The average reading age is 11 in the UK, so maximise engagement by simplifying jargon and only using long, complex words when absolutely necessary.

Use ALT text
(when appropriate)

Where you're using an image and it's relevant to the story, social media post, PowerPoint presentation, etc. then it needs an alt description to allow screen readers to describe what sighted people can see.

Common mistakes when using alt tags

Using one of my illustrations I've highlighted a few errors that I see when visiting websites.

Using the filename as the alt tag
alt=”stockimage54565494”
This is just nonsense for the screenreader, image listening to this a few hundred times a day!

Not providing a good description
alt=”Data holding a gem”
Not providing a good description can result in an entirely different message over the intent of the image.

Icons used multiple times and with text beside them shouldn't have alt tags, instead use alt=” “ or aria=”hidden” so that the screen reader ignores them.

Add to the story
Describe what's going on in the image, complex images demand more descriptive alt tags, for example:

alt=”Commander Data, from Star Trek, holding a giant gem reflecting a laser beam with padlock icons in the background”

Keep it simple

The average viewing time of a webpage is 15 seconds and that's for everyone.

If you haven't generated interest in those 15 seconds, then you're probably not going to.

For top tips on how to reduce your bounce rate (the percentage of people who leave your webpage after viewing just one page):

https://www.crazyegg.com/blog/why-users-leave-a-website/

https://time.com/3858309/attention-spans-goldfish/

When we remove barriers and have engaging and relevant content our attention span increases. Netflix has a whopping average of 3.2 hours of viewing a day. So, it's not all bad news.

However, accessibility frustrations cause people to leave your web page or social media content at alarming rates. And what's even worse, they're unlikely to come back.

If you want to watch these tips

5 top tips to All4Inclusion supporters during their digital accessibility webinar.

Watch the five tips on YouTube

Check your colours

Every colour check from this guide is in one place on Design Systems for Humans: the contrast checker for any pair of colours, and the palette tool for building accessible colour ranges.