Making your website work better with screen readers

My last post was all about getting text to look clear for people with visual impairments, so this time I’m going to take it one step further and talk about making your website work better with screen readers, and with virtually no technical knowledge. I should qualify that by saying that there are techy things you can do to improve it even more, but I’ll deal with these in a later post.

Like all changes made for accessibility, these suggestions will make the site better for everyone – and may even improve your search engine ranking!

Read on to find out more…

How do screen readers work?

If you can spare a couple of minutes, head on over to YouTube where you’ll find loads of videos demonstrating how screen readers are used. My favourite is this one – but feel free to have a wander and check out some others.

How screen readers navigate the page

As you can see from the video, screen readers don’t just read the page from top to bottom – that would be very tedious indeed. What the users of the readers can do is skip between blocks of content, filtering out the stuff they don’t want to know and getting straight to the bits they do want to know about. They do this principally by skipping between headings and/or links, and this is why it’s so important to pay attention to these items.

Images are also important for screen readers. If there’s nothing on the site to describe the image then the experience of visiting your site for a visually impaired person is going to be very tedious. Not only that, but if you use images as links then they may not even realise that they can click the image to go deeper into the site.

What to do to your website to make your website screen-reader friendly


The key thing to do here is to get your headings structure consistent and to not skip any levels.
Have just one h1 on the page, then use h2 for the main sections within that page, with h3 as sub-sections, h4 as sub-sub-sections, and so on.

For example, a typical structure might be:

h1: page title

h2: what this article is about

h2: why it’s important

h2: who it affects

h3: group A

h3: group B

h3: group C

h2: What to do about it

h3: technique 1

h3: technique 2

A structure like that will allow the screen reader to skip the content about who and how, and get to the useful ‘what to do’ section with just three tabs.
If you change this structure so that, for example, everything is an h2, then the screen reader user will have to tab through six sections before getting to the ‘what to do’, plus those sections will have meaningless titles such as ‘Group A’ so he’ll have to read the article to work out where he is on the page.
Like headings, screen readers can skip between links/buttons, so if every link you have says “read more”, “find out more” or “submit” then the user will need to resort to reading the full page text to find out where they are on the page.
The easiest solution is to think about where the link is sending your visitors and change the wording to show that. So you might, for example, change the link to your Services page from “Find out more” to “Find out more about our services”. Or you could change the “Submit” button on a form to read “Send message”. Anything that clarifies things is always good, never bad.
Images on websites have three purposes:
– Decoration
– Information
– Click to go elsewhere on the site
If you have good vision and can spin your mouse quickly around the screen you’ll be able to work out which image does what within seconds, but if you can’t you’re going to need some more information to tell you what these images are about, and this is what the ‘alt txt’ field is all about. You can find this easily in your WordPress media library – find the image you want to edit, click on it and find the Alt txt box:
[image here]
What should you put in the alt text?
Please DO NOT add anything here that’s not about the image. Don’t use it for keyword stuffing – you’ll anger visitors who use assistive technology and lose Google points.
Best practice for each type of image is as follows:
– For decorative images, you can either leave the alt text blank (I would do this for small embellishments), or describe the image. I always do the latter if it’s a photograph. Make it as descriptive as you can so that you’re enhancing the experience for the visitor, in the same way that the image itself enhances the website for a sighted visitor. For example, you might want to say “picture of a young girl in a red coat swinging in a park on a summer’s day”.
– For informational images, describe in words the point that the infographic is trying to make, for example “this image shows the percentage of people who use mobile phones to access the web”.
– For images which are clickable, describe the image AND say what happens if you click it. For example “Click here to go to our page about local parks. This image is of a young girl in a red coat swinging in a park on a summer’s day”.
If you’d like to know more about screenreaders or accessibility in general, feel free to give me a call on 07762 140 433.