How do I make my website accessible?

If you're anything like me, when writing for the web, your focus is on writing something useful with a close eye on SEO. Accessibility is there, but slightly in the background.

I diligently complete the 'alt text' and consider my headings, but (if I'm honest) this is for SEO, rather than compatibility with screen readers. After reading around the subject though, there is a lot more that I could do.

Why do I need to make my website accessible?

I think it's fair to say, most of us would feel pretty bad if something was created in the real world that couldn't be enjoyed by someone who was visually impaired or who had motor difficulties. The online world should be no different. Accessible to all. This post is really just an overview, but a good place to start for copywriters writing for the web.

Who benefits from an accessible website?

The UK government guidelines for writing accessible web content for public sector websites includes the following explanation:

“It means making your content and design clear and simple enough so that most people can use it without needing to adapt it, while supporting those who do need to adapt things.”

It goes on to qualify that the main categories are:

• Impaired vision

• Motor difficulties

• Cognitive impairments or learning difficulties

• Deafness of impaired hearing

There are lots of things to consider here, two of the main ones being a) how does your content translate to a screen reader? b) can your content be navigated without a mouse?

How do I make my web copywriting accessible?

Choose your CMS carefully for accessibility

The first trick is to choose a CMS that promotes accessibility. This sounds daunting, but after a bit of research I found that someone like WordPress has accessibility documentation with each of their themes. I haven't personally done this, so it’s worth checking it out for yourself.

I won't dwell on this section too long, as the chances are (as the website copywriter) you won't be actually building the website, just writing (or re-writing) the words. The type of CMS you are using can have an impact on your accessibility efforts though. For example, how it deals with video. Which brings me onto my next point...

How do I make video content accessible for people with a hearing impairment?

The obvious answer here is to include captions so that people that are deaf or hard of hearing can access the audio. There are two types of caption - 'open', where the captions are always on and 'closed', this is where the caption option can be turned off where necessary.

Ensure that the voices are captioned in a video, and also include a description of any visually important aspects of the film. No 'auto play' please and make the video play button accessible via the keypad. If you aren’t sure how to do this, hopefully whoever you are working with on the website should be able to help.

With more and more people accessing video content on their phone, this caption option is also beneficial to those in a situation where having the sound blaring out isn't an option.

Along the same lines, any audio on your website should have a full transcript.

How do I use headings in my text to help screen readers?

Screen readers are useful for website visitors who have a visual impairment, but the system only works well if your text is well presented, in a logical order, and uses headings properly.

To help the screen reader navigate your content, use the headings in the correct order.

The top tip that I read was not to skip levels, otherwise the screen reader thinks that content is missing (for example, leaping from h2 to h5).

How do I tackle images and the alt text to make it accessible?

This, for me, is a tricky one. I always thought that the alt text image description was a great way to get in some SEO keywords. Hands up, I haven't always fully described the image. For this blog post, I have completed the alt text for the main images as 'Website accessibility image of Google search'. I’ve added a description alongside a couple of keywords.

Advice seems to recommend leaving the alt text blank if the images are just there for decorative purposes. If the image doesn't really add anything useful to the text, it would be better hidden from a screen reader's gaze.

If in doubt, describe the image in the alt text and save your keywords for the image file name.

Be sure to include any text that is included in the image or convey the information that is locked inside an infographic. One idea is not to include such images, stick to text descriptions. This is true of tables of data as well, unless unavoidable. If you have a choice of typing a word or using an image of that word, just type it out.

Describe your links for good accessibility (and SEO)

Along the same lines as the headings and the alt text, description of links on your page falls into both good SEO and accessibility camps.

Please don't hyperlink 'click here' - screen readers don't like it, and neither do search engines (or users!). Highlight the words that describe where the user is going.

How shall I style my website so everyone can enjoy it?

People with visual impairments might find it difficult to read your content if there is low contrast on your page, for example grey writing on a white background. This is true of other colours as well, for example a person with red/green colour-blindness would find it impossible to read your text if in these colours (although, I think it's fair to say that red text on a green background would be a slightly unusual option).

Black text on a white background is the safe option and allows a reader to increase the contrast if they need to, or zoom to increase the size of the text.

Interactive aspects of your website

I'm thinking about web forms mainly. If a screen reader was reading out each of the fields of your form, would it make sense? Make sure it is very clear what information should be included in each field. For example, don't just write 'name'. Type 'first name' and 'surname'.

Is it important for my reader to be able to skip to other bits of my content?

If your reader is using the keyboard to access their content, rather than a mouse, you're going to want to make it really easy for them to skip to the bits of content they want to read. Perhaps they have a repetitive strain injury, or another disability, but either way long bits of content can involve a lot of scrolling.

One way round this is to use anchors. Anchors allow the reader to jump straight to relevant content and it cuts down on tedious scrolling for those readers not using a mouse. Creating anchors differs depending on what CMS you are using. As an example, here is how to create WordPress anchors

As an aside, having anchor text is probably best practice for all of your readers. Skimming for relevant content and wanting to get to it as soon as possible is important for most website visitors.

Final thoughts on website accessibility

Google clearly favour accessible websites, and having well-structured text improves SEO. It's in your interest to make your writing accessible - both to increase your audience and improve your rankings, they go hand-in-hand after all.