|
|
@@ -694,28 +694,37 @@ |
|
|
<li><a href="#alt"><span class=secno>4.7.2.1. </span>Requirements |
|
|
for providing text to act as an alternative for images</a> |
|
|
<ul class=toc> |
|
|
<li><a href="#a-phrase"><span class=secno>4.7.2.1.1. </span>A |
|
|
<li><a href="#a-link"><span class=secno>4.7.2.1.1. </span>A link |
|
|
containing nothing but the image</a> |
|
|
|
|
|
<li><a href="#a-phrase"><span class=secno>4.7.2.1.2. </span>A |
|
|
phrase or paragraph with an alternative graphical representation: |
|
|
charts, diagrams, graphs, maps, illustrations</a> |
|
|
|
|
|
<li><a href="#a-short"><span class=secno>4.7.2.1.2. </span>A short |
|
|
<li><a href="#a-short"><span class=secno>4.7.2.1.3. </span>A short |
|
|
phrase or label with an alternative graphical representation: |
|
|
icons</a> |
|
|
icons, logos</a> |
|
|
|
|
|
<li><a href="#text-that"><span class=secno>4.7.2.1.3. </span>Text |
|
|
<li><a href="#text-that"><span class=secno>4.7.2.1.4. </span>Text |
|
|
that has been rendered to a graphic for typographical effect</a> |
|
|
|
|
|
<li><a href="#a-graphical"><span class=secno>4.7.2.1.4. </span>A |
|
|
<li><a href="#a-graphical"><span class=secno>4.7.2.1.5. </span>A |
|
|
graphical representation of some of the surrounding text</a> |
|
|
|
|
|
<li><a href="#a-purely"><span class=secno>4.7.2.1.5. </span>A |
|
|
<li><a href="#a-purely"><span class=secno>4.7.2.1.6. </span>A |
|
|
purely decorative image that doesn't add any information but is |
|
|
still specific to the surrounding content</a> |
|
|
|
|
|
<li><a href="#a-key"><span class=secno>4.7.2.1.6. </span>A key |
|
|
<li><a href="#a-group"><span class=secno>4.7.2.1.7. </span>A group |
|
|
of images that form a single larger picture</a> |
|
|
|
|
|
<li><a href="#a-key"><span class=secno>4.7.2.1.8. </span>A key |
|
|
part of the content</a> |
|
|
|
|
|
<li><a href="#an-image"><span class=secno>4.7.2.1.7. </span>An |
|
|
<li><a href="#an-image"><span class=secno>4.7.2.1.9. </span>An |
|
|
image not intended for the user</a> |
|
|
|
|
|
<li><a href="#an-image0"><span class=secno>4.7.2.1.10. </span>An |
|
|
image in an e-mail or document intended for a specific person who |
|
|
is known to be able to view images</a> |
|
|
</ul> |
|
|
|
|
|
U+007D RIGHT CURLY BRACKET character (}), unless the attribute is giving |
|
|
the <em>kind</em> of image rather than replacement text. |
|
|
|
|
|
<h6 id=a-phrase><span class=secno>4.7.2.1.1. </span>A phrase or paragraph |
|
|
<h6 id=a-link><span class=secno>4.7.2.1.1. </span>A link containing nothing |
|
|
but the image</h6> |
|
|
|
|
|
<p>When an image is the sole contents of a link, the image's <code |
|
|
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must contain |
|
|
text that conveys the purpose of the link. |
|
|
|
|
|
<div class=example> |
|
|
<p>In this example, a user is asked to pick his preferred color from a |
|
|
list of three. Each color is given by an image, but for users who have |
|
|
configured their user agent not to display images, the color names are |
|
|
used instead:</p> |
|
|
|
|
|
<pre><h1>Pick your color</h1> |
|
|
<ul> |
|
|
<li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li> |
|
|
<li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li> |
|
|
<li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li> |
|
|
</ul></pre> |
|
|
</div> |
|
|
|
|
|
<h6 id=a-phrase><span class=secno>4.7.2.1.2. </span>A phrase or paragraph |
|
|
with an alternative graphical representation: charts, diagrams, graphs, |
|
|
maps, illustrations</h6> |
|
|
|
|
|
|
|
|
<p>It is important to realize that the alternative text is a |
|
|
<em>replacement</em> for the image, not a description of the image. |
|
|
|
|
|
<h6 id=a-short><span class=secno>4.7.2.1.2. </span>A short phrase or label |
|
|
with an alternative graphical representation: icons</h6> |
|
|
<h6 id=a-short><span class=secno>4.7.2.1.3. </span>A short phrase or label |
|
|
with an alternative graphical representation: icons, logos</h6> |
|
|
|
|
|
<p>A document can contain information in iconic form. The icon is intended |
|
|
to help users of visual browsers to recognize features at a glance. |
|
|
|
|
|
particular entity such as a company, organization, project, band, software |
|
|
package, country, or some such. |
|
|
|
|
|
<p>If the logo is being used to represent the entity, the <code |
|
|
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must contain |
|
|
the name of the entity being represented by the logo. The <code |
|
|
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must |
|
|
<em>not</em> contain text like the word "logo", as it is not the fact that |
|
|
it is a logo that is being conveyed, it's the entity itself. |
|
|
<p>If the logo is being used to represent the entity, e.g. as a page |
|
|
header, the <code title=attr-img-alt><a href="#alt0">alt</a></code> |
|
|
attribute must contain the name of the entity being represented by the |
|
|
logo. The <code title=attr-img-alt><a href="#alt0">alt</a></code> |
|
|
attribute must <em>not</em> contain text like the word "logo", as it is |
|
|
not the fact that it is a logo that is being conveyed, it's the entity |
|
|
itself. |
|
|
|
|
|
<p>If the logo is being used next to the name of the entity that it |
|
|
represents, then the logo is supplemental, and its <code |
|
|
|
|
|
been there in the first place.</p> |
|
|
</div> |
|
|
|
|
|
<h6 id=text-that><span class=secno>4.7.2.1.3. </span>Text that has been |
|
|
<h6 id=text-that><span class=secno>4.7.2.1.4. </span>Text that has been |
|
|
rendered to a graphic for typographical effect</h6> |
|
|
|
|
|
<p>Sometimes, an image just consists of text, and the purpose of the image |
|
|
|
|
|
<pre><h1></pre> |
|
|
<img alt="Earth Day" src=earthdayheader.png></div> |
|
|
|
|
|
<h6 id=a-graphical><span class=secno>4.7.2.1.4. </span>A graphical |
|
|
<h6 id=a-graphical><span class=secno>4.7.2.1.5. </span>A graphical |
|
|
representation of some of the surrounding text</h6> |
|
|
|
|
|
<p>In many cases, the image is actually just supplementary, and its |
|
|
|
|
|
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. |
|
|
|
|
|
<h6 id=a-purely><span class=secno>4.7.2.1.5. </span>A purely decorative |
|
|
<h6 id=a-purely><span class=secno>4.7.2.1.6. </span>A purely decorative |
|
|
image that doesn't add any information but is still specific to the |
|
|
surrounding content</h6> |
|
|
|
|
|
|
|
|
scheme, the image should be specified in the site's CSS, not in the markup |
|
|
of the document. |
|
|
|
|
|
<h6 id=a-key><span class=secno>4.7.2.1.6. </span>A key part of the content</h6> |
|
|
<h6 id=a-group><span class=secno>4.7.2.1.7. </span>A group of images that |
|
|
form a single larger picture</h6> |
|
|
|
|
|
<p>When a picture has been sliced into smaller image files that are then |
|
|
displayed together to form the complete picture again, one of the images |
|
|
must its <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute |
|
|
set as per the relevant rules that would be appropriate for the picture as |
|
|
a whole, and then all the remaining images must have their <code |
|
|
title=attr-img-alt><a href="#alt0">alt</a></code> attribute set to the |
|
|
empty string. |
|
|
|
|
|
<div class=example> |
|
|
<p>In the following example, a picture representing a company logo for |
|
|
<span title="">XYZ Corp</span> has been split into two pieces, the first |
|
|
containing the letters "XYZ" and the second with the word "Corp". The |
|
|
alternative text ("XYZ Corp") is all in the first image.</p> |
|
|
|
|
|
<pre><h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1></pre> |
|
|
</div> |
|
|
|
|
|
<p>If any of the components of the sliced picture are the sole contents of |
|
|
links, then instead one image per link must have alternative text |
|
|
representing the purpose of the link. |
|
|
|
|
|
<p>Generally, authors should avoid slicing images in this way, as it can |
|
|
lead to unexpected renderings (e.g. if the line wraps in an unexpected |
|
|
way, the image would get broken up). In the case of links, <a |
|
|
href="#image2" title="image map">image maps</a> should be used instead. |
|
|
|
|
|
<h6 id=a-key><span class=secno>4.7.2.1.8. </span>A key part of the content</h6> |
|
|
|
|
|
<p>In some cases, the image is a critical part of the content. This could |
|
|
be the case, for instance, on a page that is part of a photo gallery. The |
|
|
|
|
|
than replacement text when no alternative text is available and none can |
|
|
be made available, e.g. on automated image gallery sites. |
|
|
|
|
|
<h6 id=an-image><span class=secno>4.7.2.1.7. </span>An image in an e-mail |
|
|
<h6 id=an-image><span class=secno>4.7.2.1.9. </span>An image not intended |
|
|
for the user</h6> |
|
|
|
|
|
<p>If an <code><a href="#img">img</a></code> element is being used for |
|
|
purposes other than showing an image, e.g. as part of a service to count |
|
|
page views, then the <code title=attr-img-alt><a |
|
|
href="#alt0">alt</a></code> attribute must be the empty string. |
|
|
|
|
|
<p>Generally authors should avoid using <code><a href="#img">img</a></code> |
|
|
elements for purposes other than showing images. |
|
|
|
|
|
<h6 id=an-image0><span class=secno>4.7.2.1.10. </span>An image in an e-mail |
|
|
or document intended for a specific person who is known to be able to view |
|
|
images</h6> |
|
|
|
