Skip to content
Permalink
Browse files

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

  • Loading branch information
Hixie committed Aug 26, 2008
1 parent da9dc3f commit f6a42ea83a138a424c0056759f90ce75a922ae35
Showing with 195 additions and 183 deletions.
  1. +101 −88 index
  2. +94 −95 source
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"

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

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

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

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

0 comments on commit f6a42ea

Please sign in to comment.
You can’t perform that action at this time.