Writing Good Alt Text Image Descriptions – A 3-step Concept
Alt text features image descriptions on websites, social media posts and other digital content, describing the essential information in an image.
Without alt text, image content would be completely unavailable to the blind or people with low vision who use assistive technology like screen readers.
UX designer Alex Chen has come up with a great concept of how to write good alt text image descriptions.
Use the object - action - context of an image to describe it.
Object – Action – Context
The object describes the focus of the image.
The action says what’s happening, e.g., what the object is doing.
The context describes the surrounding environment, e.g., where the object is doing it.
Impartial – Short – Depictive
This is a great format as it keeps the image description impartial, short and depictive.
It’s important that the description should be impartial. Like people looking at the image, screen reader users should be able to form their own opinions about what the image means.
Keeping it short makes the description easy to absorb.
And making it depictive helps with taking in all the important aspects of the image.
What is important here depends entirely on the audience. So, you should align the description with the information the audience requires.
Example of Good & Bad Alt Text
Here is an example:
Description: A dog standing in a field.
Object: A dog
Context: in a field.
This simple description would work on a news article about dogs in general.
If, however, this image was featured on a dog breeder’s website, then more detail about the dog would be required such as its breed and visual features. This is a good example of giving the audience the information that it requires, as mentioned above.
You can add more detail to the description to paint a more vivid picture but keep it short.
An example with added detail: A German Shepherd dog standing to attention in a field of grass.
An example with too much detail: A black and sand-coloured German Shepherd dog is standing in a field of green grass. There are a blurred-out wire fence and bushes and trees of various sizes and shades of green visible behind the dog. The dog looks like it has seen something alarming as its ears are standing to attention.
The second example has too much unnecessary detail and is therefore far too long to read. The first example is to the point and gives a concise impression of the image.
A Few More Tips
If your image has a text overlay, make sure that the text is in your description. This particularly applies to images showing special offers as a text overlay. If the text is not mentioned in the image description, then a screen reader user would miss out on the offer.
Most social media platforms have an alt text option when you post images. However, if you don’t know how to add this, just put the description in the caption instead. This is also a good way to make the description visible to screen magnifier users and people with cognitive impairments who might benefit from a description of the image.
It’s always better to have a very brief description than nothing to make an image accessible.
Get in touch if you’d like to know more about writing alt text or web accessibility in general.