The most overlooked part of web design: web accessibility

The web should be accessible to everyone. But it isn’t.

What would you do tomorrow if you started to lose your sight?

This happens to 250 people every day in the UK, and globally there are around 285 million people with some degree of visual impairment.

If you don’t have a visual impairment, think about your day so far. How different would it have been trying to navigate the world, to even get to this website without vision?

What if your mobility became impaired? The World Health Organisation suggests that 1 billion people around the world live with a form of disability.

1 billion people, some of whom may find it challenging to use a mouse, or to type.

If you’re able-bodied, imagine trying to navigate a website on your laptop without using the trackpad or a mouse. Could you get around using just the keyboard?

Websites should be designed with accessibility in mind, but frequently they’re not.

A visually- or mobility-impaired website user may be accessing the internet in a different way to others or using assistive technologies such as screen readers. But far too many websites aren’t built with that kind of usage in mind.

A shocking 98% of the top 1 million homepages don’t meet accessibility standards.

To compound this further, in a study completed by WebAIM almost 60% of respondents felt the accessibility of web content had not changed or had become less accessible.

That’s a huge number of people around the world whose online experience isn’t being properly considered or catered for, despite guidelines being in place.

What are the Accessibility Guidelines?

The guidelines are quite technical, so here’s a brief summary.

There are three WCAG levels for making a website accessible:

Level A has 25 criteria that a site should meet and is designed to be the easiest level to reach.

Level AA includes has 13 additional criteria. Level AA is really the standard most websites should be aiming to meet, and it’s the level the UK Government wants public sector websites to adhere to.

Level AAA has 23 more criteria and tends to fit very specialist websites the best. We find many brand websites just don’t have many of the features covered in this level, so “double A” is a good target to start with.

Find out how accessible your site is

As a rule – the simpler the website, the simpler it should be to make your website accessible.

When assessing a website’s accessibility, we focus on the items in the Level AA category, which has 38 criteria, but here are a few ways you can check how accessible your brand’s website is:

Testing your website with a keyboard alone

It’s relatively common for people with visual or mobility impairments not to use mice or pointers, and to use keyboards or aids that mimic keyboard actions, so this test can give a sighted person an idea of that experience.

•  Open your homepage, and then use only the keyboard to navigate around, using the tab, enter and escape keys – on both mobile and desktop. Are links and buttons being highlighted? Does the “journey” of the highlight seem logical? Can you get into menus and other hidden content?

•  When menus and popups open you should be able to tab through those, interact with elements and press escape to close them. This is really important – we often see websites with pop-ups that can’t be easily exited, effectively leaving the user stuck without a way to get back.

•  Check that all forms can be navigated and submitted with a keyboard, using the tab and enter keys.

If you’re a bit more technical…

If you’re willing to go deeper into the code, there’s lots more to look at.

Let’s start with checking mark-up, which tells screen readers (used by visually impaired people) what they’re looking at:

•  Contact forms should have the correct fieldset, legends, labels and matching values on inputs

•  All images should have an alternative tag (or an aria-label that ensures screen readers skip that image)

•  Buttons and links should use the correct code – this means a button should be coded as a button, not as a link. These should also have the correct aria labels assigned.

Without these, a screen reader might not be able to interpret and describe the website, which could lead to a frustrating and confusing experience.

These are just some of the many ways accessibility can be improved, and with these considerations, we can work towards a more inclusive web for everyone.

The legal side

Hopefully, you don’t need much more encouraging that an accessible web is a good thing. But in case you do, there’s another good reason…

Put simply, websites that don’t follow accessibility guidelines are breaking the Equality Act 2010. The act says that all UK service providers must consider ‘reasonable adjustments’ for disabled people.

A website is classified as a service and to comply with the law you must make reasonable adjustments (i.e. ensure your website is accessible) not to treat disabled people unfavourably because of something connected with their disability.

Next steps

The web should be accessible by everyone, and we design and build our websites with usability in mind.

The tips above should give you a good starting point, but we’ve only scratched the surface. For example, we haven’t touched on the challenges faced by people with colour blindness, and how to design a website with colours that stand the best chance of being clear and legible.

Getting to AA rating can take time, especially on an older website. Whether you’re starting to look at making your brand’s website more accessible or are starting to consider a fresh build with accessibility at the core, get in touch.