How to improve the accessibility of your website

As website owners, we want our website to be accessible to as many people as possible. 

This includes those with disabilities that impact the way they use a computer and navigate the world wide web.

It is our responsibility to ensure our websites can be used by people with a variety of impairments including visual, speech, physical, neurological, auditory and cognitive.

Now, I’m going to be super honest here and admit that my website is not as accessible as it could be, and there is definitely room for improvement. But we can all start by making a few small changes that could make a huge difference to the users of our website.

In this post, I am going to show a few ways in which you can improve the accessibility of your website.

Always add alt text to your images

Alt text (short for “alternate text”) is text that describes an image on a website. It is inserted into an image HTML tag (<img>) using the alt attribute.

Screenreaders, often used by the visually impaired, will use this alt text to inform the user what the image is showing. When a screen reader comes across an image in a website it will look for the alt text and read this out.

Let me give you an example. Here is a photograph…

Here is an example of the alt text that I might give to this image:

Photograph of a blue notebook with “I am really busy” in gold lettering on the front cover, next to two pens and a plant.

You can almost visualise this in your head without seeing the photo.

Try to be as descriptive as possible but also try to avoid using more than 125 characters as many screenreaders will cut off after this point.

Alt text is also used by search engine crawler, so it can be good for SEO. But make sure you focus on accessibility first rather than just filling up the alt text with keywords

How to add alt text to images

Alt text is added to an image using the alt attribute. It looks something like this:

alt="Your alt text here"

You would need to replace the text that says “Your alt text here” with the alt text you want to give to that particular image. This alt attribute should be added to an image tag like so:

<img src="photo.png" alt="Your alt text here">

Alternatively, if you use WordPress, you can easily add alt text to an image when you are in the image editor. Just look for the Alternative Text field and type your alt text into it.

Don’t make your text too small

In some circumstances, small text might look aesthetically pleasing. Sure, it can look cute and dainty, but it’s hard to read! I have near perfect vision and I struggle to read text that is 12px in size, so think about those with visual impairments will manage.

I would not advise making your text any smaller than 16px or 1em or else it will be too difficult to read.

To go a step further, you could provide options so that the user can change the size of the text if they need to. If you use WordPress, you can install a plugin called WP Accessibility which will allow you to add a toolbar to your website, and this toolbar will allow the user to change the text size.

Make sure there is a high contrast between text and background colours

The colours used for text and background on your website can have an impact on accessibility. As a general rule, the higher the contrast between the text and background colours, the easier the text is to read.

If you aren’t sure whether your colours contrast of not, I recommend using a tool like Contrast Ratio to test this. All you have to do is enter the background colour and the text colour. You will then be given a contrast score.

You are aiming to see a green circle in the middle of the two colours which means the contrast is high.

Here is an example of two colours with low contrast:

And here is an example of two colours with high contrast:

Avoid relying on images

Nowadays, websites are very visual platforms.  However, you should try to avoid creating a website that relies on images.

Something I’m seeing a lot of at the moment are images containing a large amount of text as a substitute for text written in HTML. For example:

And I get it; it’s a lot easier to create an image in the format you want in comparison to coding it by hand.

However, this is going to be a big problem for someone who navigates the web using a screen reader. The screen reader isn’t going to be able to read the text on that image and so the user might completely miss out on this content.

Sure, you could use the make the alt text the same as the text on the image, but as previously mentioned, screen readers often cut off alt text after 125 characters. So if it’s a particularly large amount of text then this won’t be possible.

Use headings to structure your content

Headings provide a helpful way of giving your content structure and breaking it down into relevant sections. They’re also good for SEO and can help to improve the accessibility of your website.

Those of us with good vision can skim read a web page using the headings and read the sections that are relevant to our needs. In a similar way, some screen readers use these heading to inform the user of the content of the web page and allow the user to skip to the section that they want to read.

It is for this reason that headings should be descriptive and the different ranks of heading should be used correctly. For example, h1 (heading 1) are the most important and should only be used for page titles. The h2 (heading 2) are the next import, then h3 (heading 3) and so on.

Use descriptive links

Descriptive links are links that give some context as to where they will take the user to when they click on it. Screenreaders may read a web page by moving from link to link, so giving a link some context is very helpful.

For example, if I was to create a link and the text said “Click here” then this does tell the user anything about the destination of this link.

However, if I was to create a link that said “Click here to read my blog” then it tells the user that this link will take them to my blog. This is a descriptive link.

Pin for later?