Permalink
Browse files

[a] (0) Emphasise that captions are not suitable alternative text.

git-svn-id: http://svn.whatwg.org/webapps@2110 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 31da8db commit 0d0e8ce8f1a6377e96f076b3e77701d124a5a8ca @Hixie Hixie committed Aug 23, 2008
Showing with 116 additions and 0 deletions.
  1. +61 −0 index
  2. +55 −0 source
View
61 index
@@ -815,6 +815,9 @@
<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>
+
+ <li><a href="#anti-patterns"><span class=secno>4.7.2.1.11.
+ </span>Anti-patterns</a>
</ul>
</ul>
@@ -16678,6 +16681,51 @@ 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></pre>
+
+ <p>In these cases, it would be wrong to include alternative text that
+ consists of just a caption. If a caption is to be included, then either
+ the <code title=attr-title><a href="#title">title</a></code> attribute
+ can be used, or the <code><a href="#figure">figure</a></code> and
+ <code><a href="#legend">legend</a></code> elements can be used. In the
+ latter case, the image would in fact be a phrase or paragraph with an
+ alternative graphical representation, and would thus require alternative
+ text.</p>
+
+ <pre>&lt;!-- Using the title="" attribute -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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=""
+ title="Flowchart representation of the parsing model."></strong>&lt;/p></pre>
+
+ <pre>&lt;!-- Using &lt;figure> and &lt;legend> -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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>
+&lt;figure>
+ <strong>&lt;img src="images/parsing-model-overview.png" alt="The Network leads
+ to the Tokeniser, which leads to the Tree Construction. The Tree
+ Construction leads to two items. The first is Script Execution, which
+ leads via document.write() back to the Tokeniser. The second item
+ from which Tree Construction leads is the DOM. The DOM is related to
+ the Script Execution."></strong>
+ &lt;legend>Flowchart representation of the parsing model.&lt;/legend>
+&lt;/figure></pre>
+
+ <pre
+ class=bad>&lt;!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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>
+&lt;p>&lt;img src="images/parsing-model-overview.png"
+ alt="Flowchart representation of the parsing model.">&lt;/p>
+&lt;!-- Never put the image's caption in the alt="" attribute! --></pre>
</div>
<div class=example>
@@ -17029,6 +17077,19 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
images, or should the e-mail be forwarded on to other users whose
abilities might not include easily seeing images.
+ <h6 id=anti-patterns><span class=secno>4.7.2.1.11. </span>Anti-patterns</h6>
+
+ <p>The <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute's
+ value should never contain text that could be considered the image's
+ <em><a href="#caption0">caption</a></em>, <em><a
+ href="#title1">title</a></em>, or <em><a href="#legend">legend</a></em>.
+ It is supposed to contain replacement text that could be used by users
+ <em>instead</em> of the image; it is not meant to supplement the image.
+ The <code title=attr-title><a href="#title">title</a></code> attribute can
+ be used for supplemental information.
+
+ <p>
+
<h4 id=the-iframe><span class=secno>4.7.3 </span>The <dfn
id=iframe><code>iframe</code></dfn> element</h4>
View
55 source
@@ -14211,6 +14211,49 @@ 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></pre>
+ <p>In these cases, it would be wrong to include alternative text
+ that consists of just a caption. If a caption is to be included,
+ then either the <code title="attr-title">title</code> attribute can
+ be used, or the <code>figure</code> and <code>legend</code>
+ elements can be used. In the latter case, the image would in fact
+ be a phrase or paragraph with an alternative graphical
+ representation, and would thus require alternative text.</p>
+
+ <pre>&lt;!-- Using the title="" attribute -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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=""
+ title="Flowchart representation of the parsing model."></strong>&lt;/p></pre>
+
+ <pre>&lt;!-- Using &lt;figure> and &lt;legend> -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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>
+&lt;figure>
+ <strong>&lt;img src="images/parsing-model-overview.png" alt="The Network leads
+ to the Tokeniser, which leads to the Tree Construction. The Tree
+ Construction leads to two items. The first is Script Execution, which
+ leads via document.write() back to the Tokeniser. The second item
+ from which Tree Construction leads is the DOM. The DOM is related to
+ the Script Execution."></strong>
+ &lt;legend>Flowchart representation of the parsing model.&lt;/legend>
+&lt;/figure></pre>
+
+ <pre class="bad">&lt;!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
+&lt;p>The network passes data to the Tokeniser stage, which
+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>
+&lt;p>&lt;img src="images/parsing-model-overview.png"
+ alt="Flowchart representation of the parsing model.">&lt;/p>
+&lt;!-- Never put the image's caption in the alt="" attribute! --></pre>
+
</div>
<div class="example">
@@ -14617,6 +14660,18 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
+ <h6>Anti-patterns</h6>
+
+ <p>The <code title="attr-img-alt">alt</code> attribute's value
+ should never contain text that could be considered the image's
+ <em>caption</em>, <em>title</em>, or <em>legend</em>. It is supposed
+ to contain replacement text that could be used by users
+ <em>instead</em> of the image; it is not meant to supplement the
+ image. The <code title="attr-title">title</code> attribute can be
+ used for supplemental information.<p>
+
+
+
<h4>The <dfn><code>iframe</code></dfn> element</h4>

0 comments on commit 0d0e8ce

Please sign in to comment.