Browse files

[ac] (1) Address all recent alt='' feedback. For further details see: h…

  • Loading branch information...
1 parent da9dc3f commit f6a42ea83a138a424c0056759f90ce75a922ae35 @Hixie Hixie committed Aug 26, 2008
Showing with 195 additions and 183 deletions.
  1. +101 −88 index
  2. +94 −95 source
View
189 index
@@ -28,7 +28,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 25 August
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 26 August
2008</h2>
<p>You can take part in this work. <a
@@ -11935,9 +11935,9 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
<a href="#outline">outline</a>. Abort these steps.
<li>
- <p>Associate any nodes that were not associated a <a href="#section0"
- title=concept-section>section</a> in the steps above with <var
- title="">current outlinee</var> as their section.
+ <p>Associate any nodes that were not associated with a <a
+ href="#section0" title=concept-section>section</a> in the steps above
+ with <var title="">current outlinee</var> as their section.
<li>
<p>Associate all nodes with the heading of the <a href="#section0"
@@ -16147,36 +16147,7 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href="#htmlelemen
<dt>If the <code title=attr-img-src><a href="#src">src</a></code>
attribute is set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a string whose first
- character is a U+007B LEFT CURLY BRACKET character ({) and whose last
- character is a U+007D RIGHT CURLY BRACKET character (})
-
- <dd>
- <p>The image is a key part of the content, and there is no textual
- equivalent of the image available. The string consisting of all the
- characters between the first and the last character of the value of the
- <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute gives
- the kind of image (e.g. photo, diagram, user-uploaded image). If that
- value is the empty string (i.e. the attribute is just "<code
- title="">{}</code>"), then even the kind of image being shown is not
- known.</p>
-
- <p>If the image is <i>available</i>, the element represents the image
- specified by the <code title=attr-img-src><a href="#src">src</a></code>
- attribute.</p>
-
- <p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent should display some
- sort of indicator that the image is not being rendered, and, if
- possible, provide to the user the information regarding the kind of
- image that is (as derived from the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute).</p>
-
- <dt>If the <code title=attr-img-src><a href="#src">src</a></code>
- attribute is set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a value that isn't
- matched by the previous two entries (not empty, not "<code
- title="">{...}</code>")
+ href="#alt0">alt</a></code> attribute is set to a value that isn't empty
<dd>
<p>The image is a key part of the content; the <code
@@ -16197,27 +16168,53 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href="#htmlelemen
href="#alt0">alt</a></code> attribute is not
<dd>
- <p>The image's role in the document is unknown.</p>
+ <p>The image might be a key part of the content, and there is no textual
+ equivalent of the image available.</p>
<p>If the image is <i>available</i>, the element represents the image
specified by the <code title=attr-img-src><a href="#src">src</a></code>
attribute.</p>
<p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent may display some
- sort of indicator that the image is not being rendered.</p>
+ configured to display the image, then the user agent should display some
+ sort of indicator that there is an image that is not being rendered, and
+ may, if requested by the user, or if so configured, or when required to
+ provide contextual information in response to navigation, provide
+ caption information for the image, derived as follows:</p>
- <dt>If the <code title=attr-img-src><a href="#src">src</a></code>
- attribute is not set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a string whose first
- character is a U+007B LEFT CURLY BRACKET character ({) and whose last
- character is a U+007D RIGHT CURLY BRACKET character (})
+ <ol>
+ <li>
+ <p>If the image has a <code title=attr-title><a
+ href="#title">title</a></code> attribute whose value is not the empty
+ string, then the value of that attribute is the caption information;
+ abort these steps.
- <dd>
- <p>The user agent should display some sort of indicator that an image is
- missing, providing to the user the information regarding the kind of
- image that it would be (as derived from the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute).</p>
+ <li>
+ <p>If the image is the child of a <code><a
+ href="#figure">figure</a></code> element that has a child <code><a
+ href="#legend">legend</a></code> element, then the contents of the
+ first such <code><a href="#legend">legend</a></code> element are the
+ caption information; abort these steps.
+ </li>
+ <!-- aria processing goes here -->
+
+ <li>
+ <p>Run the algorithm to create the <a href="#outline">outline</a> for
+ the document.
+
+ <li>
+ <p>If the <code><a href="#img">img</a></code> element did not end up
+ associated with a heading in theoutline, or if there are any other
+ images that are lacking an <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute and that are associated with the
+ same heading in the outline as the <code><a href="#img">img</a></code>
+ element in question, then there is no caption information; abort these
+ steps.
+
+ <li>
+ <p>The caption information is the heading with which the image is
+ associated according to the outline.
+ </ol>
<dt>If the <code title=attr-img-src><a href="#src">src</a></code>
attribute is not set and either the <code title=attr-img-alt><a
@@ -16367,10 +16364,12 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
<p>Here it is not known at the time of publication what the image will be,
only that it will be a coat of arms of some kind, and thus no replacement
- text can be provided, and instead only the kind of image is provided:</p>
+ text can be provided, and instead only a brief caption for the image is
+ provided, in the <code title=attr-title><a href="#title">title</a></code>
+ attribute:</p>
<pre>&lt;p>The last user to have uploaded a coat of arms uploaded this one:&lt;/p>
-&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" alt="{user-uploaded coat of arms}">&lt;/p></pre>
+&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms.">&lt;/p></pre>
<p>Ideally, the author would find a way to provide real replacement text
even in this case, e.g. by asking the previous user. Not providing
@@ -16431,12 +16430,6 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
href="#alt0">alt</a></code> attribute depend on what the image is intended
to represent, as described in the following sections.
- <p>A general requirement that applies in all cases is that the <code
- title=attr-img-alt><a href="#alt0">alt</a></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.
-
<h6 id=a-link><span class=secno>4.7.2.1.1. </span>A link or button
containing nothing but the image</h6>
@@ -16728,7 +16721,7 @@ passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokeniser.&lt;/p>
-<strong>&lt;p>&lt;img src="images/parsing-model-overview.png" alt=""
+&lt;p><strong>&lt;img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong>&lt;/p></pre>
<pre>&lt;!-- Using &lt;figure> and &lt;legend> -->
@@ -16861,7 +16854,7 @@ The island of Shalott.&lt;/p></pre>
&lt;p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?&lt;/p>
<strong>&lt;p>&lt;a href="?go=left" >&lt;img src="fsm-left.png" alt="Left side. ">&lt;/a
- >&lt;img src="fsm-middle.png" alt=""
+ >&lt;img src="fsm-middle.png" alt=""
>&lt;a href="?go=right">&lt;img src="fsm-right.png" alt="Right side.">&lt;/a>&lt;/p></strong></pre>
</div>
@@ -16990,30 +16983,48 @@ of various sizes."></strong></pre>
sharing an image on his blog).</p>
<p>In such cases, the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute's value must be a description of
- the <em>kind</em> of image, surrounded by braces ("{" and "}"), if that
- is known. The kind of image is something along the lines of "photo",
- "diagram", "painting", "user-uploaded image", etc. If even the kind of
- image cannot be determined, then the string <code title="">{}</code>
- must be used.</p>
+ href="#alt0">alt</a></code> attribute's value may be omitted, but one of
+ the following conditions must be met as well:</p>
+
+ <ul>
+ <li>The <code title=attr-title><a href="#title">title</a></code>
+ attribute is present and has a non-empty value.
+
+ <li>The <code><a href="#img">img</a></code> element is in a <code><a
+ href="#figure">figure</a></code> element that contains a <code><a
+ href="#legend">legend</a></code> element that contains content other
+ than <a href="#inter-element">inter-element whitespace</a>.
+
+ <li>The <code><a href="#img">img</a></code> element is the only <code><a
+ href="#img">img</a></code> element without an <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute in its <a
+ href="#section0" title=concept-section>section</a>, and its <a
+ href="#section0" title=concept-section>section</a> has an associated
+ heading.
+ </ul>
<p class=note>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
- provide the "<code title="">{...}</code>"-style value.</p>
+ provide real alternative text, then it would not be acceptable to omit
+ the code title="attr-img-alt">alt attribute.</p>
<div class=example>
<p>A photo on a photo-sharing site, if the site received the image with
no metadata other than the caption:</p>
<pre>&lt;figure>
- <strong>&lt;img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg"></strong>
&lt;legend>Bubbles traveled everywhere with us.&lt;/legend>
&lt;/figure></pre>
- <p>In this case, though, it would be better if a detailed description of
- the important parts of the image obtained from the user and included on
- the page.</p>
+ <p>It could also be marked up like this:</p>
+
+ <pre>&lt;h1>Bubbles traveled everywhere with us.&lt;/h1>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg"></strong></pre>
+
+ <p>In either case, though, it would be better if a detailed description
+ of the important parts of the image obtained from the user and included
+ on the page.</p>
</div>
<div class=example>
@@ -17025,7 +17036,7 @@ of various sizes."></strong></pre>
&lt;h1>I took a photo&lt;/h1>
&lt;p>I went out today and took a photo!&lt;/p>
&lt;figure>
- <strong>&lt;img src="photo2.jpeg" alt="{photograph}"></strong>
+ <strong>&lt;img src="photo2.jpeg"></strong>
&lt;legend>A photograph taken blindly from my front porch.&lt;/legend>
&lt;/figure>
&lt;/article></pre>
@@ -17052,10 +17063,12 @@ of various sizes."></strong></pre>
<p>Sometimes the entire point of the image is that a textual description
is not available, and the user is to provide the description. For
instance, the point of a CAPTCHA image is to see if the user can
- literally read the graphic. Here is one way to mark up a CAPTCHA:</p>
+ literally read the graphic. Here is one way to mark up a CAPTCHA (note
+ the <code title=attr-title><a href="#title">title</a></code>
+ attribute):</p>
<pre>&lt;p>&lt;label>What does this image say?
-<strong>&lt;img src="captcha.cgi?id=8934" alt="{captcha}"></strong>
+<strong>&lt;img src="captcha.cgi?id=8934" title="CAPTCHA"></strong>
&lt;input type=text name=captcha>&lt;/label>
(If you cannot see the image, you can use an &lt;a
href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
@@ -17070,34 +17083,28 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
&lt;tr> &lt;th> Images &lt;th> Descriptions
&lt;tbody>
&lt;tr>
- &lt;td> <strong>&lt;img src="2421.png" alt="{}"></strong>
+ &lt;td> <strong>&lt;img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"></strong>
&lt;td> &lt;input name="alt2421">
&lt;tr>
- &lt;td> <strong>&lt;img src="2422.png" alt="{}"></strong>
+ &lt;td> <strong>&lt;img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"></strong>
&lt;td> &lt;input name="alt2422">
&lt;/table></pre>
- </div>
- <div class=example>
- <p>The values given in the "<code title="">{...}</code>" syntax are
- intended for the user, they are not keywords. So, for instance, in a
- Finnish document, they would be in Finnish. The following snippet shows
- how a photo might be marked up on a Finnish-language photo upload site,
- when the user has not provided any replacement text:</p>
-
- <pre>&lt;html lang="fi">
- ...
- <strong>&lt;img src="v3525.jpeg" alt="{valokuva}"></strong></pre>
+ <p>Notice that even in this example, as much useful information as
+ possible is still included in the <code title=attr-title><a
+ href="#title">title</a></code> attribute.</p>
</div>
<p class=note>Since some users cannot use images at all (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><a href="#alt0">alt</a></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>
+ attribute is only allowed to be omitted rather than being provided with
+ replacement text when no alternative text is available and none can be
+ made available, as in the above examples. Lack of effort from the part
+ of the author is not an acceptable reason for omitting the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute.</p>
</dl>
<h6 id=an-image><span class=secno>4.7.2.1.10. </span>An image not intended
@@ -17145,6 +17152,12 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
title=attr-title><a href="#title">title</a></code> attribute can be used
for supplemental information.
+ <p class=note>One way to think of alternative text is to think about what
+ how you would read the page containing the image to someone over the
+ phone, without mentioning that there is an image present. Whatever you say
+ instead of the image is typically a good start for writing the alternative
+ text.
+
<h4 id=the-iframe><span class=secno>4.7.3 </span>The <dfn
id=iframe><code>iframe</code></dfn> element</h4>
View
189 source
@@ -9758,7 +9758,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
<span>sectioning root</span> element in the DOM. There is no
<span>outline</span>. Abort these steps.</p></li>
- <li><p>Associate any nodes that were not associated a <span
+ <li><p>Associate any nodes that were not associated with a <span
title="concept-section">section</span> in the steps above with <var
title="">current outlinee</var> as their section.</p></li>
@@ -13626,38 +13626,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
<dt>If the <code title="attr-img-src">src</code> attribute is set
and the <code title="attr-img-alt">alt</code> attribute is set to a
- string whose first character is a U+007B LEFT CURLY BRACKET
- character ({) and whose last character is a U+007D RIGHT CURLY
- BRACKET character (})</dt>
-
- <dd>
-
- <p>The image is a key part of the content, and there is no textual
- equivalent of the image available. The string consisting of all
- the characters between the first and the last character of the
- value of the <code title="attr-img-alt">alt</code> attribute gives
- the kind of image (e.g. photo, diagram, user-uploaded image). If
- that value is the empty string (i.e. the attribute is just "<code
- title="">{}</code>"), then even the kind of image being shown is
- not known.</p>
-
- <p>If the image is <i>available</i>, the element represents the image
- specified by the <code title="attr-img-src">src</code>
- attribute.</p>
-
- <p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent should
- display some sort of indicator that the image is not being
- rendered, and, if possible, provide to the user the information
- regarding the kind of image that is (as derived from the <code
- title="attr-img-alt">alt</code> attribute).</p>
-
- </dd>
-
- <dt>If the <code title="attr-img-src">src</code> attribute is set
- and the <code title="attr-img-alt">alt</code> attribute is set to a
- value that isn't matched by the previous two entries (not empty,
- not "<code title="">{...}</code>")</dt>
+ value that isn't empty</dt>
<dd>
@@ -13682,30 +13651,49 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
<dd>
- <p>The image's role in the document is unknown.</p>
+ <p>The image might be a key part of the content, and there is no
+ textual equivalent of the image available.</p>
- <p>If the image is <i>available</i>, the element represents the image
- specified by the <code title="attr-img-src">src</code>
+ <p>If the image is <i>available</i>, the element represents the
+ image specified by the <code title="attr-img-src">src</code>
attribute.</p>
- <p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent may display
- some sort of indicator that the image is not being rendered.</p>
+ <p>If the image is not <i>available</i> or if the user agent is
+ not configured to display the image, then the user agent should
+ display some sort of indicator that there is an image that is not
+ being rendered, and may, if requested by the user, or if so
+ configured, or when required to provide contextual information in
+ response to navigation, provide caption information for the image,
+ derived as follows:</p>
- </dd>
+ <ol>
- <dt>If the <code title="attr-img-src">src</code> attribute is not
- set and the <code title="attr-img-alt">alt</code> attribute is set
- to a string whose first character is a U+007B LEFT CURLY BRACKET
- character ({) and whose last character is a U+007D RIGHT CURLY
- BRACKET character (})</dt>
+ <li><p>If the image has a <code title="attr-title">title</code>
+ attribute whose value is not the empty string, then the value of
+ that attribute is the caption information; abort these
+ steps.</p></li>
- <dd>
+ <li><p>If the image is the child of a <code>figure</code> element
+ that has a child <code>legend</code> element, then the contents
+ of the first such <code>legend</code> element are the caption
+ information; abort these steps.</p></li>
+
+ <!-- aria processing goes here -->
+
+ <li><p>Run the algorithm to create the <span>outline</span> for
+ the document.</p></li>
+
+ <li><p>If the <code>img</code> element did not end up associated
+ with a heading in theoutline, or if there are any other images
+ that are lacking an <code title="attr-img-alt">alt</code>
+ attribute and that are associated with the same heading in the
+ outline as the <code>img</code> element in question, then there
+ is no caption information; abort these steps.</p></li>
- <p>The user agent should display some sort of indicator that an
- image is missing, providing to the user the information regarding
- the kind of image that it would be (as derived from the <code
- title="attr-img-alt">alt</code> attribute).</p>
+ <li><p>The caption information is the heading with which the
+ image is associated according to the outline.</p></li>
+
+ </ol>
</dd>
@@ -13864,11 +13852,12 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
<p>Here it is not known at the time of publication what the image
will be, only that it will be a coat of arms of some kind, and thus
- no replacement text can be provided, and instead only the kind of
- image is provided:</p>
+ no replacement text can be provided, and instead only a brief
+ caption for the image is provided, in the <code
+ title="attr-title">title</code> attribute:</p>
<pre>&lt;p>The last user to have uploaded a coat of arms uploaded this one:&lt;/p>
-&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" alt="{user-uploaded coat of arms}">&lt;/p></pre>
+&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms.">&lt;/p></pre>
<p>Ideally, the author would find a way to provide real replacement
text even in this case, e.g. by asking the previous user. Not
@@ -13934,12 +13923,6 @@ 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 or button containing nothing but the image</h6>
@@ -14256,7 +14239,7 @@ passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokeniser.&lt;/p>
-<strong>&lt;p>&lt;img src="images/parsing-model-overview.png" alt=""
+&lt;p><strong>&lt;img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong>&lt;/p></pre>
<pre>&lt;!-- Using &lt;figure> and &lt;legend> -->
@@ -14401,7 +14384,7 @@ The island of Shalott.&lt;/p></pre>
&lt;p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?&lt;/p>
<strong>&lt;p>&lt;a href="?go=left" >&lt;img src="fsm-left.png" alt="Left side. ">&lt;/a
- >&lt;img src="fsm-middle.png" alt=""
+ >&lt;img src="fsm-middle.png" alt=""
>&lt;a href="?go=right">&lt;img src="fsm-right.png" alt="Right side.">&lt;/a>&lt;/p></strong></pre>
</div>
@@ -14555,30 +14538,48 @@ of various sizes."></strong></pre>
(e.g. a blind photographer sharing an image on his blog).</p>
<p>In such cases, the <code title="attr-img-alt">alt</code>
- attribute's value must be a description of the <em>kind</em> of
- image, surrounded by braces ("{" and "}"), if that is known. The
- kind of image is something along the lines of "photo", "diagram",
- "painting", "user-uploaded image", etc. If even the kind of image
- cannot be determined, then the string <code title="">{}</code>
- must be used.</p>
+ attribute's value may be omitted, but one of the following
+ conditions must be met as well:</p>
+
+ <ul>
+
+ <li>The <code title="attr-title">title</code> attribute is
+ present and has a non-empty value.</li>
+
+ <li>The <code>img</code> element is in a <code>figure</code>
+ element that contains a <code>legend</code> element that contains
+ content other than <span>inter-element whitespace</span>.</li>
+
+ <li>The <code>img</code> element is the only <code>img</code>
+ element without an <code title="attr-img-alt">alt</code>
+ attribute in its <span title="concept-section">section</span>,
+ and its <span title="concept-section">section</span> has an
+ associated heading.</li>
+
+ </ul>
<p class="note">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 provide the "<code
- title="">{...}</code>"-style value.</p>
+ not be acceptable to omit the code title="attr-img-alt">alt</code>
+ attribute.</p>
<div class="example">
<p>A photo on a photo-sharing site, if the site received the
image with no metadata other than the caption:</p>
<pre>&lt;figure>
- <strong>&lt;img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg"></strong>
&lt;legend>Bubbles traveled everywhere with us.&lt;/legend>
&lt;/figure></pre>
- <p>In this case, though, it would be better if a detailed
+ <p>It could also be marked up like this:</p>
+
+ <pre>&lt;h1>Bubbles traveled everywhere with us.&lt;/h1>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg"></strong></pre>
+
+ <p>In either case, though, it would be better if a detailed
description of the important parts of the image obtained from the
user and included on the page.</p>
@@ -14594,7 +14595,7 @@ of various sizes."></strong></pre>
&lt;h1>I took a photo&lt;/h1>
&lt;p>I went out today and took a photo!&lt;/p>
&lt;figure>
- <strong>&lt;img src="photo2.jpeg" alt="{photograph}"></strong>
+ <strong>&lt;img src="photo2.jpeg"></strong>
&lt;legend>A photograph taken blindly from my front porch.&lt;/legend>
&lt;/figure>
&lt;/article></pre>
@@ -14623,11 +14624,12 @@ of various sizes."></strong></pre>
<p>Sometimes the entire point of the image is that a textual
description is not available, and the user is to provide the
description. For instance, the point of a CAPTCHA image is to see
- if the user can literally read the graphic. Here is one way to mark
- up a CAPTCHA:</p>
+ if the user can literally read the graphic. Here is one way to
+ mark up a CAPTCHA (note the <code title="attr-title">title</code>
+ attribute):</p>
<pre>&lt;p>&lt;label>What does this image say?
-<strong>&lt;img src="captcha.cgi?id=8934" alt="{captcha}"></strong>
+<strong>&lt;img src="captcha.cgi?id=8934" title="CAPTCHA"></strong>
&lt;input type=text name=captcha>&lt;/label>
(If you cannot see the image, you can use an &lt;a
href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
@@ -14642,27 +14644,16 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
&lt;tr> &lt;th> Images &lt;th> Descriptions
&lt;tbody>
&lt;tr>
- &lt;td> <strong>&lt;img src="2421.png" alt="{}"></strong>
+ &lt;td> <strong>&lt;img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"></strong>
&lt;td> &lt;input name="alt2421">
&lt;tr>
- &lt;td> <strong>&lt;img src="2422.png" alt="{}"></strong>
+ &lt;td> <strong>&lt;img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"></strong>
&lt;td> &lt;input name="alt2422">
&lt;/table></pre>
- </div>
-
- <div class="example">
-
- <p>The values given in the "<code title="">{...}</code>" syntax are
- intended for the user, they are not keywords. So, for instance, in
- a Finnish document, they would be in Finnish. The following snippet
- shows how a photo might be marked up on a Finnish-language photo
- upload site, when the user has not provided any replacement
- text:</p>
-
- <pre>&lt;html lang="fi">
- ...
- <strong>&lt;img src="v3525.jpeg" alt="{valokuva}"></strong></pre>
+ <p>Notice that even in this example, as much useful information
+ as possible is still included in the <code
+ title="attr-title">title</code> attribute.</p>
</div>
@@ -14671,10 +14662,12 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
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>
+ title="attr-img-alt">alt</code> attribute is only allowed to be
+ omitted rather than being provided with replacement text when no
+ alternative text is available and none can be made available, as
+ in the above examples. Lack of effort from the part of the author
+ is not an acceptable reason for omitting the <code
+ title="attr-img-alt">alt</code> attribute.</p>
</dd>
@@ -14729,6 +14722,12 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
title="attr-title">title</code> attribute can be used for
supplemental information.</p>
+ <p class="note">One way to think of alternative text is to think
+ about what how you would read the page containing the image to
+ someone over the phone, without mentioning that there is an image
+ present. Whatever you say instead of the image is typically a good
+ start for writing the alternative text.</p>
+

0 comments on commit f6a42ea

Please sign in to comment.