Images, and text trapped in images
A picture tells a story. People who cannot see the picture need the story too. That is all alt text is: the story, in a few words, typed into the box your website gives you for it.
Alt text
Every image on your site has a box for alternative text. In WordPress it is in the media library and in the image block. In Wix it asks "What's in the image?". In Squarespace it is the image's alt text setting. Screen readers read it out in place of the picture. Google reads it too. If the picture fails to load on a slow connection, the browser shows it.
- Say what the picture is for, not what it is. "Children playing in the sensory room at Saturday club" rather than "children".
- Keep it to a sentence. Alt text is not a caption and not a description of every detail.
- For your logo, the alt text is the name of your organisation.
- For a picture that is a link, the alt text says where the link goes.
- Mark purely decorative images as decorative, or leave the alt text empty on purpose. A screen reader then skips them instead of announcing "image".
- Leaving the file name in the box. "IMG_4521.jpg" is what a screen reader says when nobody wrote anything.
- Starting with "image of" or "picture of". The screen reader already says that.
- Trusting the automatic alt text from Canva, Facebook or your platform. "A group of people standing in a room" is not the story.
Text trapped in images
This is the one that does the most damage on SEND websites. Someone makes a lovely flyer in Canva with the dates, the venue, the cost and the phone number. They export it as a JPG and upload it. On the web page, there is a picture and nothing else.
A screen reader user gets nothing. A parent on a phone cannot zoom the text without it going blurry. Nobody can copy the phone number. Google cannot find the event. And in 6 months the flyer is wrong and nobody remembers to change it.
The rule is simple. Type the words onto the page as well. The flyer can sit beside them as decoration. Do not try to squeeze 200 words into the alt text box instead, because alt text cannot have headings, links or a phone number you can tap.
Flyer uploaded as a picture, with this typed underneath it as real text:
Saturday club
Every Saturday in term time, 10am to 12pm
Halifax Central Library, ground floor
Ages 5 to 11, siblings welcome
£3 a session, first session free
Book by calling 01422 000000 or email hello@example.org
Words on photos
A heading laid over a photo on your home page is only readable if the photo is dark enough behind it, in every part of the photo, on every screen. It rarely is. Put a solid colour behind the words, or put the words under the photo instead. And if the photo is slow to load, white words on a white page are invisible until it does.
Check it
- Run WAVE. Every image without alt text gets a red icon. Every image with alt text shows what the alt text says, so you can read them all in one go and spot the file names.
- Try to select the words on your page with the mouse. Anything you cannot select is a picture of words.
- Hover over a flyer. If the only information on the page about that event is inside the picture, type it out.
Find the most recent flyer you uploaded. Type its words onto the page under it, with a heading. Give the flyer itself alt text that says what it is, "Saturday club flyer, details below". Now a parent can copy the phone number.
In the guidelines: 1.1.1 Non-text content (opens in a new tab) (A), 1.4.5 Images of text (opens in a new tab) (AA). The Accessible Social Communications course covers the same ground for posts and infographics.
Discussion
Log in to join the discussion. Your comment will be checked before it appears publicly.