background

I originally wrote this advice between 2010-2014 for the HTML5 specification with help from Laura Carlson and others. I still refer to it and decided it needed an update and a new home.

Table of contents

1. A link or button containing nothing but an image
2. Graphical Representations: Charts, diagrams, graphs, maps, illustrations
3. Images of text
4. Images that include text
5. Images that enhance the themes or subject matter of the page content
6. A graphical representation of some of the surrounding text
7. A purely decorative image that doesn’t add any information
8. Inline images
9. A group of images that form a single larger picture with no links
10. Image maps
11. A group of images that form a single larger picture with links
12. Images of Pictures
13. Webcam images
14. When a text alternative is not available at the time of publication
15. An image not intended for the user
16. Icon Images
17. Logos, insignia, flags, or emblems
18. CAPTCHA Images
19. An image in a picture element

Requirements for providing text to act as an alternative for images

Text alternatives,  are a primary way of making visual information accessible, because they can be rendered through many sensory modalities (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can hear the text alternative read aloud using synthesized speech.

Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context.

The guidance included here addresses the most common ways authors use images. Additional guidance and techniques are available in the W3C WAI Images Tutorial.

Examples of scenarios where users benefit from text alternatives for images

• They have a very slow connection and are browsing with images disabled.
• They have a vision impairment and use text to speech software.
• They have a cognitive impairment and use text to speech software.
• They are using a text-only browser.
• They are listening to the page being read out by a voice Web browser.
• They have images disabled to save on download costs.
• They have problems loading images or the source of an image is wrong.

General guidelines

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate functional replacement for the image. The specific requirements for the alt attribute content depend on the image’s function in the page, as described in the following sections.

To determine an appropriate text alternative it is important to think about why an image is being included in a page. What is its purpose? Thinking like this will help you to understand what is important about the image for the intended audience. Every image has a reason for being on a page, because it provides useful information, performs a function, labels an interactive element, enhances aesthetics or is purely decorative. Therefore, knowing what the image is for, makes writing an appropriate text alternative easier.

A link or button containing nothing but an image

When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.

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="https://w3.org">
<img src="images/w3c_home.png" width="72" 
height="48" alt="W3C 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="https://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 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>

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

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

Graphical Representations: Charts, diagrams, graphs, maps, illustrations

Users can benefit when content is presented in graphical form, for example as a flowchart, a diagram, a graph, or a map showing directions. Users who are unable to view the image also benefit when content presented in a graphical form is provided in a text-based format. Software agents that process text content, but cannot automatically process images (e.g. translation services, many search engines), also benefit from a text-based description.

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

<p id="graph7">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="browser share as a pie chart.">
</p>

In cases where the text alternative is lengthy, more than a sentence or two, or would benefit from the use of structured markup, provide a brief description or label using the alt attribute, and an associated text alternative.

<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>

<figure>
<figcaption>Rainfall Data</figcaption>
<img src="rainchart.gif" alt="Bar chart: average rainfall by
 Country and Season. Full description in Table below.">
<table id="table-4">
<caption>Rainfall in millimetres 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>

For any of the examples in this section the details and summary elements could be used so that the text descriptions for the images are only displayed on demand:

<img src="flowchart.gif" 
alt="Flowchart: Dealing with a broken lamp.">
<details>
<summary>Dealing with a broken lamp</summary>
<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>
</details>

Images of text

Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.

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.

When an image is used to represent a character that cannot otherwise be represented in Unicode, for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text should be a more conventional way of writing the same thing, e.g., using the phonetic hiragana or katakana to give the character’s pronunciation.

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 image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode, e.g., because of decorations or because the character is not in the Unicode character set (as in the case of gaiji), would an image be appropriate.

If an author is tempted to use an image because their default system font does not support a given character, then Web Fonts are a better solution than images.

Images that include text

Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in the text alternative.

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

<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>

Images that enhance the themes or subject matter of the page content

An image that isn’t discussed directly by the surrounding text but still has some relevance can be included in a page using the img element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so still form part of the content. In these cases, it is recommeneded that a text alternative be provided.

<header>
<h1>The Lady of Shalott</h1>
<p>A poem by Alfred Lord Tennyson</p>
</header>

<img src="shalott.jpeg" alt="Painting - a young woman with long
 hair, sitting in a wooden boat. Full description below.">
<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="https://www.tate.org.uk/art/artworks/waterhouse-the-lady-of-shalott-n01543">
Further information about the painting</a>.</p>

<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>

A graphical representation of some of the surrounding text

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

In general, an image falls into this category if removing the image doesn’t make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

<hgroup>
<h1>The Lady of Shalott</h1>
<p>A poem by Alfred Lord Tennyson</p>
</hgroup>
<figure>
<img src="shalott.jpeg" alt="Painting: a woman in a white flowing
 dress, sitting in a small boat.">
<p><a href="https://tate.org.uk...">About this painting.</a></p>
</figure>
<!-- Full Recitation of Alfred, Lord Tennyson’s Poem.  -->

A purely decorative image that doesn’t add any information

Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images.

Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt=""). While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.

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.
Clara’s Blog Welcome to my blog…

<header>
<img src="border.gif" alt="" width="400" height="30">
<h1>Clara’s Blog</h1>
</header>
<p>Welcome to my blog...</p>

Inline images

When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the sentence it is apart of.

I  you.

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

My  breaks.

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

A group of images that form a single larger picture with no links

When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, include a text alternative for one of the images using the alt attribute as per the relevant relevant guidance for the picture as a whole, and then include an empty alt attribute on the other images.

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 alternatve 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:
<img src="1" alt="3 out of 5">
<img src="1" alt=""><img src="1" alt="">
<img src="0" alt=""><img src="0" alt="">
</p>

Image maps

If an img element has a usemap attribute which references a map element containing area elements that have href attributes, the img is considered to be interactive content. In such cases, always provide a text alternative for the image using the alt attribute.

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" usemap="#Map"></p>

  <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>

A group of images that form a single larger picture with links

Sometimes, when you create a composite picture from multiple images, you may wish to link one or more of the images. Provide an alt attribute for each linked image to describe the purpose of the link.

In the following example, a composite picture is used to represent a “crocoduck”; a fictional creature (By Heydon Pickering) 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>

Images of Pictures

Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This non-text content,  can convey a significant amount of information visually or provide a specific sensory experience,  to a sighted person. Examples include photographs, paintings, drawings and artwork.

An appropriate text alternative for a picture is a brief description, or name. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author’s writing style. Therefore, there is no single “right” or “correct” piece of alt text for any particular image. In addition to providing a short text alternative that gives a brief description of the non-text content, also providing supplemental content through another means when appropriate may be useful.

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.

<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.

<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>

Webcam images

Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include traffic and weather cameras.

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 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="https://news.bbc.co.uk/weather/forecast/area=Kingston">
latest weather details</a> for Kingston upon Thames.</p>

When a text alternative is not available at the time of publication

In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:

• The img element is in a figure element
• The figure element contains a figcaption element
• The figcaption element contains content other than inter-element whitespace
• Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.

In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.

Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

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.2.

<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.

<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>

Since some users cannot use images at all (e.g., because they are blind) the alt attribute is only allowed to be omitted when no text alternative is available and none can be made available, as in the above examples.

An image not intended for the user

Generally authors should avoid using img elements for purposes other than showing images.

If an img element is being used for purposes other than showing an image, e.g., as part of a service to count page views, use an empty alt attribute.

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="https://server3.stats.com/count.pl?NeonMeatDream.com" 
width="0" height="0" alt="">

It is recommended for the example use above the width and height attributes be set to zero.

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="">

It is recommended that CSS be used to position content instead of img elements.

Icon Images

An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.

Use an empty alt attribute when an icon is supplemental to text conveying the same meaning.
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.

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

Where images are used in this way, it would also be appropriate to add the image using CSS.

#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 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>

When an icon conveys additional information not available in text, provide a text alternative.

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>

Logos, insignia, flags, or emblems

Many pages include logos, insignia, flags, or emblems, which stand for a company, organization, project, band, software package, country, or other entity. What can be considered as an appropriate text alternative depends upon, like all images, the context in which the image is being used and what function it serves in the given context.

If a logo is the sole content of a link, provide a brief description of the link target in the alt attribute.

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

<a href="https://w3c.github.io/html/">
<img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>

If a logo is being used to represent the entity, e.g., as a page heading, provide the name of the entity being represented by the logo as the text alternative.

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".

If a logo is being used next to the name of the what that it represents, then the logo is supplemental. Include an empty alt attribute as the text alternative is already provided.

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

If the logo is used alongside text discussing the subject or entity the logo represents, then provide a text alternative which describes the logo.

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

HTML 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 HTML 4.01 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 HTML

CAPTCHA Images

CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart”. CAPTCHA images are used for security purposes to confirm that content is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read.

To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Place the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some people with limited hearing. Another method is to include a form that asks a question along with the visual image. This helps but can be problematic for people with cognitive impairments.

It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in Inaccessibility of CAPTCHA.

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.

Example code:

<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 -->

An image in a picture element

The picture element and any source elements it contains have no semantics for users, only the img element or its text alternative is displayed to users. Provide a text alternative for an img element without regard to it being within a picture element.

Art directed images that rely on picture need to depict the same content (irrespective of size, pixel density, or any other discriminating factor). Therefore the appropriate text alternative for an image will always be the same irrespective of which source file ends up being chosen by the browser.

<h2>Is it a ghost?</h2>
<picture>
  <source media="(min-width: 32em)" srcset="large.jpg">
  <img src="small.jpg" 
alt="Reflection of a girls face in a train window.">
</picture>

The large and small versions (both versions are displayed for demonstration purposes) of the image portray the same scene: Reflection of a girls face in a train window, while the small version (displayed on smaller screens) is cropped, this does not effect the subject matter or the appropriateness of the alt text.

Further reading

• Text descriptions and emotion rich images
• ALT TAG EMPTINESS
• AI for accessibility conformance testing? Why?
• alt left

Further Listening

There you go again with your
First world problems
Where your living is easy
Messing up your mind the daily grind
Gotta leave it all behind
Driving everybody crazy
There you go again with your
First world problems
Where your living is easy
Messing up your mind the daily grind
Gotta leave it all behind
Driving everybody crazy
I, I'm an early riser
Wake up let the sun go to my head
Hey, just hypnotise ya
Walking like your boots are made of lead
There you go again with your
First world problems
Where your living is easy
Messing up your mind the daily grind
Gotta leave it all behind
Driving everybody crazy
There you go again with your
First world problems
Where your living is easy
Messing up your mind the daily grind
Gotta leave it all behind
Driving everybody crazy
I, I'm an easy rider
Watch me as I ride and glide away
Say, still might surprise ya
Disappear come back another day
There you go again with your
First world problems
Where your living is easy
Opening your mouth and making sounds
But there's nothing coming out
Crying like a new born baby
All is a distraction by design
A trick of smoke and
Mirrors to steal your mind
All is an illusion, mired in confusion
Codex Alimentarius
There you go again with your
First world problems
Where your living is easy
Opening your mouth and making sounds
But there's nothing coming out
Driving everybody crazy
There you go again with
Your first world problems
Where your living is easy
Opening your mouth and making sounds
But there's nothing coming out
Driving everybody crazy
Driving everybody crazy
Driving everybody crazy
Hands and knees and whoops-a-daisy
Driving everybody crazy
How do you get so f- lazy?
Driving everybody crazy
Everybody crazy
Crazy