How to design for accessibility

The accessibility of a website is determined by a number of different factors. It refers to the usability of a product, especially with regards to people who have certain cognitive disabilities such as auditory, motor, visual and speech. There’s a large stigma around accessibility that scares a lot of designers off the topic. However, if you understand the basics of what makes a website accessible and practice designing with accessibility somewhere at the forefront of that mind of yours, then you’ll pick it up in no time and you’ll be wondering what all the fuss is about!

In this article, I’m going to explain how you can ensure that your designs are accessible without fuss. Remember, as designers we have the power to create the entire experience that could potentially be used by millions of people. With so much power, we need to try and be mature (which can be very hard for me), and we need to design experiences that can be used by anyone and everyone.

I have the power!

1. Focus states

This is a painful one. Focus states can tend to diminish the visual design and charm of a website. One minute you’ve got a beautiful button, next minute that button has a horrible thick border which just has no place! However this is an essential part of accessibility design. It allows users to navigate your website by tapping one button on their keyboard which heavily caters for those who might be physically disabled (e.g. arthritis) or the blind who rely on screen readers.

There are ways around this however. For example, you could design custom focus states which fit in with your design. Although keep in mind that this will most likely increase development time since developers need to spend time implementing them. This probably wouldn’t be an issue if your project was not on a tight deadline and the stakeholders weren’t stressing out of their minds and the product owners weren’t patrolling the backlogs like armed guards. Well… looks like you’ll be sticking with default focus states.

2. Contrast

Contrast is another big’un. There needs to be a certain level of contrast between elements on your page. For example, a design trend which emerged recently is extremely washed out text on light backgrounds, however that just ain’t gonna cut it unfortunately unless there is a contrast ratio of at least 4.5:1. The thicker and bolder your font however, the more forgiving this ratio becomes. For example, if your font is at least 14-18pt Bold, the ratio will drop to 3:1.

It’s pretty self explanatory why this is important. For those who are visually impaired, higher contrast elements allow them to more easily read what’s on the screen at any given point, meaning a more comfortable viewing experience for them. Additionally, high contrast colours will allow users to skim information and navigate more quickly which is an essential quality in a website or product.

3. Don’t rely on colour

Colour is a huge factor in design of any sort (except them boring old UX wireframes). Even though colour can be used to symbolise a multitude of things (categories, tags, priority, etc), they shouldn’t be relied upon since people with colour blindness or visual acuity will most likely struggle to use the product and understand the content.

Instead, try and incorporate other elements with the colours, especially if the colours symbolise something important. Examples of this would be adding labels, shapes or other visual cues to the coloured elements. This way, you can ensure that even if someone is colour blind, they will still be able to use your website or product without any issues.

Keep accessibility in mind

It’s important to design with accessibility at the forefront of your mind. Otherwise, you may end up having to change all of your designs later down the line and this will waste time.

One method I like to use is to have the WCAG 2.0 guidelines open in a tab whilst I’m designing. If I’m unsure of a design decision I am making, I can quickly and easily refer to the guideline which is fairly easily searchable. The WCAG 2.0 guidelines contain all the information you need regarding accessibility and it’s layout makes it incredibly easy to scan through the different topics when validating a design decision you have made.

Alternatively, there are a multitude of web tools available which allow you to run an accessibility audit on your website. It will return a score and some details about where accessibility could be improved upon. There are a few chrome plugins which offer this service for free. The only downside to this is that the designs will already have to be implemented in code before the check can be made - it’s much better to ensure your designs are fully accessible before implementing them into code.

Welwyn Garden City, Hertfordshire