Close your eyes. Imagine someone reading a web page out loud. Now, imagine that some of those words make no sense because they’re vague or omitted altogether.

Browsing a website using assistive technology, like a screen reader, relies on accurate headings, labelling, and tagging to move easily across content and to convey a complete picture. Alt text (or alt tags) illustrate the perfect opportunity for incorporating digital accessibility into your website.

 

Alt text describes an image. It’s descriptive, informative, and concise. With great alt text, your words should make the content of the image clear.

As a rule, every image on your web page should have alternative text—unless it’s purely decorative. We’ll tackle this topic later. If you’re new to alt text and need to start with the basics, head over to the Siteimprove Help Center.

If you’re more advanced, read on for specifics tips to elevate your alt text to the next level.

Reflect on the image purpose

The purpose of an image is to enrich storytelling, nudge behaviour, or to be informative. Reflect on your image’s purpose. Does it expand on the context of the article? If so, think about how to put that into words.

If an image conveys information, you would not otherwise know without seeing it, then describe it as alt text. Remember, alt text acts as a direct, written substitute for the image.

Let’s look at a higher education website as an example. The ‘Student Life’ page may include a photo of students doing a class assignment. Without seeing the image, reading alt text that says ‘students with notebooks’ doesn’t fully capture the story or the purpose.

The actual image shows three students sitting at a picnic table outside working on an assignment. In this case, a better description might be ‘three students collaborating outside’. The purpose of that image is to paint a picture of campus life and a relaxed study atmosphere. Oversimplifying the alt text ignores the purpose.

Three students collaborating outsideThree students collaborating outside

Describe who, where, and what

Answer the question of who is doing what and where? If there’s a colour in the image that’s relevant, mention it. Alt text that’s written as “sophisticated woman carrying red designer bag” paints a clearer picture than “woman with purse”.

Make your words sharp, concise, and informative. Avoid writing ‘image of’ or ‘picture of’. Screen readers automatically announce an image as an image. So, an alternative text that’s written as ‘image of an apple’ would be read aloud by a screen reader as ‘image, image of an apple’. If the image is an illustration or technical drawing with important information, it’s okay to state such. Alt text should not be used to describe irrelevant details.

Technical drawing of male and female formsTechnical drawing of male and female forms

Relate it to the surrounding content

Dive deeper into the context of the image and the surrounding article. A web page with content on social media tips might include illustrations of a posting schedule. Write the alt text so that the relation of the image to the context is expressed. Crafting alt text to read ‘calendar’ is less valuable than describing the image as ‘social media calendar’.

Social media calendar

Use keywords—if they make sense

Include important keywords ONLY if it makes sense within the context. Don’t cram in words. Search engines crawl your pages for keywords in all your content—including your alt text descriptions. If you find an opportunity to add a target keyword, it should be accurate and should not be excessive. Siteimprove SEO helps you target the right keywords. Optimize those alt tags when it makes sense to get a boost in your search engine rankings.

Tell them where they’re going with destination links

If the image is a link, describe where the destination takes you. In this case, your alt text should describe the purpose of the image rather than the image itself.

Don’t ignore decorative images

If the image is purely decorative, do not give a description. However, leave an empty alt tag (alt=””). Screen readers ignore these tags and skip to the next relevant piece of content.

Keep it concise

Long alt text provides a poor user experience for people using screen readers. Keep it as crisp and concise as possible—while still delivering a complete picture.

Now that you’ve got a few strategies for crafting great alt text, make a practice of writing it so that it adds value. Does it accurately convey what the image is about? Is it short and concise? If you closed your eyes as it was read aloud, would you get a good understanding of what it portrays?

Images are valuable for a multitude of reasons: SEO (keywords), a richer experience, information, nudging, and accessibility. If you spend time carefully sourcing or designing your images to appeal to visitors, why would you let those images go ‘unseen’ by as many as 20% of your website’s visitors?

To ensure all visitors get all the full context of your web page, don’t just write alt text, write great alt text.

 

Understand how people with low vision use the internet by watching our on-demand webinar.