Writing Alt-descriptions

Images play a crucial role in making websites engaging and informative, but for visually impaired users, they are invisible. Alt descriptions, or alternative texts, solve this problem by attaching small pieces of text to images that screen readers read out to their users.

In today’s bite, you’ll learn how to write effective Alt descriptions that provide textual descriptions of images that aid in both accessibility and SEO.

‍

Why Alt Texts Matter

Alt-texts do not only aid visually impaired users, they also benefit you:

• User Experience: When images don't load due to low bandwidth, alt-texts show instead, providing necessary context.
• SEO: Keywords in alt-texts help search engines understand your content, improving your website's ranking.
• Image Traffic: Alt-texts help your images appear in search results, such as Google images or SERP, driving extra organic traffic to your site.

‍

How to write effective Alt descriptions

Determine Function & Context

• Functional Images: Provide useful information; Alt text is needed.
• Decorative Images: Hold no valuable content; Remove the image from the page content and instead define it as a CSS background image, use an empty alt tag or mark the image as decorative in modern web-builders and software.

The same image can both be functional or decorative, depending on the context. Always consider where your image will be placed and determine if any valuable information would be lost if it wasn’t there.

‍

Constructing a Description

• Be descriptive yet concise. Usually, a few words will already do. Keep your descriptions between 2 words and 125 characters. Screen-reading tools typically stop reading alt text at this point.
• Don't be redundant. Take into account the context that your image is displayed in and avoid providing the same information.
• Avoid starting with "picture of..." or "image of...", as screen-reading tools (and Google, for that matter) will identify images and graphics from the article's HTML source code.
• Use proper punctuation and grammar, improving readability and comprehension for all users, including those using screen readers.
• Include relevant keywords to boost SEO rankings, but remember to write human-first.
• Use keywords sparingly, as Google might penalise your site for keyword stuffing.
• Write out relevant text in the image. Generally, it is best to avoid having any text in pictures, such as word art, because they are inaccessible and do not translate to other languages. If your image includes relevant text, write it out in the Alt-description.

Let's build a description of this image together:

Bad: We're zoomed-in on the face of a brown bear – sometimes known as a grizzly – gazing majestically into the middle distance. Perhaps she's hungry, or has spotted a threat?

If you need to say this much, add it as part of the text on the page. Keep alt texts short and avoid making any assumptions.

Bad: bear, brown bear, grizzly, grizzly bear, mammal, carnivore

Read this aloud. This is not helpful – and Google will think you are keyword stuffing, bringing your ranking down.

Okay: Brown bear

This is fine but you could describe the image more clearly.

Good: Close-up of a bear's face

This gives a clear understanding of what's in the image within just a few words, and makes no assumptions.

‍

Common Image Types

Let’s take a look at some common image types you might encounter, and how to best describe them.

Logos

• Use: alt="Company name"
• If the logo also links to your homepage, add it: alt="Company name home page". Screen readers will already alert the user that the image is a link.

‍

Icons

Icons do not always need their own alt description. If they communicate information, that nearby text doesn’t state already, then describe the intended information, like “Download PDF” or “Visit our Facebook Page”.

Lets take a look through some applications on this website:

• Decorative

• Informative, without label

• Informative, but no alt is needed as it’s accompanied by a label.

‍

Tables, Diagrams & Charts

These visuals are the hardest to describe, as they combine heaps of data and often display visual relations between them.

• Focus on conveying insights, not just visuals: Describing a chart as ‘A bar chart showing sales over time,' for example, would not be useful to a blind person. Try to convey the insight; for example, ‘A bar chart showing sales over time. In July, sales for brand A surpassed sales for brand B and kept increasing throughout the year.’
• If you can’t compress the insights into a short description, provide a longer description in your body text or as an optional separate page.

‍

Images as Links

Describe the action, not just the appearance.

This icon links to a pages Instagram account. “Instagram logo” would not suffice here. “Visit our Instagram page” would work much better.

‍

‍

By following these steps and tips, you can ensure your website images are accessible and enhance both user experience and SEO.