This page provides example short text alternative markup for:
Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They are meaningless in themselves and do not provide page any content. Examples include: bullets, spacers, and box corners.
Mark up purely decorative "eye candy" images so they can be
ignored by
assistive
technology
with a null
alt
attribute (
alt=""
) or preferably use CSS techniques. If the image isn't providing
the user any informative
content
or enhancing understanding of the
content,
then it is appropriate for the short text alternative to be
empty. A null
alt attribute hides an image from some users such as those who use screen readers and users who have images turned off in their browsers.
alt
attribute
Context: Any decorative image in a document.
<img src="http://www.mysite/images/decorative.png"
alt="">
Setting the
alt
attribute to an empty string.
alt=""
tells screen readers to skip this image. Leaving off the
alt
attribute altogether is incorrect.
Context: bullets.
HTML:
<ul class="bullets">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>CSS:
ul.bullets li {list-style-image:url(bullet.png);}
Context: Specifying decorative images in the CSS document.
CSS:
#montage {background: url(images/montage.png);}
"Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script..."- Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information.
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. Whenever a picture is not decorative, concisely explain or label what the image is in the context of the document's purpose without overly duplicating the text in which the image is embedded.
Appropriate alt text value for a picture is a brief description, or name. As in all alt text authoring decisions, writing suitable text equivalents for pictures requires human judgment. The alt 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.
alt
for a Name
Context: A candid photograph of Adam Moran
with his daughter in a newsletter article. A
name
prefaced by the type of image is used as the value of the the
alt
attribute.
<img src="images/adam.jpg"
alt="Photo: Adam Moren with daughter">alt
to provide a Name
Context: Image of a painting inspired by a
poem, on a page reciting that poem. In this case it is
Waterhouse's 1888 "The Lady of Shalott" painting which was
inspired by Tennyson's poem of the same name. A
name prefaced by the type of image is used as the value of the the alt attribute.
<h1>Painting of The Lady of Shalott</h1>
<img src="http://www.company/images/shalott.jpg"
alt="Painting: The Lady of Shalott">
<!-- Full Recitation of Alfred, Lord Tennyson's Poem -->
alt
for a Brief Description
Context: An image on a page explaining in general terms Rorschach inkblot personality tests. The image is an abstract freeform which is subjective to individual interpretation.
<img src="http://www.company/images/inkblot.jpg"
alt="An abstract, freeform inkblot">Images of text are pictures of alphabetic or numeric textual characters. Examples include pictures of: words, phrases, and wordmark.
Mark up images of so that they will provide assistive technology with equivalent information. Provide a text equivalent word-for-word that is the same as that provided in the image. Consider the necessity of using images of text at all and try to use electronic text when appropriate. Electronic text is presentation neutral and can be rendered visually, auditorily, tactilely, or by any combination.
alt
to Provide a Word-for-Word Equivalent
Context: Acme Company's wordmark which visually reads "Acme Company" in a fancy designed image.
<img src="wordmark.png"
alt="Acme Company">alt
to Provide a Word-for-Word Equivalent
Context: An image of the word "New!".
<img src="new.png"
alt="New!">
Context: Electronic text styled with CSS used instead of an image of text.
HTML:
<span class="new">New!<span>
CSS:
.new{
color:#000;
background-color:#FF9;
padding:0em 0.1em;
border:1px solid #000;
font-size: 0.8em;
}
Complex data images allow sighted users to understand data and data relationships. These visual representations can convey a vast amount of non-text content. Examples include: charts, graphs, and diagrams.
Provide a short text equivalent that gives the user an overview of the content or helps them to understand the essence of a relationship.
alt
for an Overview of Content
Context: A line graph depicting number of
subscribers to a newsletter. It uses the
alt
attribute as short text alternative a to give the user an
overview of the content
of the image.
<img
alt="Line graph of the number of subscribers">
src="images/graph.png">alt
to Convey a Trend
Context: A chart in a report. It uses the
alt
attribute as short text alternative to help users understand
the
a trend or essence of a relationship.
<img
alt="Pie chart: More widgets were sold this quarter compared to last quarter.">
src="images/chart.gif">Images of symbols are graphic representations that signify some concept, object, entity, quality, or brand. A symbol may be used to imply or represent a meaning beyond the obvious and apparent. Examples include: logos, icons, and emblems.
Markup images of symbols to identify the essence of what they represent or their purpose.
alt
to Identify an Organization or Company
Context: A logo used for branding.
<img src="http://www.company/images/logo.png"
alt="Company Name">
alt
to Identify Purpose
Context: A warning icon on a weather page about hazardous conditions.
<img src="http://www.company/images/warningicon.png"
alt="warning">Functional images are images that allow the user to 'do' things. They provide functionality. Activating or selecting a functional image causes something to happen, such as activating a link that causes a resource to be retrieved. Examples include: navigation links and buttons.
To provide the same functionality to the user, emphasize the action performed by the image or the link purpose. For instance, if a search button is a magnifying glass or binoculars, appropriate alt text could be "search" or "find"; not "magnifying glass", "binoculars" or "button".
For navigation images, use the destination of the link as alt text. "Previous page" or "Next page" would be appropriate alt text for navigation images; not "picture of an arrow". By default, on receiving focus, a screen reader will announce to the user that it is link. So for navigation images, it is unnecessary to say "Link to previous page". "Previous page" will suffice. For a company logo, which links to a home page use the company's name as the alt text. Including the word "logo" is inappropriate. Including the words such as "go to" or "link" are redundant.
alt
to Identify a Link Destination
<a href="page1.html">
<img src="leftarrow.png"
alt="Previous page">
</a>alt
Text
alt=""
).
<a href="page1.html">
<img src="leftarrow.png
alt="">
Previous page
</a>