An illustrated graphic showing a Polaroid camera printing an incorrect photograph of dog with whiskers, with a cat as the photo subject in the foreground, and a pile of printed Polaroid pictures to the side.
Illustration by Davina Tirvengadum.

Considerations when writing alt text

Find out what alt text is, why it’s so important, and how to write content for your images

--

Alt text. We know it’s something that can be added to images on the web, but what is it really? Who is it for? Why should we care? And, perhaps most important, how do we write it?

Let’s explore these questions and more!

What is alt text?

Alt文本,或“替代文本”the long-form name suggests, is a written text description for an image on the web. It helps to describe the image for the reader to understand what the image is about.

In other words, alt text is content. And like any other content on your site, it should be well written and constructed, ready for consumption.

Why does alt text matter?

There are a few situations where writing alt text and including well formed descriptions for your imagery is beneficial for a successful website. Let’s explore the various benefits of adding alt text.

SEO

When search engines, such as Google, crawl your site content, it indexes the alt text found embedded for all images found on the current page. This is used to gain a clear picture (no pun intended) of the content being served in order to provide accurate search results.

A common misconception is that alt text is only meant for SEO purposes, as a way to take advantage of the “hidden text” container and use it to try and increase site rankings among search engines. What’s being described here is “Keyword stuffing” which is the act of using thealtattribute to inject as many “keywords” as possible in order to rank higher in search engine results. This action is greatly frowned upon and may actually lower your ranking. It could also be considered abuse as SEO is not the only reason to have alt text available, as we’ll discover next.

For sighted users

If an image fails to load, potentially due to a poor connection or an underpowered device, the image’s alt text is displayed on screen instead. This has the benefit of letting someone know an image was meant to load here, but as an alternative…

Writer for

Accessibility Specialist at Shopify • Speaker, writer, workshop instructor • W3C ARIA WG • IAAP CPWA •ScottVinkle.me