HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
1978[Authors] More cases of images for authors to worry about (credit: pt)2008-08-04 09:49
@@ -13506,20 +13506,44 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
   attribute depend on what the image is intended to represent, as
   described in the following sections.</p>
 
   <p>A general requirement that applies in all cases is that the <code
   title="attr-img-alt">alt</code> attribute's value must not start
   with a U+007B LEFT CURLY BRACKET character ({) and end with a U+007D
   RIGHT CURLY BRACKET character (}), unless the attribute is giving
   the <em>kind</em> of image rather than replacement text.</p>
 
 
+  <h6>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">alt</code> attribute must contain text that
+  conveys the purpose of the link.</p>
+
+  <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>&lt;h1>Pick your color&lt;/h1>
+&lt;ul>
+ &lt;li>&lt;a href="green.html">&lt;img src="green.jpeg" alt="Green">&lt;/a>&lt;/li>
+ &lt;li>&lt;a href="blue.html">&lt;img src="blue.jpeg" alt="Blue">&lt;/a>&lt;/li>
+ &lt;li>&lt;a href="red.html">&lt;img src="red.jpeg" alt="Red">&lt;/a>&lt;/li>
+&lt;/ul></pre>
+
+  </div>
+
+
+
   <h6>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
 
   <p>Sometimes something can be more clearly stated in graphical
   form, for example as a flowchart, a diagram, a graph, or a simple
   map showing directions. In such cases, an image can be given using
   the <code>img</code> element, but the lesser textual version must
   still be given, so that users who are unable to view the image
   (e.g. because they have a very slow connection, or because they
   are using a text-only browser, or because they are listening to
   the page being read out by a hands-free automobile voice Web
@@ -13578,21 +13602,21 @@ You are standing in an open field west of a house.
 There is a small mailbox here.
 &lt;/p></pre>
 
   </div>
 
   <p>It is important to realize that the alternative text is a
   <em>replacement</em> for the image, not a description of the
   image.</p>
 
 
-  <h6>A short phrase or label with an alternative graphical representation: icons</h6>
+  <h6>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.</p>
 
   <p>In some cases, the icon is supplemental to a text label
   conveying the same meaning. In those cases, the <code
   title="attr-img-alt">alt</code> attribute must be present but must
   be empty.</p>
 
@@ -13640,26 +13664,26 @@ iPhone. This week, the panelists compare how reflective their
 iPhones' Apple logos are.&lt;/p>
 &lt;/article>
 &lt;/body></pre>
 
   </div>
 
   <p>Many pages include logos, insignia, flags, or emblems, which
   stand for a particular entity such as a company, organization,
   project, band, software package, country, or some such.</p>
 
-  <p>If the logo is being used to represent the entity, the <code
-  title="attr-img-alt">alt</code> attribute must contain the name of
-  the entity being represented by the logo. The <code
-  title="attr-img-alt">alt</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>
+  <p>If the logo is being used to represent the entity, e.g. as a page
+  header, the <code title="attr-img-alt">alt</code> attribute must
+  contain the name of the entity being represented by the logo. The
+  <code title="attr-img-alt">alt</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>
 
   <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
   title="attr-img-alt">alt</code> attribute must instead be
   empty.</p>
 
   <p>If the logo is merely used as decorative material (as branding,
   or, for example, as a side image in an article that mentions the
   entity to which the logo belongs), then the entry below on purely
   decorative images applies. If the logo is actually being
@@ -13779,21 +13803,21 @@ Standards mode, and about 9% triggered the Standards mode.&lt;/p>
   understand the concept.</p>
 
 
 
   <h6>A purely decorative image that doesn't add any information but is still specific to the surrounding content</h6>
 
   <p>In some cases, the image isn't discussed by the surrounding
   text, but it has some relevance. Such images are decorative, but
   still form part of the content. In these cases, the <code
   title="attr-img-alt">alt</code> attribute must be present but its
-  value must be the empty string.
+  value must be the empty string.</p>
 
   <div class="example">
 
    <p>Examples where the image is purely decorative despite being
    relevant would include things like a photo of the Black Rock City
    landscape in a blog post about an event at Burning Man, or an
    image of a painting inspired by a poem, on a page reciting that
    poem. The following snippet shows an example of the latter
    case (only the first verse is included in this snippet):</p>
 
@@ -13810,20 +13834,55 @@ Round an island there below,&lt;br>
 The island of Shalott.&lt;/p></pre>
 
   </div>
 
   <p>In general, if an image is decorative but isn't especially
   page-specific, for example an image that forms part of a site-wide
   design scheme, the image should be specified in the site's CSS,
   not in the markup of the document.</p>
 
 
+
+  <h6>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">alt</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">alt</code> attribute set to the
+  empty string.</p>
+
+  <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>&lt;h1>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt="">&lt;/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>
+
+  <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, <span title="image map">image maps</span> should be used
+  instead.</p>
+
+
+
   <h6>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 image is the whole <em>point</em> of
   the page containing it.</p>
 
   <p>When it is possible for alternative text to be provided, for
   example if the image is part of a series of screenshots in a
   magazine review, or part of a comic strip, or is a photograph in a
@@ -13932,20 +13991,33 @@ href="?audio">audio&lt; test instead.)&lt;/p></pre>
   (e.g. because they have a very slow connection, or because they
   are using a text-only browser, or because they are listening to
   the page being read out by a hands-free automobile voice Web
   browser, or simply because they are blind), the <code
   title="attr-img-alt">alt</code> attribute is only allowed to
   contain the <em>kind</em> of image rather than replacement text
   when no alternative text is available and none can be made
   available, e.g. on automated image gallery sites.</p>
 
 
+
+  <h6>An image not intended for the user</h6>
+
+  <p>If an <code>img</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">alt</code> attribute must
+  be the empty string.</p>
+
+  <p>Generally authors should avoid using <code>img</code> elements
+  for purposes other than showing images.</p>
+
+
+
   <h6>An image in an e-mail or document intended for a specific person who is known to be able to view images</h6>
 
   <p>When an image is included in a communication (such as an HTML
   e-mail) aimed at someone who is known to be able to view images,
   the <code title="attr-img-alt">alt</code> attribute may be
   omitted. However, even in such cases it is strongly recommended
   that alternative text be included (as appropriate according to the
   kind of image involved, as described in the above entries), so
   that the e-mail is still usable should the user use a mail client
   that does not support images, or should the e-mail be forwarded on

|