How to make an accessible website

In the UK, there are almost 2 million people living with sight loss. Of these, around 360,000 are registered as blind or partially sighted. A lot of these people still use the internet, but they access it differently to me and you. If your website isn’t accessible, it puts an instant stumbling block to these potential 2 million visitors.

Being aware of how to make an accessible website is a huge part of web design and marketing, and expands your audience at the same time.

Visually impaired visitors of your website will often use a screen reader to access your content. Screen readers will read the alternative text (called the alt attribute or alt tag) of an image to help the visitor understand what the image is depicting.

Alt tags also provide better image descriptions to search engines, which helps them to index an image properly.

Alt text should be suitably descriptive. Ideally, you should be able to read the alt text and conjure up a reasonably accurate image in your head without actually seeing the picture.

When you upload an image to a blog post or page, you should have the ability to click on the picture and add an alt tag. On WordPress, it’s called ‘Alternative Text’.

Take this as an example:

A poor description of this image would be ’waffle’.

A good description could be ‘Circular breakfast waffle with fresh raspberries, served on a plate’.

Finally, some people try to use alt tags to stuff more keywords onto their website, such as ‘waffle breakfast waffles fruit healthy food tasty’.

This is not recommended, as it creates a poor user experience for those using screen readers. Google is also aware of this practice and penalises websites that do it.

Most people do not read all the content on a web page; they skim read it looking for something relevant to what they are looking for.

Buttons that say ‘read more’ or ‘find out more’ aren’t very helpful as they don’t immediately tell the visitor what they will be reading more about. They’re also bad for accessibility, as screen reader users will not be able to easily tell where the link will be taking them.

Rather than ‘read more’,  consider using ‘read more about shoes’ or ‘find out more about us’.

Around 1 in 12* men and 1 in 200* women have some degree of colour vision deficiency.

It is important there is sufficient contrast between the background colour and the text colour to ensure people can read it easily.

White text on an orange background might look nice, but it’s not an easily accessible combination.

A great website you can use to check colour contrast is https://colorable.jxnblk.com/

Ideally, you want it to say ‘AA’ or even better ‘AAA’ next to the number at the top. Anything over 4.5 is deemed to be a suitable level of contrast.

https://www.nhs.uk/conditions/colour-vision-deficiency/ *

Most websites these days have at least one contact form.

Each input field, name, email, message, etc…, should have a clear, meaningful label, such as ‘Email Address’ that is visible all the time and doesn’t disappear when you click into the field.

This rule applies to any form on your website, from newsletter sign-ups to My Account registration. It has to be obvious what field the user is filling out.

Breaking up a page into logical sections with headings makes it easier for all users to quickly understand the structure of your page and access what they need.

Furthermore, heading tags also allow screen reader users to easily jump from section to section.

Heading tags should follow a logical order and not jump levels.

For example, if you had a section with the h2 heading ‘Our Products’ with 4 products underneath it, the headings of the products should be h3 and not say, h5.

If you would like to know how to make an accessible website for your users, get in touch with our team today and we can help!