Skip to content
Home » Guides » How to write image alt attributes

How to write image alt attributes

Image alt attributes are a crucial part of modern web design and are critical for visually impaired users’ ability to adequately navigate the web. They’re also an important part of image optimization for search. Accurately describing an image using the alt attribute is important for relevant imagery. Here is an example image with a relative image source and descriptive alt attribute:

<img src="table.jpg" alt="Smart Desk Adjustable Table with a 40 Inch Width and 20 Inch Length" width="1280" height="720">

Which images need alt attributes?

Images that are purely for decoration or image icons for search (e.g. a magnifying glass) are not as relevant as image illustrations describing an idea or product or an image that demonstrates an idea in action. However, if time permits, adding an alt attribute to all unique images is preferred (even if the value is simply empty which would be the approach for decorative imagery).

What about the other components of an image?

Here are the primary attributes in a <img> tag:

  • src—where the image is loaded from
  • alt—the text description of the image (shown when the image can’t load)
  • title—a universal HTML attribute that works as a tooltip for the image
  • width/height—sets a specific space on the page for the image (mitigates CLS)

So how do we write alt text?

Advancements in AI can automate some of this work but the old-school way to do it would be:

  • Review the image in question
  • Review the page it appears on (if it only appears on a single page)
  • Write the text

Let’s take the following image as an example:

<img width="600" height="600" src="http://heurisko.digital/wp-content/uploads/2020/01/neve-web-design-bg-13.jpg" alt="Person writing creative slogans on paper at desk">

In the bold text above you can see the alt attribute written for this image. It describes the information in the image in detail.

Rules for writing image alt text

Here are some rules and considerations when

  • Don’t make them too long, 8-10 words max
  • Describe the information from the image first and foremost
  • If you can include words describing the page the image is on then great
  • Consider that your alt text will be read by a screen reader, would it make sense?

Are there any tools to help this process?

Install the Image Properties Google Chrome extension to be able to quickly check the properties of any image on the web without having to dive into the source code.

If you’re writing for multiple images then consider how they will ultimately be uploaded to your CMS. What format can the CMS allow for bulk uploads? If the answer is a CSV then you should consider writing your image attributes in a Google Sheet so you can easily upload them later. If you’re adding them directly to the CMS then you can do that instead.

FAQs

How should I write an image alt attribute if my images cater to pages of multiple languages?

When a site deals with multiple languages it should have URLs that are unique and cater to each language’s audience. On those unique URLs, you should be able to define an alt attribute that is native to the page’s language. For example, you might have two URLs, one in Spanish and one in English, like this:

example.com/spanish/

<img alt=”un niño con sombrero” scr=”hat.png”>

example.com/english/

<img alt=”a boy wearing a hat” scr=”hat.png”>