19 October 2021

Designing websites with accessibility in mind

Making websites accessible can have a huge range of benefits for everyone. Let's see how we can make that happen


Web accessibility is all about making websites usable by as many people as possible. Traditionally we’ll think of this as being about people with disabilities, though in reality, an accessible website can benefit a whole range of people. The main aim of web accessibility standards is clear and something everyone can get behind: In the same way that it is wrong to exclude someone from a physical building because they are in a wheelchair, it’s not right to exclude someone from a website for similar reasons. 

Web accessibility standards are set by the WCAG. They have three levels of accessibility – A, AA, and AAA. For public sector websites, there is a legal requirement to make websites accessible up to a AA standard, but this legislation doesn’t apply to the majority of websites. 

considering these items can make for a better website for all visitors and even enhance reputation and brand image, so it’s a no-brainer, really

That said, if you’re a web designer it’s highly likely that you’ll have a client who treats accessibility as a high priority and will be keen to consider accessibility right from the early stages of a website’s production. If you’re able to highlight a few of your design choices and state the accessibility properties of them your client will think even more highly of you. And as we mentioned, considering these items can make for a better website for all visitors and even enhance reputation and brand image, so it’s a no-brainer, really. 

How a website is coded influences the website’s accessibility, naturally. However, there are also some web accessibility standards that are affected by the underlying website design. We’re going to take a look at some of those design elements that affect the WCAG standards in this article.

Colour contrast

Both WCAG AA and AAA have standards related to the contrast of colours. On both levels, it says that the colour of text, icons, and components (buttons, checkboxes and things like that) has to be contrasted enough with the background colour to be legible. In AA, that contrast needs to be a ratio of 4.5:1 for text, and 3:1 for icons. In AAA, the text contrast needs to be at least 7:1. The size of the text comes into play a bit too. If it’s larger text, the ratio of the two colours eases up.

There are plenty of sites for checking the contrast of two different colours, but we like Colour Contrast Checker

This one can sometimes prove problematic if a company’s brand colours are inherently inaccessible, however there are usually ways to deal with it to at least the AA level. 

Presenting content in a meaningful order

This is an accessibility standard that has both SEO and readability benefits. In fact we mentioned this in our Designing Websites with SEO In Mind article. It is a good one though, so we thought we’d mention it here too. Essentially, all headings and labels should follow a logical order and be clear to understand. 

Consistent navigation

You’d probably want to do this anyway, but WCAG suggests that a website should use the same navigation throughout the entire site. So that’s the same header menu links on every page, and footer links as well if the site is using them. 

Using breadcrumbs

There’s an item in level AAA that says that breadcrumbs should be used on every page of the site. For a lot of sites with a small architecture, this may not be strictly necessary, and it can be hard to blend into a site’s design aesthetically. That’s why it’s only a standard at the highest level. But breadcrumbs are undoubtedly useful not only to those using screen readers and other assistive devices but for most visitors once a website’s architecture becomes three or four levels deep. 

Consider equivalents to video content

So this one does fall more onto the content side of things, but it’s likely videos will come up right from planning a website and go into the design phase as well. There are a few standards in WCAG that relate to video, and they are arguably some of the most complex to incorporate into a site, and will likely require some compromise to obtain. 

First up, for any video- or audio-only content, a text alternative needs to be presented. This is WCAG Level A requirement. This can come in a few ways. Either a written article that acts as an alternative to the video, adding captions and subtitles to videos, or providing a full-text transcript of the video. 

We almost always recommend hosting video on YouTube or Vimeo before embedding it on a website, and one of the reasons why is that video producers can upload subtitle files to their videos when using Vimeo or YouTube. 

Level AA says that all live-streamed videos should contain captions too, and if you’re using a third-party streaming platform this should be possible. Videos with alternate descriptive audio tracks should be provided as well for AA. 

At Level AAA, videos need to provide sign language translations for videos, extended audio description tracks, and a full-text alternate to the video that completely describes the video.

So there we are, we hope this is useful. We feel that the internet should be open and accessible to everyone, and especially if considering other people’s needs leads to a better experience for everyone we think there’s no reason to consider these points when designing your next site.

Design websites but need a hand building them?
We can help.

Contact us