A string which contains the alternate text to display when the image is not loaded or for use by assistive devices.

Thealt attribute is officially mandatory; it's meant to always be specified.If the image doesn't require a fallback (such as for an image which is decorative or an advisory icon of minimal importance), you may specify an empty string ("").For compatibility reasons, browsers generally will accept an image without analt attribute, but you should try to get into the habit of using it.

The fundamental guideline for thealt attribute is that every image's alternate text should be able to replace the imagewithout altering the meaning of the page. You should never usealt for text that could be construed as a caption or title.There are separate attributes and elements designed for those purposes.

Beyond that, there are additional guidelines for usingalt appropriately which vary depending on what the image is being used for.These are shown in the examples below.

Images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have theiralt attributes set to the empty string ("").This is shown in the example below.

HTML

In the HTML for this example, shown below, the<img> element includes thealt property, which will prevent the image from having any alternate text, since it's a decorative detail.

<div>  <div>    <img src="margin-flourish.svg" alt="" />  </div>  <div>    <p>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci      ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac      neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar      ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus      laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus      scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.    </p>  </div></div>

CSS

The CSS for this example sets up the styles for the layout as shown in the result below.

body {  margin: 0;  padding: 0;}p {  margin-block-start: 0;  margin-block-end: 1em;  margin-top: 0;  margin-bottom: 1em;}.container {  width: 100vh;  height: 95vh;  font:    16px Arial,    Helvetica,    sans-serif;}.left-margin {  background-color: rgb(241 240 237);  width: 9em;  height: 100%;  float: left;  margin-right: 5px;  padding-right: 1em;  display: flex;  align-items: center;  justify-content: center;}.left-margin img {  width: 6em;}.contents {  background-color: rgb(241 240 235);  height: 100%;  margin-left: 2em;  padding-top: 1em;  padding-left: 2em;  padding-right: 1em;}

Result

When using an image as a button (by using it as the only visible child of an<a> element representing a hyperlink), thealt attribute must be used to convey the purpose of the button.In other words, it should be the same text you would use in a textual button to serve the same purpose.

For example, in the snippet of HTML below, a toolbar which uses icon images as link labels providesalt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used.

<li role="toolbar">  <a href="songs.html" role="button">    <img src="songicon.svg" alt="Songs" />  </a>  <a href="albums.html" role="button">    <img src="albumicon.svg" alt="Albums"  /></a>  <a href="artists.html" role="button">    <img src="artisticon.svg" alt="Artists" />  </a>  <a href="playlists.html" role="button">    <img src="playlisticon.svg" alt="Playlists" />  </a></li>

When an image contains information presented as a diagram, chart, graph, or map, thealt text should provide the same information, at least in summary form.This is true whether the /me image is in a bitmapped format such asPNG orJPEG or in a vector format likeSVG.

• For a map, thealt text could be directions to the place indicated by the map, similarly to how you would explain it verbally.
• For a chart, the text could describe the items in the chart and their values.
• For a diagram, the text could be an explanation of the concept presented by the diagram.

Keep in mind that any text included in diagrams and charts presented inSVG format may be read by screen readers.This may impact the decisions you make when writing thealt text for the diagram.

Logos (such as corporate or brand logos) and informational icons should use the corresponding text in theiralt strings.That is, if an image is a corporate logo, thealt text should be the name of the company.If the image is an icon representing a status or other information, the text should be the name of that state.

For example, if an image is a badge that's shown on a page to indicate that the content of the page is new and has been updated recently, the correspondingalt text might be"Updated Recently" or even"Updated on 27 August 2019".

In this example, a starburst image with the word "New!" is used to indicate that an article is about something new (and probably supposedly also exciting).Thealt attribute is set toNew Page! to allow that text to be displayed in place of the image if the image isn't available.It is also available to be read by screen readers.

HTML

The HTML below creates a snippet of content from a site using the described icon.Note the use of thealt attribute on the<img>, providing a good substitution string to use in case the image doesn't load.

<div>  <img    src="https://www.bitstampede.com/mdn-test/new-page.svg"    alt="New Page!"    />  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci    ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque    libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id    sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet    cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus    scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.  </p></div>

CSS

The main feature of the CSS here is the use ofclip-path andshape-outside to wrap the text around the icon in an appealing way.

.container {  max-width: 500px;}.page-info-badge {  width: 9em;  padding-right: 1em;  float: left;  clip-path: polygon(    100% 0,    100% 50%,    90% 70%,    80% 80%,    70% 90%,    50% 100%,    0 100%,    0 0  );  shape-outside: polygon(    100% 0,    100% 50%,    90% 70%,    80% 80%,    70% 90%,    50% 100%,    0 100%,    0 0  );}.contents {  margin-top: 1em;  font:    16px Arial,    Helvetica,    Verdana,    sans-serif;}

Result

Images showing objects or scenes should havealt text describing what's seen in the image.A photo of a yellow teapot might literally have itsalt attribute set to"A yellow teapot".