In this example, a portion of an editor interface is displayed. Each button has an icon representing an action a user can take on content they are editing. For users who cannot view the images, the action names are included within the alt attributes of the images:

  <ul>
  <li><button><img src="b.png" alt="Bold"></button></li>
  <li><button><img src="i.png" alt="Italics"></button></li>
  <li><button><img src="strike.png" alt="Strike through"></button></li>
  <li><button><img src="blist.png" alt="Bulleted list"></button></li>
  <li><button><img src="nlist.png" alt="Numbered list"></button></li>
  </ul>
  

In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is a brief description of the link target.

<a href="http://w3.org">    
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">    
</a>    

This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target.

<a href="http://w3.org">    
<img src="images/w3c_home.png" width="72" height="48" alt="W3C home">    
</a>    

Depending on the context in which an image of a logo is used it could be appropriate to provide an indication, as part of the text alternative, that the image is a logo. Refer to section on Logos, insignia, flags, or emblems.

In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.

<a href="preview.html">    
<img src="images/preview.png" width="32" height="30" alt="Print preview.">    
</a>    

In this example, a button contains a search icon. The button submits a search form. The text alternative is a brief description of what the button does.

<button>    
<img src="images/search.png" width="74" height="29" alt="Search">    
</button>    

In this example, a company logo for the PIP Corporation has been split into the following two images, the first containing the word PIP and the second with the abbreviated word CO. The images are the sole content of a link to the PIPCO home page. In this case a brief description of the link target is provided. As the images are presented to the user as a single entity the text alternative PIP CO home is in the alt attribute of the first image.

<a href="pipco-home.html">    
<img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">    
</a>    

In the following example we have an image of a pie chart, with text in the alt attribute representing the data shown in the pie chart:

<img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, 
Firefox 40%, Chrome 25%, Safari 6% and Opera 4%.">    

In the case where an image repeats the previous paragraph in graphical form. The alt attribute content labels the image.

<p>According to a recent study Firefox has a 40% browser share, Internet Explorer has 25%, 
Chrome has 25%, Safari has 6% and Opera has 4%.</p>   
<p><img src="piechart.gif" alt="Pie chart representing the data in the previous paragraph."></p>

It can be seen that when the image is not available, for example because the src attribute value is incorrect, the text alternative provides the user with a brief description of the image content:

Here's an example of a flowchart image, with a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart.

<a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a>      
...      
...      
<div id="desc">    
<h2>Dealing with a broken lamp</h2>    
<ol>    
<li>Check if it's plugged in, if not, plug it in.</li>    
<li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>    
<li>If it still doesn't work; buy a new lamp.</li>    
</ol>    
</div>

In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in the chart as a plain text alternative in an alt attribute as the information is a data set. Instead a structured text alternative is provided below the image in the form of a data table using the data that is represented in the chart image.

Indications of the highest and lowest rainfall for each season have been included in the table, so trends easily identified in the chart are also available in the data table.

<figure role="group" aria-labelledby="caption">
<img src="rainchart.gif" alt="Bar chart: Average rainfall in millimeters by Country and Season.">    
<table>    
<caption id="caption">Rainfall in millimeters by Country and Season.</caption>    
<tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>    
<tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>    
<tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>    
<tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>    
<tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>    
</table>
</figure>    

This example shows an image of the text "Get Happy!" written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image is "Get Happy!".

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends Friday" In the context of use, as an advertisement, it is recommended that the image's text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and could be confusing.

  <p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>    

In situations where there is also a photo or other graphic along with the image of text, ensure that the words in the image text are included in the text alternative, along with any other description of the image that conveys meaning to users who can view the image, so the information is also available to users who cannot view the image.

In this example from 1997, a new-fangled currency symbol that looks like a curly E with two bars in the middle instead of one is represented using an image. The alternative text gives the character's pronunciation.

Only 5.99!

<p>Only <img src="euro.png" alt="euro ">5.99!

An illuminated manuscript might use graphics for some of its letters. The text alternative in such a situation is just the character that the image represents.

nce upon a time and a long long time ago...

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...

Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative along with the pertinent information conveyed in the image.

<p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category.     
Pie chart: Language=68%, Education=14% and Science=18%."></p>    

Here's another example of the same pie chart image, showing a short text alternative included in the alt attribute and a longer text alternative in text. The figure and figcaption elements are used to associate the longer text alternative with the image. The alt attribute is used to label the image.

<figure>    
<img src="figure1.gif" alt="Figure 1">    
<figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category.     
Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>    
</figure>    

The advantage of this method over the previous example is that the text alternative is available to all users at all times. It also allows structured mark up to be used in the text alternative, where as a text alternative provided using the alt attribute does not.

Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the alt attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a link to further information about the painting.

<header>
<h1>The Lady of Shalott</h1>    
<p>A poem by Alfred Lord Tennyson</p>
</header>
<img src="shalott.jpeg" alt="Painting of a  young woman with long hair, sitting in a wooden boat. ">
<p><a href="#des">Description of the painting</a>.</p>       
<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->      
...   
...    
...    
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately     
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. 
Her expression is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. 
Two have blown out. <a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>    

This example illustrates the provision of a text alternative identifying an image as a photo of the main subject of a page.

<img src="orateur_robin_berjon.png" alt="Portrait photo(black and white) of Robin.">
<h1>Robin Berjon</h1>    
<p>What more needs to be said?</p>    

It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image when one is available.

In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link points to a page containing information about the painting.

The Lady of Shalott
A poem by Alfred Lord Tennyson.

About this painting.

Full recitation of Alfred, Lord Tennyson's poem.

<header>
<h1>The Lady of Shalott</h1>    
<p>A poem by Alfred Lord Tennyson</p>
</header>    
<figure>
<img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."> 
<p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>    
</figure>    

<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->    

Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so an empty alt attribute is used.

<header>
<div><img src="border.gif" alt="" width="400" height="30"></div>
<h1>Clara's Blog</h1>
</header>    

<p>Welcome to my blog...</p>    

I you.

I <img src="heart.png" alt="love"> you.

My breaks.

My <img src="heart.png" alt="heart"> breaks.

In this example, a picture representing a company logo for the PIP Corporation has been split into two pieces, the first containing the letters "PIP" and the second with the word "CO". The text alternative PIP CO is in the alt attribute of the first image.

<img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">    

In the following example, a rating is shown as three filled stars and two empty stars. While the text alternative could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the text alternative of the first image, and the rest have empty alt attributes.

<p>Rating: <meter max=5 value=3>
<img src="1" alt="3 out of 5">
<img src="1" alt="">
<img src="1" alt="">
<img src="0" alt="">
<img src="0" alt="">
</meter></p>    

Consider the following image which is a map of Katoomba, it has 2 interactive regions corresponding to the areas of North and South Katoomba:

The text alternative is a brief description of the image. The alt attribute on each of the area elements provides text describing the content of the target page of each linked region:

<p>View houses for sale in North Katoomba or South Katoomba:</p>   
<p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">     

<map name="Map">
<area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html" 
alt="Houses in North Katoomba">
<area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 
alt="Houses in South Katoomba" href="south.html">   
</map> 

In the following example, a composite picture is used to represent a "crocoduck"; a fictional creature which defies evolutionary principles by being part crocodile and part duck. You are asked to interact with the crocoduck, but you need to exercise caution...

 <h1>The crocoduck</h1>
<p>You encounter a strange creature called a "crocoduck". The creature seems angry! 
Perhaps some friendly stroking will help to calm it, but be careful not to stroke 
any crocodile parts. This would just enrage the beast further.</p>    
<a href="?stroke=head"><img src="crocoduck1.png" alt="Stroke crocodile's angry, chomping head"></a>
<a href="?stroke=body"><img src="crocoduck2.png" alt="Stroke duck's soft, feathery body"></a>      

This first example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the img element's alt attribute. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text.

Lola prefers a bath to a shower.

<figure>
<img src="664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub.">
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure>    

This example is of an image that defies a complete description, as the subject of the image is open to interpretation. The image has a text alternative in the alt attribute which gives users who cannot view the image a sense of what the image is. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text.

The first of the ten cards in the Rorschach test.

<figure>
<img src="Rorschach1.jpg" 
alt="An abstract, freeform, vertically symmetrical, black inkblot on a light background.">
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> 

This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, include it as part of the text alternative. A caption is also provided using the figure and figcaption elements. As the image is provided to give a visual indication of the current weather near a building, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative.

The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change.

View from the top of Sopwith house, looking towards North Kingston. This image is updated every hour.

View the latest weather details for Kingston upon Thames.

<figure>    
<img src="webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.    
In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial
buildings, beyond are blocks of flats. In the distance there's a church steeple.">    
<figcaption>View from Sopwith house, looking towards north Kingston. 
This image is updated every hour.</figcaption>    
</figure>    
<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> 
for Kingston upon Thames.</p>    

In this example, a person uploads a photo, as part of a bulk upload of many images, to a photo sharing site. The user has not provided a text alternative or a caption for the image. The site's authoring tool inserts a caption automatically using whatever useful information it has for the image. In this case it's the file name and date the photo was taken.

The caption text in the example below is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. [WCAG20]

clara.jpg, taken on 12/11/2010.

<figure>    
<img src="clara.jpg">    
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>    
</figure>    

Notice that even in this example, as much useful information as possible is still included in the figcaption element.

In this second example, a person uploads a photo to a photo sharing site. She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute.

Eloisa with Princess Belle

<figure>    
<img src="elo.jpg">    
<figcaption>Eloisa with Princess Belle</figcaption>    
</figure>    

Sometimes the entire point of the image is that a textual description is not available, and the user is to provide the description. For example, software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:

<table>    
<tr><tr> 
<th> Image 
<th> Description
<tr>    
<td>    
<figure>    
<img src="2421.png">    
<figcaption>Image 640 by 100, filename 'banner.gif'</figcaption>    
</figure>    
<td> <input name="alt2421">    
<tr>    
<td> 
<figure>    
<img src="2422.png">    
<figcaption>Image 200 by 480, filename 'ad3.gif'</figcaption>    
</figure>    
<td> <input name="alt2422">    
</table>

An example of an img element used to collect web page statistics. The alt attribute is empty as the image has no meaning.

<img src="http://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">    

Another example use is when an image such as a spacer.gif is used to aid positioning of content. The alt attribute is empty as the image has no meaning.

<img src="spacer.gif" width="10" height="10" alt="">

In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it would also be appropriate to add the image using CSS

<a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a> 

#home:before { content: url(home.png);}      

<a href="home.html" id="home">Home</a>    

In this example, there is a warning message, with a warning icon. The word "Warning!" is in emphasized text next to the icon. As the information conveyed by the icon is redundant the img element is given an an empty alt attribute.

Warning! Your session is about to expire.

<p><img src="warning.png" width="15" height="15" alt="">
<strong>Warning!</strong> Your session is about to expire</p>

In this example, there is a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content.

Your session is about to expire.

<p><img src="warning.png" width="15" height="15" alt="Warning!"> 
  Your session is about to expire</p>

This example illustrates the use of the HTML5 logo as the sole content of a link to the HTML specification.

<a href="http://dev.w3.org/html5/spec/spec.html"><img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>

This example illustrates the use of the WebPlatform.org logo being used to represent itself.

and other developer resources

<h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>

The text alternative in the example above could also include the word "logo" to describe the type of image content. If so, it is suggested that square brackets be used to delineate this information: alt="[logo] WebPlatform.org".

This example illustrates the use of a logo next to the name of the organization it represents.

WebPlatform.org

<img src="images/webplatform1.png" alt=""> WebPlatform.org

This example illustrates the use of a logo next to text discussing the subject the logo represents.

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

<p><img src="HTML5_Logo.png" 
alt="HTML5 logo: Shaped like a shield with the text 'HTML' above and the numeral '5' 
prominent on the face of the shield."></p>  

Information about HTML5

This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content.

<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided.">    
 <!-- audio CAPTCHA option that allows the user to listen and type the word -->     
 <!-- form that asks a question -->    

<img src="example.jpg" alt="text alternative.">

The figcaption content may be a text alternative for the image, obviating the need for a text alternative provided using the alt attribute. This would only be the case if the figcaption content provides an adequate text alternative for the visual content in the image:

<img src="example.jpg" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially   
demolished building, illuminated by the light from a street lamp.">
      

<figure>   
<img src="shadows.jpg">   
<figcaption> Shadow like figures and a graffiti tag drawn on the walls of a        
partially demolished building, illuminated by the light from a street lamp (photo). 
</figcaption>   
</figure>

Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that role="group" be used on the figure element and in the case where the figcaption content is the text alternative, provide a label for the image in the alt attribute. These recommendations are illustrated in following example:

<figure role="group">
      <img src="shadows.jpg" alt="photo 1"> 
      <figcaption>]Shadow like figures and a graffiti tag drawn on the walls of a        
     partially demolished building, illuminated by the light from a street lamp (photo 1).
     </figcaption>
     </figure>

The castle through the ages: 1423, 1756, and 1966 respectively.

Charcoal on wood. Anonymous, circa 1423

.

Oil-based paint on canvas. Eloisa Faulkner, 1756.

Film photograph. Séraphin-Médéric Mieusement, 1936.

<figure>  
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>    
<figure> 
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">  
<figcaption>Charcoal on  wood. Anonymous, circa 1423.</figcaption>  
</figure> 
<figure>   
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">  
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>  
</figure> 
<figure>  
<img src="castle-fluro.jpg" 
alt="The castle lies in ruins, the original tower all that remains in one piece.">  
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>  
</figure>
</figure>