What is alt text?
Alt text is the descriptive text that is supplied alongside an image in a website. It is the text that is used if an image doesn’t load or for other reasons may not be visible to our users. As they aren’t often seen, they are easily overlooked, however, for sight-impaired users they can be an absolutely essential part of your web page. Blind or partially sighted users, for example, will probably rely on a nifty bit of software built into all mobile phones and most browsers called a “screen reader” which will read a web page’s content out loud, including the alt text. So you can see that it’s absolutely vital that they are well written so that everybody has the opportunity to understand our content equally.
Additionally, accessibility is the law. There is a requirement for websites to meet minimum accessibility standards. As a University, our aim is to not only meet but exceed those targets, not just because the law requires it but because it’s the right thing to do.
Writing the perfect alt text
Take a look at the following image taken from the University’s website which we’ll use as our example:
First and foremost, alt text needs to describe the image. It should help users who read it to understand the content of the image. There can be a tendency to write alt text in a way that supports the content of the page but doesn’t describe the image. For example:
“Find out more about our halls”
This kind of thing is no good at all. That won’t help anybody understand the content of the image. It tells us that we’re looking at the accommodation section – but we already know that. It tells us nothing about the image. A much better alt text would be:
“Woman drinking coffee.”
We’ve immediately given the alt text purpose. It’s describing the image. It’s still not great though. We should try to give the image some context. Images on our website should tell a story; they should have a reason to be there. How about:
“University of Derby student drinking coffee”?
Better. We’ve given the image some context. This is no longer a picture of a random stranger drinking coffee, this is one of our students drinking coffee, which makes more sense in the context of the website. Of course, there’s still an issue with this. This alt text could also describe any of the following photos:
The recommended maximum number of characters for alt text is 125, as a lot of screen readers will stop reading out the alt text if it’s longer than that. Let’s see if we can use some more of those characters to give our alt text some clarity:
“A smiling female University of Derby student sitting on a settee in halls holding a mug of coffee”
Now that’s an alt text, and we’ve only used 97 characters!
We’ve described the image in a way that makes it distinct. We’ve given it context within the page and we’ve described the content of the image in detail. If you’re struggling to write an alt text, it might be useful to find another image that’s thematically the same and try to write alt text that fits your image but not the other. A bit like spot the difference. Use a character counter to check the length of your text – you’ll be surprised how much you can fit in just 125 characters!
When to not use alt text
There are a couple of situations where you may not need to add an alt text to an image:
If the image is purely decorative or structural. For example, if you have a fancy underline that’s been done as an image or perhaps a background gradient image. Those images don’t convey any meaning, so they won’t need an alt text.
If the image is already fully explained by the supporting page content. You might have a bar graph that is supported by a table. You wouldn’t need an alt tag for the bar graph as its content is fully supported by the table.
If you’re a web developer, it’s important to remember that the alt text property itself should always be included to meet accessibility requirements but, in these cases, it can be empty.
As a general rule of thumb: if in doubt – use alt text.
In summary:
There are some basic rules that you should follow to make sure your alt text is truly outstanding:
- It needs to describe the image
- It needs to give the image context within the site
- It needs to be fewer than 125 characters
- Do not use phrases like “image of” or “picture of”, let the screen reader handle that