Images That Communicate

Every image on a page needs an alt attribute. The value of that attribute determines what a screen reader user hears when they encounter it. Getting this right is one of the most impactful accessibility improvements you can make — and it is a one-attribute change per image.

What the alt attribute does

The alt attribute provides a text alternative for an image. Screen readers announce this text in place of the image. Search engine crawlers index it. And when an image fails to load — broken path, slow network — the alt text appears in its place.

<img src="pine-ridge-trail.jpg" alt="A hiker crossing a log bridge over a rocky stream in a Pacific Northwest forest">

The alt attribute is not optional. An <img> without alt is treated differently by different screen readers — some announce the file name, some say “image,” some skip it — all of which are worse than a useful description.

Informative vs decorative images

Not every image conveys meaningful information. A decorative image — a background texture, a purely stylistic divider, an icon that duplicates adjacent text — adds no information that is not already in the page content.

Informative image: The image itself communicates content. A photo of a trail conveys the terrain. A diagram of a boot explains the parts. A photo of a person illustrates who they are.

Decorative image: The image is visual styling. A scenic banner photo that does not appear in any text description. An icon next to a button label that already says what the button does.

For informative images, write descriptive alt text.

For decorative images, use an empty alt attribute: alt="".

<!-- Informative: the image communicates the trail terrain -->
<img src="summit-challenge-peak.jpg" alt="Rocky alpine summit with a narrow trail leading to a 360-degree view above the treeline">

<!-- Decorative: purely visual, duplicates no useful content -->
<img src="divider-wave.svg" alt="">

An empty alt="" tells a screen reader to skip the image entirely. This is correct behavior for decorative images. The screen reader user misses nothing — there was nothing to miss.

Do not omit the alt attribute entirely. alt="" and no alt attribute are different. No attribute means the browser must decide what to do, and different screen readers decide differently.

Writing meaningful alt text

Good alt text describes what the image communicates — the content, the information, the meaning — not what it visually looks like in a literal sense.

Ask: what would a user miss if this image did not load?

That is the information your alt text should convey.

Image	Poor alt text	Good alt text
Photo of a mountain trail at sunrise	”image"	"The Pine Ridge Loop trail winding through tall conifers, lit by early morning sunlight”
Icon of a phone next to a phone number	”phone icon”	alt="" (the phone number text is already present)
Photo of a hiker wearing a boot, labeled “best for rocky terrain"	"hiker photo"	"Close-up of a hiker’s foot wearing a stiff-soled hiking boot on a rocky surface”
Decorative wave pattern between sections	”wave”	alt=""
Founder’s headshot with name in caption below	”photo"	"Marcus Webb, founder of Summit Trail Outfitters”

Length and detail

Alt text should be as long as it needs to be and no longer. A photo of a trail needs enough detail to understand the terrain. A product photo needs enough detail to understand what is shown.

Avoid starting with “image of” or “photo of” — screen readers already announce that the element is an image. Start with the content directly.

<!-- Don't start with "image of" -->
<img src="river-canyon.jpg" alt="Image of a canyon with a river">

<!-- Start with the content -->
<img src="river-canyon.jpg" alt="A narrow canyon carved by a turquoise river, with steep red rock walls rising on both sides">

Images in links and buttons

When an image is inside a link or button and there is no other text, the alt text serves as the accessible name for the control — not just a description.

<!-- Image-only link: alt text should describe the destination, not just the image -->
<a href="index.html">
  <img src="logo.svg" alt="Summit Trail Outfitters — Home">
</a>

<!-- Image-only button: alt text should describe the action -->
<button>
  <img src="search-icon.svg" alt="Search">
</button>

If the image inside a link or button is purely decorative — because the link has visible text label — use alt="".

<!-- Icon decorates text that already explains the link -->
<a href="tours.html">
  <img src="arrow-icon.svg" alt="">
  View all tours
</a>

Exercise

Open the Summit Trail Outfitters pages and review every <img> element.

For each image, decide: is it informative or decorative?

1. Informative images — write a descriptive alt value. Use the questions:

   • What is in this image?
   • What would a user miss if it did not load?
   • Does the text around it already explain what the image shows?

2. Decorative images — set alt="".

3. Images inside links (logo linking to homepage) — write alt text that names the destination or the brand, not just what the image looks like.

For the STO site, expected alt text patterns:

• Logo: alt="Summit Trail Outfitters — Home" (image is inside a link)
• Tour photos: describe the terrain and activity visible in the image
• Founder/guide headshots: include the person’s name if it is not already in nearby text
• Decorative dividers or background images: alt=""

After reviewing every image, no <img> element should be missing an alt attribute, and no informative image should have an empty or meaningless alt.

Recap

• Every <img> element requires an alt attribute.
• Informative images get descriptive alt text — what the image communicates, not “image of.”
• Decorative images get alt="" — screen readers skip them entirely.
• Images inside links or buttons use alt text to describe the destination or action, not the image appearance.
• Do not omit alt — alt="" and no attribute are not the same thing.