A Dummies Guide To Web Accessibility

Post by Dani D Picture of Dani D
Reading time 4 mins clock

The web can be a daunting place for those with a disability.

Digital marketing has become the way that companies of all shapes and sizes reach us as consumers - but are we really reaching everyone who’s out there on the web?

According to Scope, there are 14.1 million disabled people in the UK

Your organisation’s website could be putting up unnecessary barriers to those with visual impairments or disabilities..

Failure to accommodate such a large audience limits the positive impact a website can have on your business and the amount of potential customers you could be working with.

Would you put an a-board right in front of your shop door? Of course not! You remove the barriers that would get in the way of your customers coming in.

Approximately 1 in 8 adult males

&

1 in 200 adult females have some form of colour blindness...

Colourblindawareness.org

Why bother?

Your first point of call when looking to make sure your website meets the basics of accessibility is to be compliant with the WCAG ( Web Content Accessibility Guidelines) 

It’s not only a legal requirement for many organisations to meet these standards, it’s also a worthwhile investment because it ultimately opens doors to more customers being able to access your site. 

There are some staggering statistics around the spending power of disabled households, referred to as the ‘purple pound’.

This spending power, in 2017 was estimated to be worth £249 billion per year to UK businesses. When 75% of disabled people and their families have walked away from a UK business because of poor accessibility or customer service, it is clear why being accessible can really pay.

Not to mention the brand damage this could end up causing - we’ve all seen Dominos in the news!

The Guidelines

The guidelines are graded at three different success criteria, levels A, AA, and AAA. 

Level A is the most minimum requirement when making your website accessible. This level addresses the most basic web accessibility features.

Level AA is a mid-range reach in features you apply to your website. It has the most common barriers for disabled users and aligns to the Revised 508 Standards

Level AAA is the highest level you can achieve - but some say you can never really reach it because as you get into it, you can start cancelling out other requirements. A double edge sword if you will. This level addresses the highest level of web accessibility, but is not recommended as a general policy, because it’s not possible to satisfy all criteria for some content. Most will instead work with whatever rules suit their site best. 

man on macbook at desk viewing screen

The higher the level, the more constrictive it is on the design process; you thought having that fancy dropdown would be a good idea? Well, it doesn’t conform to AAA guidelines.

The guidelines are organised under what is considered the four principles of accessibility: Perceivable, Operable, Understandable and Robust (POUR).

Perceivable means that a user can perceive the information being purveyed on the site without any difficulty. 

Operable means that the components and interface of a site are easily navigated. Understandable means that users need to be able to understand the information and interface. 

Robust means that content must be solid enough that it can be interpreted reliably by a range of assistive technologies.

...That represents 300 million people worldwide & equates to around 3 million people in Britain who are colourblind!

Colourblindawareness.org

Only 25 guidelines need to be met in order to meet a level A standard, as demonstrated by this checklist tool, this is considered the baseline for accessibility and all sites should aim for it. Picking out a guideline at random, 1.3.1 Info and Relationships, an example of success criterion for this is to use labels for checkbox inputs, a label can be related to a checkbox by using a for the attribute in the label’s markup. The for attribute specifies which form element a label is bound to, this is so simple to implement and it greatly benefits users who have to rely on a screen reader - Drupal provides this functionality by default.

As for things that shouldn’t be done when designing for accessibility, there is a blog posted on the UK Government website relating to this exact topic.

blank note pad with colour charts beside it on a pink desk

Tools and Tips

WAVE Evaluation Tool is a great one to have, it produces a concise report on the structure of a web page. I find it particularly useful for the colour contrast report.

NoCoffee simulates what it is like to have some forms of colour blindness and blocked visual fields.

ChromeVox is not necessarily built for developers, but it can be quite handy to know what screen readers will say aloud.

Axess Lab has a great article with real-world examples of issues experienced by users who rely on assistive technologies. It really illustrates how difficult the web can be to use for many people.

In our recent Global Accessibility Awareness Day blog, we wrote out five tips on how to improve accessibility for your website, to bring in those huge missed out percentages:

1. Add Alt Text to all images you insert into content pages.

2. Choose colours with care.

3. Having the ability to resize the text on your site.

4. Create content with accessibility in mind!

5. Keyboard friendly

In 2018, less than 10% of all websites were meeting web accessibility standards.

AbilityNet

Are you struggling to know where to start or are you having trouble ticking all the accessibility boxes? 

Get in touch with our team and we can work with you to make your website more accessible through support and training.

Add new comment

Share this article

Sign up to our newsletter!

Our thoughts

Let's work together

Get in touch and find out how we can empower your organisation.
Back to top