Most websites need images! Black and white webpages that only contain text would be very accessible, but would not make a good experience for most people. While many of us take images as their visual construct, it’s important to remember that not everybody can see a ‘flat’ image – we need to make sure that as many people as possible can still get an image’s context.
1. Alternative text
In scenarios where the image you are presenting cannot actually be seen, we need to provide alternative text (or ‘alt text’ for short). This is a text-only fallback that for browsers assistive technologies to present in certain scenarios, such as:
- Hovering the mouse cursor over the images to provide greater context
- A weak or no internet connection not being able to download the image, as images are much bigger than webpages with text, in which case the alt text will be shown instead
- Users with screen readers, who read out the alt text instead of seeing the image
Taking the image of apples above, there are different levels to which we can give it alternative text:
- ‘Apples’. While better than nothing, this alternative text is okay at best. It tells the user that there is an image of apples, which is not very descriptive or contextual.
- ‘Red apples’. A bit better as there is more description, but it is still very limited. There is still no notes of anything specific or in-depth.
- ‘Person holding 4 red apples’. This alternative text is much more informative. Whilst still short, it describes the focus of the image with more detail. The more detail, the easier it is for someone who cannot see the images to build a better model in relation to the rest of the page.
Tips for good alternative text:
- Be descriptive and specific about the focus image
In the example above, we are concerned about the apples as they are the focus of the image – not the holder’s beige coat in the periphery, so we’d best not describe that. - Keep your alternative text beneath 125 characters
This is a common cut-off point for popular screen readers, so they will not read beyond that. - You do not need to precede with ‘Image of’ or ‘Picture of’
It is already clear to technologies that you are working with an image, as the element is set in the code. Including the above, while not hampering accessibility, will repeat that context and potentially waste character space.
For information on how to add alternative text to images in the CMS see our guide to uploading Files (to add alternative text to the file wherever it is used) and uploading Images (to add text specific to the image on that page).
2. Images of text
Knowing that not everybody will be able to see images, it is no surprise that presenting with the intention of it being ‘read’ is not very accessible.
Images are flat. Any text an image contains are part of the image, and not the webpage itself. Being part of the image, it cannot be read by browsers or assistive technologies. Alternative text may go some way to amending this, but often cannot complete the job. Most obviously this is because alt text is limited to 125 characters, but there is also the question of context – a user is expecting an image, not informative written content. So, where the text within an image is intended to be read or essential, it must also be presented in a textual manner.
Taking the poster to the right as an example, we have a few options:
- Just put the image on to the page
As we have covered, this is inaccessible. If you cannot see the image visually, there is essentially nothing there for you. - Using only alternative text
Though not optimal when it comes to images of text, inserting the image text as alt text is viable – up to 125 characters of course. However in our case on the right, to put every word from the poster into the alternative text would come to 287 characters – so too much to include it all. We would also lose all sense of hierarchy conveyed by the size and position of text in the poster. - Include all text alongside the image, then give the image alternative text
This is the best solution! If we include a content block alongside our image, writing out the image’s content in full, and provide the image with alt text (something like ‘Plastic: The New Marine Life poster’), we give more users the best scenario.- In your written content, you can maintain that hierarchy by making the word ‘Plastic’ a heading, and you can also create accessible links to the URL fishingforlitter.org
- If you can see the poster, you can see that the content is duplicated – you can make the choice to either read the poster or the content, and get the visual aid of the poster either way.
- If you cannot see the poster, you get the alternative text to know what the poster is about and then you get the entire text content. If headings are used, you will still understand the hierarchy of the text. If links are used properly, you will be able to click and visit fishingforlitter.org.