W3docs
en
Log in

HTML alt Attribute

The alt attribute specifies an alternative text which must be rendered if the element cannot be displayed. See examples of this attribute on different elements.

The HTML alt attribute provides a text alternative for an image (or image-like element). It is read aloud by screen readers and is displayed in place of the image when the image fails to load. This page explains what good alternative text looks like, how alt behaves on each element that supports it, and the common mistakes to avoid.

You can use the alt attribute on the following elements: <area>, <img>, and <input type="image">.

Why alt text matters

The alt attribute does three jobs at once:

  • Accessibility. Screen-reader users cannot see the image, so the alt text is the image to them. Describing the content lets them follow the page. A meaningful alt is what makes an image accessible at all.
  • Broken-image fallback. If the image file is missing, the path is wrong, or the connection is slow, the browser shows the alt text in the image's place instead of an empty box. This keeps the page usable.
  • SEO (a minor bonus). Search engines can read alt text to understand what an image shows, which helps image search. Treat this as a small side benefit — write alt for humans first, not for keyword stuffing.
Danger

For the <img> element, the alt attribute is required. Leaving it off entirely is an accessibility violation: a screen reader will fall back to announcing the file name, which is rarely useful. An empty alt="" is a deliberate, valid choice for decorative images — it is not the same as omitting alt.

Writing good alt text

Aim to describe the image the way you would describe it to someone who cannot see it, in the context of the surrounding content.

  • Be descriptive and specific, but concise — roughly 125 characters or fewer. Screen readers may not pause well in very long alternative text.
  • Do not start with "image of" or "picture of". Screen readers already announce that it is an image, so the prefix is redundant.
  • Convey the function or content that matters in context, not every visual detail.
  • Skip the alt text for purely decorative images by using alt="" (see below).

Good vs. bad alt text

For the same photo of a golden retriever catching a frisbee in a park:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Decorative images: use an empty alt

If an image adds no information — a divider, a background flourish, an icon next to text that already says the same thing — give it an empty alt="". This tells screen readers to skip the image entirely, instead of announcing a file name.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Info

Remember the distinction: alt="" = "this image is decorative, skip it." No alt at all = an error that leaves screen-reader users without any alternative.

Syntax

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

The alt attribute on <area>

In an image map, each clickable <area> acts like a link, so its alt should describe where that area goes — just as you would write link text. Every <area> needs its own, distinct alt; reusing the same value for different destinations leaves users unable to tell the regions apart.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Try it Yourself »

The alt attribute on <img>

This is the most common use. Describe what the image shows in the context of the page. If the image also has a visible caption, consider wrapping it in <figure> with a <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Try it Yourself »

The alt attribute on <input type="image">

An <input type="image"> is a graphical submit button. Here the alt must describe the button's action, not the picture — for example alt="Submit" or alt="Search" — because that is what a user needs to know when the image does not load. The alt attribute is only valid on <input> when type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Try it Yourself »

Practice

Practice
What is the purpose of the 'alt' attribute in HTML?
What is the purpose of the 'alt' attribute in HTML?
Was this page helpful?