5 top tips to make your website more accessible

Have you ever visited a website and been left feeling frustrated by the experience? The text was too small, the navigation didn’t work, you couldn’t find the information you wanted, or did it simply not load on your device?

Now imagine being visually impaired, photosensitive, dyslexic, or hard of hearing or movement. As designers, we’re trusted with the power to remove the barrier between accessibility and imagination. A website can be both visually appealing and accessible to all.

Why does it matter?

The key purpose of a website is to attract as many visitors as possible. Whilst it’s easy to get caught up in how a website looks, it’s important to consider the millions of users who rely on websites being accessible. Here are our 5 top tips:

It doesn’t need to be ugly

Making a website accessible doesn’t mean sacrificing the design, leaving you with a product that’s dated, dull and cluttered. Spending the time to understand the constraints will allow you to consider new ideas, creating a better product for all. With time it’ll become second nature.

Choose your colours carefully

Contrast is key. Studies have found that in Britain, 3 million people are affected by colour blindness. When choosing colour, the focus is making sure the foreground stands out against the background. Put simply, if you’re using a dark coloured background, use light coloured text and vice versa.

BUT it’s important to consider that whilst ‘dark mode’ has risen in popularity, light text on a dark background is more straining on the eyes when read over a long period of time.

Apply visual hierarchy

15 seconds. That’s the average amount of time a user will spend on a website. Within the first few seconds, they will form an opinion: stay or leave.

Have you ever seen a wall of text and completely switched off? This is where visual hierarchy comes into play. Choosing larger font sizes for headings and key information, splitting your content into defined sections, and using a grid layout are all techniques you can use to boost engagement.

Providing variations like this will not only help those who are visually impaired: key information in larger pull-outs, for example, will help even those who see clearly to get the gist of the website without spending the time to deep dive, which could, in turn, help them stay on the site for longer.

Don’t rely on colour for key bits of information

 Less is more. To achieve balance, it’s recommended that you limit your colour palette to 3-4 key colours when creating digital content. When communicating an important piece of information or prompting a response, consider pairing colour with a visual prompt such as increased font size, weight, underline, shape, or label.

 Colour should be used to highlight or complement what you can already see.

Scope, the disability equality charity, is a great example of keyboard accessibility and colours done well.
Support keyboard navigation

Many users are unable to use a mouse, relying on their keyboard tab key to navigate. This includes elements such as drop-down menus, buttons and forms. By using design devices such as background tints and icons, users can easily determine where they are on a page, removing the need to guess as they scroll.

Do you need help making your website more accessible? Send me a message at an@cwa.co.uk.

Written by
Amy Neece
  • Facebook
  • Twitter
  • LinkedIN