Alt-text is an accessibility best practice and part of the WCAG criteria. But many people struggle to get the description right. Or they add descriptions to decorative images.
Alt-text is not technically difficult to add. But knowing how to write a meaningful, useful image description can sometimes be tricky. You have to make a judgment call as to whether this information adds or distracts people from your message.
You might think you’re being compliant but are you actually accessible?
The lack of alt-text is one of the most annoying issues I regularly encounter as a blind person.
Below are some examples of common alt-text problems, and how to fix them. I’ve based the following examples on what I find helpful. You can use them as a reference when drafting your image descriptions.
Alt-text that should be decorative
Not all images need alt-text. And the internet is full of them. You can mark images that add no meaning or value as ‘decorative’.
Below is an example of a decorative image in a BBC news article, entitled ‘Can technology help authors write a book?” The image features a person typing on a laptop. Without the image, the article still makes sense. And that’s what makes it decorative.
Loads of images on a website can be a barrier for screen reader users, too. A page full of decorative images with excessive alt-text adds noise to the page.
Marking an image as decorative means that a screen reader will skip over it. So unless the image contains useful information, mark it as decorative.
Your image is probably decorative if it:
- does not add further meaning to the content
- is a stock image
If it’s not marked as decorative, and you don’t include alt-text, some screen readers will simply read out the file name. This creates a frustrating user experience for blind and visually impaired users. Imagine hearing “IMG095778.jpg” read aloud over and over again.
Decorative images should have alt-text of ‘null’ in the HTML (alt=“”) so screen readers can ‘ignore’ them. Depending on your CMS, you might have to tick a box to mark the image as decorative.
In some cases, you may be unable to mark an image as decorative. (For example, because there are limitations with the software, social media platform or CMS). And a screen reader may announce the image file name when it’s not ‘told’ it’s decorative. This is also why it’s good practice to make sure your images have accurate names.
But there are still ways you can make your image descriptions as useful as possible. Like on Twitter where you must add alt-text.
Alt-text that misses important information out
This is another issue I often encounter. Below is an example of a photo advertising a t-shirt on a fashion retailer website.
The alt-text is “I Saw It First oversized tee with slogan front in black , 1 of 4”.
The alt-text description above is missing important information about the t-shirt. While the description describes that there is a slogan on the t-shirt, it doesn’t tell us what it says. Here, it would be more useful to take out the brand name (‘I Saw It First’) from the alt-text and include detail about the white text slogan written across the chest instead.
If you don’t include this information in the alt-text, screen reader users have no way of knowing it’s there. The ‘slogan’ could be anything! And not everyone may be comfortable wearing a top that says ‘hot mess’ on it.
For screen reader users, this is essential information. As well as causing frustration, it seriously affects my decision to buy the product or not. It’s shocking how many online shopping sites lack good alt-text or detailed descriptions of items.
Everyone should have access to all the information you’re sharing, including text within images.
Detailed alt-text and descriptions of items mean that we can shop online independently. Without them, I have to rely on someone to tell me what the items look like. It’s frustrating.
Alt-text that’s not descriptive enough
I often come across alt-text which is not descriptive enough. Vague alt-text gives me little information about the image, or why it’s there. It leaves me guessing, and frustrated.
It reminds me that I do not have access to the same information that a sighted user does.
Alt-text should be a written description of the visual aspects of an image. One good tip is to think about how you would describe the image to someone over the phone. How much detail you include depends on the context.
For example, an interior design website may use detailed alt-text descriptions for images. Describing the colours, textures and design features of a room. This is because an audience of interior designers may need that level of detail.
Alt-text example 2: “Dog”
This tells us that the picture is of a dog, but there’s a lot more that you could say here.
What colour is the dog? What breed is it? What is it doing – is it lying down, sat, or playing? These are just some of the questions that you could answer.
Alt-text that’s overly descriptive
Here, it’s worth noting that long image descriptions that contain a lot of detail can also be a barrier for assistive technology users. This is because they take a long time to read aloud.
Example 1: “An image of a fashion website displayed on a laptop screen. It is on a white table alongside notebooks, a phone, stapler, cello tape dispenser, a desk lamp and pink roses. The pages of the fashion website are: home, about, contact us and resources. There’s a poster with a quote about creativity in the background.”
Here’s how you can improve it.
Do not include ‘image of’, ‘picture of’, ‘graphic of’ at the start of every alt-text description
Most screen readers announce either ‘image’ or ‘graphic’ before reading out the alt-text. Adding ‘image of’ creates a tedious and repetitive experience for screen reader users.
Avoid unnecessary detail about colours and appearance
The first part of this image description is helpful. “A website displayed on a laptop screen,” tells us exactly what the image shows. It’s concise and straight to the point.
But we don’t necessarily need to know what the stationery, or website, looks like. Unless you were using this image on a website about web design, for example. Or a personal blog, or stationery website.
Be succinct and specific
Avoid unnecessary wording that adds length.
Ask yourself, ‘can I write this description using fewer words?’ Instead of saying “An image of a website displayed on a laptop screen. It is on a white table.” You could say “Laptop on a table showing a website.”
Writing good alt-text is all about finding the balance between essential information and length. One or two sentences is usually enough to write a clear, concise description. But the information you include is more important than the length.
Consider if your image is decorative, again
Throughout the process of writing your alt-text description, you might struggle to come up with a useful description. If you find yourself slipping into vague descriptions of “people smiling” or “person working” then your image might be decorative after all.
Alt-text that focuses on irrelevant information
Example 1: “A person holding an iPhone on a purple gradient background. The background colours go from lilac to purple to blue.”
Alt-text that focuses on irrelevant information is not helpful. It can cause more confusion for screen reader users.
Describe what the image is saying
Here, the alt-text focuses on the wrong parts of the image. It includes too much irrelevant detail about the background colours. And not enough detail about what the image is actually saying.
While “a person holding an iPhone” is correct, the emphasis should be on the icon of a wheelchair user on the phone’s screen.
Alt-text should always be about the image itself, rather than filling it with unnecessary information. Always think about your end user’s needs.
Automatically generated alt-text that has not been edited
Certain software can generate alt-text automatically. Social media platforms Facebook and Instagram use artificial intelligence (AI) to generate automatic alt-text.
But automatic descriptions are often inaccurate and misleading.
For example, AI software describes the Big Hack logo as ‘a sign’. Not only is this incorrect, but it’s confusing for screen reader users who may be expecting a logo.
Let’s take another example. Below is a photo of me sitting on a chair with a birthday cake on the table in front of me.
Facebook’s AI software describes this as: “image of 1 person, cake and indoor.” While this description is technically correct, it’s not particularly accurate or helpful. It could be a photo of a pastry chef, or a child making cupcakes or a bride with her wedding cake.
Facebook and Instagram’s descriptions have improved a lot in recent years. For example, Facebook can recognise whether one of your friends is in a photo. And can even attempt to read text embedded within images.
But it still has a long way to go. The technology is not at the point where blind and visually impaired people can rely on it.
So make sure you review and edit any automatically generated alt-text descriptions.
Knowing when to use images and when not to
Images are a great way of conveying a lot of information, quickly. But having lots of images can make it harder for screen reader users to get the information they need quickly.
Think about what you’re using an image for and what you’re trying to tell people with it.
Every time you use an image, ask yourself:
- What information am I communicating with this image?
- Is this the best way to convey this information?
- Can I use a different format?
Hopefully, these alt-text examples can help make writing image descriptions a bit easier.
More alt-text resources
How to write better alt-text descriptions for accessibility
WebAIM’s guidelines on alternative text
W3’s alt-decision tree for writing alternative text
University of Leicester’s guide to writing effective alt-text
Contribute an article
The Big Hack is an open community, and if you have an idea, or an article, about how to make the digital world more inclusive, we want to hear from you.Message us about a contribution