How to write great image alt text

A few weeks ago, I talked about all the accessibility guidelines related to images. Today, I want to talk about text alternatives for images, which is a requirement for most of those WCAG guidelines.

As a general rule, alternative text should describe the image within the overall context of the surrounding content. The description should capture both the details of the image and its purpose on the page.

The image below is taken at Wallis Sands Beach and shows a crowd of people enjoying the ocean on a sunny day. Depending on the context, this image could be described in multiple ways to communicate its purpose within the content.

Example #1

A tourism page with a title that reads “New Hampshire’s Scenic Beaches”

In this case, let’s assume the image is used in a card-based grid layout that highlights various beaches across the state. Each card includes the beach name, an image, hours of operation, and an address.

The image alt text here might read like this: “Beachgoers enjoying the ocean waves at Wallis Sands Beach.”

Example #2

A news article with a title that reads “Local beach raises parking fees to keep up with administrative costs”

In this case, let’s say the image appears at the top of the page, just below the title. The article details the city’s rising costs as the number of beach patrons continues to rise each year.

The image alt text here might read: “Crowded beach on a summer day at Wallis Sands.”

So why the difference? The image description from example #1 wouldn’t be the best fit for this story due to the tone and subject matter of the content.

As you think through writing alt text, be sure to ask yourself, “What’s the purpose of this image on the page?” Then, craft a description that adds clarity to that purpose.

Some more tips to keep in mind

• Use an alt attribute on every image: An alt attribute is a requirement even if it’s blank, like with decorative images
• Keep your image description to 1-2 sentences: focus on the key focus of the image, not every detail
• Don’t use phrases like “image of …”: screen readers already announce that the element is an image, so including that in your description would be redundant and unnecessary.