Why Bother with Alternative Text?

Alternative text is a tool that supports blind and partially sighted people in understanding your content. This text is provided either instead of or accompanying an image or graphic on social media, website content or newsletters.

 

Why is it Important?

Whilst being accessible should be the only necessary reason for including alternative text, there are many other reasons why adding these descriptions can be beneficial. Alternative text helps our reach both amongst visually impaired readers and to a wider audience as they rank better on organic searches as they provide more content for search algorithms to use- which provides better traffic to a website. It also adds to the experience for sighted readers, as if an image faces an error and is removed from a page it can still uphold its context. For example, a graphic is included on a page, and has detailed statistics about sales in the past 3 years; if this information is not included in the text surrounding it, it is completely lost if the image corrupts. However, if alternative text is used to highlight the key features of this graphic, anyone visiting the page can still understand what is being referenced.

 

At Action Hampshire, we started our journey into making our communications more accessible by working with an accessible web designer, and are now working on rolling it out over our website, newsletter and social media. This was not a quick process by any means; having to re-do text if an image is changed, actively remembering to do it consistently, learning what to write each time and fitting it into the character limit, and many more challenges are something that take a while to overcome.  We have successfully added alternative text to our Instagram, Twitter and Facebook posts over the last few months- here is an example from our recent comms posts:

[A graphic with a purple ‘pebble’ reading: ‘Winchester Station Consultation: Winchester City Council is holding a consultation. Share your ideas on how to improve the area around Winchester railway station. Deadline: Friday 21st October 2022’ in white writing and blue highlights (deadline). A cyan pebble slightly overlaps on the right. The Action Hampshire logo is in the bottom right.]

 

Let’s Get Writing!

Writing for an image

The main content of an alternative description for a photograph is as follows:

• A person’s appearance (basic colour blocking and spacing without bias – don’t say ‘ugly’ or ‘pretty’, just describe their expression, hair/eyes and location within the image)
• Prop or other key feature
• Background (is it blurred? Or can you see something clearly? – describe it quickly and explain where it is in the image)
• Try to avoid saying ‘an image of’ at the beginning, unless it contextualises the spacing of objects within it (I will cover this more in the graphic section!)

Here is an example of an alt. text description for the image above (also featured as the thumbnail for this blog):

[Alt. text: A bearded person with dark brown hair is lying down with a ginger and white cat atop their chest. They are wearing a striped grey-blue and white shirt with a white and blue patchwork blanket covering the bottom half of their body. The cat is also slightly covered by this blanket, taking up the bottom left corner of the image. A more colourful blanket with a mosaic pattern can be faintly seen in the background.]

A lot of images won’t need this level of detail, but any extra information you can provide is always better! Be mindful that many sites have a 420-character cap (with some being only 300), so a shorter, more concise version of this would be as follows:

[shortened alt. text: A bearded person with dark brown hair lays under a white and blue quilt with a ginger and white cat. A more colourful blanket is in the background.]

This version has only 146 characters with spaces, and still conveys the key information of the image in simple terms that will be easy to understand.

 

So, how do I describe a graphic with text?

Many graphics feature similar things as a photograph, but require a different level of detail. Here are the main features of a graphic:

• Photograph or clipart/artistic image (describe it in simple terms, utilising the advice above, but specify if this is a real person or a drawing)
• Spacing and colour usage (if the image has multiple sections, describe each one and state the colour of each background)
• Text in quotation marks (I will go into more detail on this, but always specify the colour of the text as some people struggle to see certain colour combinations more than others!)

Whilst considering the overall word count limit of a social media post, work out how much of the graphic can be included within the description and pinned comments of a post. This may be the entire thing, or just a small portion- as long as context is provided, the alternative text can be shortened accordingly.

For example, the image below has four bullet points of text, a title and a line of text for the deadline. This information ideally would be included in the post text, so the alternative text may just say the following:

[alt. text: three rounded sections, one with a blue background and white writing (left), an image of a computer monitor with editing software showing a graphic and several sliding scales for editing colours (right), and a white section at the bottom with the Action Hampshire logo and the deadline in purple.]

This use of ‘three sections’ instead of ‘a graphic split into three sections’ still provides some context but will not read as ‘an image of a graphic split into…’ on a screen reader. However, if you wanted to include the post text within the alternative description, it will need to be shortened considerably to fit this into the character count:

[alt text with post text: three sections, one with a blue background reading “we’re hiring Communications Assistant: 20-30 hours per week (part time) Hybrid working £19,047 (FTE) 1 year contract” in white writing (left), an image of a computer monitor with editing software (right), and the Action Hampshire logo and “deadline: 28 Sept, 5pm” in purple (bottom).]

It provides a lot less detail, but gets the essential information across by putting direction/location in brackets (‘left’, ‘bottom’, etc).

 

I’ve written my alt. text. Where does it go?

Most social media sites will have an ‘image options’ or similar settings feature that can directly attach this text to the image, therefore keeping it separate to the body of your post. In WordPress, this is in the ‘advanced features’ when adding media to a post or page, whereas in Instagram this However, on some older sites this may not be an option- in which case placing this description at the end of your body text in square brackets [x] you will be clearly illustrating the image features to your audience.

————————————————————————————————————————————–

Click this link for a helpful blog on Alt Text, written by the Search Engine Journal.

And for further support, click this link for a blog from Common Look.

If you ever have further questions on alternative text, please do not hesitate to ask! You can email Gina (AH Comms Assistant) via this link.