From the early days of the internet, images have played a major role in how we experience websites. For people with sight loss, a substitute exists in the form of alternative text (alt-text). The alt attribute is a means to convey the information and context of any given image. Writing accessible alt-text isn’t so easy for sighted users. They tend to do the obvious and describe what the image looks like.
So, what does good alt text look like? Before I continue, I want to point out the difference between an empty and an absent ALT attribute.
There are situations when an empty alt attribute is perfectly acceptable. An example is when an image is not part of a link or is primarily decorative in nature. Images that are absent of an alt attribute are never acceptable. For now, keep in mind that every image must have an alt attribute present, even if it’s empty.
So, what happens when there is an empty alt tag? Depending on the software, some announce “blank,” which isn’t helpful for users. Others will read out the filename of the image. Imagine an image named “img_215465465.jpg”. Now imagine a screen reader reading that out loud. Not great, is it?
Here are a few tips to help you write accessible alt text.
- Good alt-texts always convey context. Context provides further information beyond describing how the image looks. It contributes to the understanding of the content and what it represents.
- If the image is purely decorative, then give the image a null alt-text.
- Be accurate and succinct. You don’t need to write a short novel. A few sentences that present the function or content of the image will suffice.
- Don’t use phrases like “the graphic is” or “an image of.” It is already clear to the user that an image is there.
- Avoid redundancy. Don’t repeat the same information verbatim from the text that surrounds the image.
- If the image contains text that helps the reader’s understanding, then it must contain an alt tag with descriptive text.
Adding good alt-text can be difficult when you don’t understand your audience. But with practice and by following these tips, we can make web content more accessible.
