[html5] r1973 - [e] (0) Change <dl> to sections for convenience.
whatwg at whatwg.org
whatwg at whatwg.org
Mon Aug 4 01:02:01 PDT 2008
Author: ianh
Date: 2008-08-04 01:02:01 -0700 (Mon, 04 Aug 2008)
New Revision: 1973
Modified:
index
source
Log:
[e] (0) Change <dl> to sections for convenience.
Modified: index
===================================================================
--- index 2008-08-04 07:52:30 UTC (rev 1972)
+++ index 2008-08-04 08:02:01 UTC (rev 1973)
@@ -693,6 +693,29 @@
<ul class=toc>
<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
+ phrase or paragraph with an alternative graphical
+ representation</a>
+
+ <li><a href="#icons"><span class=secno>4.7.2.1.2. </span>Icons: a
+ short phrase or label with an alternative graphical
+ representation</a>
+
+ <li><a href="#a-graphical"><span class=secno>4.7.2.1.3. </span>A
+ graphical representation of some of the surrounding text</a>
+
+ <li><a href="#a-purely"><span class=secno>4.7.2.1.4. </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.5. </span>A key
+ part of the content</a>
+
+ <li><a href="#an-image"><span class=secno>4.7.2.1.6. </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>
</ul>
<li><a href="#the-iframe"><span class=secno>4.7.3 </span>The
@@ -15918,182 +15941,183 @@
<p>The requirements for the <code title=attr-img-alt><a
href="#alt0">alt</a></code> attribute depend on what the image is intended
- to represent:
+ to represent, as described in the following sections.
- <dl>
- <dt>A phrase or paragraph with an alternative graphical representation
+ <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.
- <dd>
- <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><a
- href="#img">img</a></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 browser, or simply because they
- are blind) are still able to understand the message being conveyed.</p>
+ <h6 id=a-phrase><span class=secno>4.7.2.1.1. </span>A phrase or paragraph
+ with an alternative graphical representation</h6>
- <p>The text must be given in the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute, and must convey the same message
- as the image specified in the <code title=attr-img-src><a
- href="#src">src</a></code> attribute.</p>
+ <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><a
+ href="#img">img</a></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 browser, or simply because they
+ are blind) are still able to understand the message being conveyed.
- <div class=example>
- <p>In the following example we have <a
- href="images/parsing-model-overview.png">a flowchart</a> in image form,
- with text in the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute rephrasing the flowchart in prose
- form:</p>
+ <p>The text must be given in the <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute, and must convey the same message as
+ the image specified in the <code title=attr-img-src><a
+ href="#src">src</a></code> attribute.
- <pre><p>In the common case, the data handled by the tokenization stage
+ <div class=example>
+ <p>In the following example we have <a
+ href="images/parsing-model-overview.png">a flowchart</a> in image form,
+ with text in the <code title=attr-img-alt><a href="#alt0">alt</a></code>
+ attribute rephrasing the flowchart in prose form:</p>
+
+ <pre><p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><strong><img src="images/parsing-model-overview.png" alt="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."></strong></p></pre>
- </div>
+ </div>
- <div class=example>
- <p>Here's another example, showing a good solution and a bad solution to
- the problem of including an image in a description.</p>
+ <div class=example>
+ <p>Here's another example, showing a good solution and a bad solution to
+ the problem of including an image in a description.</p>
- <p>First, here's the good solution. This sample shows how the
- alternative text should just be what you would have put in the prose if
- the image had never existed.</p>
+ <p>First, here's the good solution. This sample shows how the alternative
+ text should just be what you would have put in the prose if the image had
+ never existed.</p>
- <pre><!-- This is the correct way to do things. -->
+ <pre><!-- This is the correct way to do things. -->
<p>
- You are standing in an open field west of a house.
- <strong><img src="house.jpeg" alt="The house is white, with a boarded front door."></strong>
- There is a small mailbox here.
+You are standing in an open field west of a house.
+<strong><img src="house.jpeg" alt="The house is white, with a boarded front door."></strong>
+There is a small mailbox here.
</p></pre>
- <p>Second, here's the bad solution. In this incorrect way of doing
- things, the alternative text is simply a description of the image,
- instead of a textual replacement for the image. It's bad because when
- the image isn't shown, the text doesn't flow as well as in the first
- example.</p>
+ <p>Second, here's the bad solution. In this incorrect way of doing things,
+ the alternative text is simply a description of the image, instead of a
+ textual replacement for the image. It's bad because when the image isn't
+ shown, the text doesn't flow as well as in the first example.</p>
- <pre class=bad><!-- <em>This is the wrong way to do things.</em> -->
+ <pre class=bad><!-- <em>This is the wrong way to do things.</em> -->
<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="A white house, with a boarded front door.">
- There is a small mailbox here.
+You are standing in an open field west of a house.
+<img src="house.jpeg" alt="A white house, with a boarded front door.">
+There is a small mailbox here.
</p></pre>
- </div>
+ </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>
+ <p>It is important to realize that the alternative text is a
+ <em>replacement</em> for the image, not a description of the image.
- <dt>Icons: a short phrase or label with an alternative graphical
- representation
+ <h6 id=icons><span class=secno>4.7.2.1.2. </span>Icons: a short phrase or
+ label with an alternative graphical representation</h6>
- <dd>
- <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>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>In some cases, the icon is supplemental to a text label conveying the
- same meaning. In those cases, the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute must be present but must be empty.</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><a
+ href="#alt0">alt</a></code> attribute must be present but must be empty.
- <div class=example>
- <p>Here the icons are next to text that conveys the same meaning, so
- they have an empty <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute:</p>
+ <div class=example>
+ <p>Here the icons are next to text that conveys the same meaning, so they
+ have an empty <code title=attr-img-alt><a href="#alt0">alt</a></code>
+ attribute:</p>
- <pre><nav>
- <p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
- <p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
- Configuration Tools</a></p>
+ <pre><nav>
+<p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
+<p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
+Configuration Tools</a></p>
</nav></pre>
- </div>
+ </div>
- <p>In other cases, the icon has no text next to it describing what it
- means; the icon is supposed to be self-explanatory. In those cases, an
- equivalent textual label must be given in the <code
- title=attr-img-alt><a href="#alt0">alt</a></code> attribute.</p>
+ <p>In other cases, the icon has no text next to it describing what it
+ means; the icon is supposed to be self-explanatory. In those cases, an
+ equivalent textual label must be given in the <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute.
- <div class=example>
- <p>Here, posts on a news site are labeled with an icon indicating their
- topic.</p>
+ <div class=example>
+ <p>Here, posts on a news site are labeled with an icon indicating their
+ topic.</p>
- <pre><body>
- <article>
- <header>
- <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
- <p><strong><img src="movies.png" alt="Movies"></strong></p>
- </header>
- <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
- making this its 8th win in the last 12 years.</p>
- </article>
- <article>
- <header>
- <h1>Latest TWiT episode is online</h1>
- <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
- </header>
- <p>The latest TWiT episode has been posted, in which we hear
- several tech news stories as well as learning much more about the
- iPhone. This week, the panelists compare how reflective their
- iPhones' Apple logos are.</p>
- </article>
+ <pre><body>
+<article>
+<header>
+ <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+ <p><strong><img src="movies.png" alt="Movies"></strong></p>
+</header>
+<p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+making this its 8th win in the last 12 years.</p>
+</article>
+<article>
+<header>
+ <h1>Latest TWiT episode is online</h1>
+ <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
+</header>
+<p>The latest TWiT episode has been posted, in which we hear
+several tech news stories as well as learning much more about the
+iPhone. This week, the panelists compare how reflective their
+iPhones' Apple logos are.</p>
+</article>
</body></pre>
- </div>
+ </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>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>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>
+ <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 next to the name of the entity that it
- represents, then the logo is supplemental, and its <code
- title=attr-img-alt><a href="#alt0">alt</a></code> attribute must instead
- be empty.</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><a href="#alt0">alt</a></code> attribute must instead
+ be empty.
- <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 discussed, then it is
- being used as a phrase or paragraph (the description of the logo) with
- an alternative graphical representation (the logo itself), and the first
- entry above applies.</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 discussed, then it is being used as
+ a phrase or paragraph (the description of the logo) with an alternative
+ graphical representation (the logo itself), and the first entry above
+ applies.
- <div class=example>
- <p>In the following snippets, all four of the above cases are present.
- First, we see a logo used to represent a company:</p>
+ <div class=example>
+ <p>In the following snippets, all four of the above cases are present.
+ First, we see a logo used to represent a company:</p>
- <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
+ <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
- <p>Next, we see a paragraph which uses a logo right next to the company
- name, and so doesn't have any alternative text:
+ <p>Next, we see a paragraph which uses a logo right next to the company
+ name, and so doesn't have any alternative text:
- <pre><article>
- <h2>News</h2>
- <p>We have recently been looking at buying the <strong><img src="alpha.gif"
- alt=""> ΑΒΓ company</strong>, a small Greek company
- specializing in our type of product.</p></pre>
+ <pre><article>
+<h2>News</h2>
+<p>We have recently been looking at buying the <strong><img src="alpha.gif"
+alt=""> ΑΒΓ company</strong>, a small Greek company
+specializing in our type of product.</p></pre>
- <p>In this third snippet, we have a logo being used in an aside, as part
- of the larger article discussing the acquisition:</p>
+ <p>In this third snippet, we have a logo being used in an aside, as part
+ of the larger article discussing the acquisition:</p>
- <pre> <strong><aside><p><img src="alpha-large.gif" alt=""></p></aside></strong>
- <p>The ΑΒΓ company has had a good quarter, and our
- pie chart studies of their accounts suggest a much bigger blue slice
- than its green and orange slices, which is always a good sign.</p>
+ <pre> <strong><aside><p><img src="alpha-large.gif" alt=""></p></aside></strong>
+<p>The ΑΒΓ company has had a good quarter, and our
+pie chart studies of their accounts suggest a much bigger blue slice
+than its green and orange slices, which is always a good sign.</p>
</article></pre>
- <p>Finally, we have an opinion piece talking about a logo, and the logo
- is therefore described in detail in the alternative text.</p>
+ <p>Finally, we have an opinion piece talking about a logo, and the logo is
+ therefore described in detail in the alternative text.</p>
- <pre><p>Consider for a moment their logo:</p>
+ <pre><p>Consider for a moment their logo:</p>
<strong><p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p></strong>
@@ -16105,64 +16129,64 @@
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p></pre>
- <p>This example shows how the alternative text should be written such
- that if the image isn't available, and the text is used instead, the
- text flows seamlessly into the surrounding text, as if the image had
- never been there in the first place.</p>
- </div>
+ <p>This example shows how the alternative text should be written such that
+ if the image isn't available, and the text is used instead, the text
+ flows seamlessly into the surrounding text, as if the image had never
+ been there in the first place.</p>
+ </div>
- <dt>A graphical representation of some of the surrounding text
+ <h6 id=a-graphical><span class=secno>4.7.2.1.3. </span>A graphical
+ representation of some of the surrounding text</h6>
- <dd>
- <p>In many cases, the image is actually just supplementary, and its
- presence merely reinforces the surrounding text. In these cases, the
- <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute must
- be present but its value must be the empty string.</p>
+ <p>In many cases, the image is actually just supplementary, and its
+ presence merely reinforces the surrounding text. In these cases, the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must be
+ present but its value must be the empty string.
- <div class=example>
- <p>A flowchart that repeats the previous paragraph in graphical form:</p>
+ <div class=example>
+ <p>A flowchart that repeats the previous paragraph in graphical form:</p>
- <pre><p>The network passes data to the Tokeniser stage, which
+ <pre><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.</p>
<strong><p><img src="images/parsing-model-overview.png" alt=""></p></strong></pre>
- </div>
+ </div>
- <div class=example>
- <p>A graph that repeats the previous paragraph in graphical form:</p>
+ <div class=example>
+ <p>A graph that repeats the previous paragraph in graphical form:</p>
- <pre><p>According to a study covering several billion pages,
+ <pre><p>According to a study covering several billion pages,
about 62% of documents on the Web in 2007 triggered the Quirks
rendering mode of Web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<strong><p><img src="rendering-mode-pie-chart.png" alt=""></p></strong></pre>
- </div>
+ </div>
- <p>In general, an image falls into this category if removing the image
- 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.</p>
+ <p>In general, an image falls into this category if removing the image
+ 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.
- <dt>A purely decorative image that doesn't add any information but is
- still specific to the surrounding content
+ <h6 id=a-purely><span class=secno>4.7.2.1.4. </span>A purely decorative
+ image that doesn't add any information but is still specific to the
+ surrounding content</h6>
- <dd>
- <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><a
- href="#alt0">alt</a></code> attribute must be present but its value must
- be the empty string.
+ <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><a
+ href="#alt0">alt</a></code> attribute must be present but its value must
+ be the empty string.
- <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>
+ <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>
- <pre><h1>The Lady of Shalott</h1>
+ <pre><h1>The Lady of Shalott</h1>
<strong><p><img src="shalott.jpeg" alt=""></p></strong>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
@@ -16173,129 +16197,122 @@
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p></pre>
- </div>
+ </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>
+ <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.
- <dt>A key part of the content
+ <h6 id=a-key><span class=secno>4.7.2.1.5. </span>A key part of the content</h6>
- <dd>
- <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>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>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 blog entry about that
- photograph, text that conveys can serve as a substitute for the image
- must be given as the contents of the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute.</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 blog entry about that
+ photograph, text that conveys can serve as a substitute for the image must
+ be given as the contents of the <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute.
- <p>In a rare subset of these cases, there might be no alternative text
- available. This could be the case, for instance, on a photo upload site,
- if the site has received 8000 photos from a user without the user
- annotating any of them. 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 "}"). The kind
- of image is something along the lines of "photo", "diagram", "painting",
- "user-uploaded image", etc.</p>
+ <p>In a rare subset of these cases, there might be no alternative text
+ available. This could be the case, for instance, on a photo upload site,
+ if the site has received 8000 photos from a user without the user
+ annotating any of them. 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 "}"). The kind of
+ image is something along the lines of "photo", "diagram", "painting",
+ "user-uploaded image", etc.
- <p>In any case, if an image is a key part of the content, the <code
- title=attr-img-alt><a href="#alt0">alt</a></code> attribute must not be
- omitted or specified with an empty value.</p>
+ <p>In any case, if an image is a key part of the content, the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must not be
+ omitted or specified with an empty value.
- <div class=example>
- <p>A screenshot in a gallery of screenshots for a new OS, with some
- alternative text:</p>
+ <div class=example>
+ <p>A screenshot in a gallery of screenshots for a new OS, with some
+ alternative text:</p>
- <pre><figure>
- <strong><img src="KDE%20Light%20desktop.png"
- alt="The desktop is blue, with icons along the left hand side in
- two columns, reading System, Home, K-Mail, etc. A window is
- open showing that menus wrap to a second line if they
- cannot fit in the window. The window has a list of icons
- along the top, with an address bar below it, a list of
- icons for tabs along the left edge, a status bar on the
- bottom, and two panes in the middle. The desktop has a bar
- at the bottom of the screen with a few buttons, a pager, a
- list of open applications, and a clock."></strong>
- <legend>Screenshot of a KDE desktop.</legend>
+ <pre><figure>
+<strong><img src="KDE%20Light%20desktop.png"
+ alt="The desktop is blue, with icons along the left hand side in
+ two columns, reading System, Home, K-Mail, etc. A window is
+ open showing that menus wrap to a second line if they
+ cannot fit in the window. The window has a list of icons
+ along the top, with an address bar below it, a list of
+ icons for tabs along the left edge, a status bar on the
+ bottom, and two panes in the middle. The desktop has a bar
+ at the bottom of the screen with a few buttons, a pager, a
+ list of open applications, and a clock."></strong>
+<legend>Screenshot of a KDE desktop.</legend>
</figure></pre>
- </div>
+ </div>
- <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>
+ <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><figure>
- <strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
- <legend>Bubbles traveled everywhere with us.</legend>
+ <pre><figure>
+<strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+<legend>Bubbles traveled everywhere with us.</legend>
</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>
- </div>
+ <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>
+ </div>
- <div class=example>
- <p>Sometimes there simply is no text that can do justice to an image.
- For example, there is little that can be said to usefully describe a
- Rorschach inkblot test.</p>
+ <div class=example>
+ <p>Sometimes there simply is no text that can do justice to an image. For
+ example, there is little that can be said to usefully describe a
+ Rorschach inkblot test.</p>
- <pre><figure>
- <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ <pre><figure>
+<strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
+<legend>A black outline of the first of the ten cards
+in the Rorschach inkblot test.</legend>
</figure></pre>
- <p>Note that the following would be a very bad use of alternative text:</p>
+ <p>Note that the following would be a very bad use of alternative text:</p>
- <pre class=bad><!-- This example is wrong. Do not copy it. -->
+ <pre class=bad><!-- This example is wrong. Do not copy it. -->
<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+<img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+of the first of the ten cards in the Rorschach inkblot test.">
+<legend>A black outline of the first of the ten cards
+in the Rorschach inkblot test.</legend>
</figure></pre>
- <p>Including the caption in the alternative text like this isn't useful
- because it effectively duplicates the caption for users who don't have
- images, taunting them twice yet not helping them any more than if they
- had only read or heard the caption once.</p>
- </div>
+ <p>Including the caption in the alternative text like this isn't useful
+ because it effectively duplicates the caption for users who don't have
+ images, taunting them twice yet not helping them any more than if they
+ had only read or heard the caption once.</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>
+ <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.
- <dt>An image in an e-mail or document intended for a specific person who
- is known to be able to view images
+ <h6 id=an-image><span class=secno>4.7.2.1.6. </span>An image in an e-mail
+ or document intended for a specific person who is known to be able to view
+ images</h6>
- <dd>
- <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><a href="#alt0">alt</a></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 to other users whose
- abilities might not include easily seeing images.</p>
- </dl>
+ <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><a href="#alt0">alt</a></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 to other users whose
+ abilities might not include easily seeing images.
- <p>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.
-
<h4 id=the-iframe><span class=secno>4.7.3 </span>The <dfn
id=iframe><code>iframe</code></dfn> element</h4>
Modified: source
===================================================================
--- source 2008-08-04 07:52:30 UTC (rev 1972)
+++ source 2008-08-04 08:02:01 UTC (rev 1973)
@@ -13503,38 +13503,42 @@
<h5 id="alt">Requirements for providing text to act as an alternative for images</h5>
<p>The requirements for the <code title="attr-img-alt">alt</code>
- attribute depend on what the image is intended to represent:</p>
+ attribute depend on what the image is intended to represent, as
+ described in the following sections.</p>
- <dl>
+ <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>
- <dt>A phrase or paragraph with an alternative graphical representation</dt>
- <dd>
+ <h6>A phrase or paragraph with an alternative graphical representation</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
- browser, or simply because they are blind) are still able to
- understand the message being conveyed.</p>
+ <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
+ browser, or simply because they are blind) are still able to
+ understand the message being conveyed.</p>
- <p>The text must be given in the <code
- title="attr-img-alt">alt</code> attribute, and must convey the
- same message as the image specified in the <code
- title="attr-img-src">src</code> attribute.</p>
+ <p>The text must be given in the <code
+ title="attr-img-alt">alt</code> attribute, and must convey the
+ same message as the image specified in the <code
+ title="attr-img-src">src</code> attribute.</p>
- <div class="example">
+ <div class="example">
- <p>In the following example we have <a
- href="images/parsing-model-overview.png">a flowchart</a> in image
- form, with text in the <code title="attr-img-alt">alt</code>
- attribute rephrasing the flowchart in prose form:</p>
+ <p>In the following example we have <a
+ href="images/parsing-model-overview.png">a flowchart</a> in image
+ form, with text in the <code title="attr-img-alt">alt</code>
+ attribute rephrasing the flowchart in prose form:</p>
- <pre><p>In the common case, the data handled by the tokenization stage
+ <pre><p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><strong><img src="images/parsing-model-overview.png" alt="The network
passes data to the Tokeniser stage, which passes data to the Tree
@@ -13542,162 +13546,158 @@
Script Execution. Script Execution is linked to the DOM, and, using
document.write(), passes data to the Tokeniser."></strong></p></pre>
- </div>
+ </div>
- <div class="example">
+ <div class="example">
- <p>Here's another example, showing a good solution and a bad
- solution to the problem of including an image in a
- description.</p>
+ <p>Here's another example, showing a good solution and a bad
+ solution to the problem of including an image in a
+ description.</p>
- <p>First, here's the good solution. This sample shows how the
- alternative text should just be what you would have put in the
- prose if the image had never existed.</p>
+ <p>First, here's the good solution. This sample shows how the
+ alternative text should just be what you would have put in the
+ prose if the image had never existed.</p>
- <pre><!-- This is the correct way to do things. -->
+ <pre><!-- This is the correct way to do things. -->
<p>
- You are standing in an open field west of a house.
- <strong><img src="house.jpeg" alt="The house is white, with a boarded front door."></strong>
- There is a small mailbox here.
+You are standing in an open field west of a house.
+<strong><img src="house.jpeg" alt="The house is white, with a boarded front door."></strong>
+There is a small mailbox here.
</p></pre>
- <p>Second, here's the bad solution. In this incorrect way of
- doing things, the alternative text is simply a description of the
- image, instead of a textual replacement for the image. It's bad
- because when the image isn't shown, the text doesn't flow as well
- as in the first example.</p>
+ <p>Second, here's the bad solution. In this incorrect way of
+ doing things, the alternative text is simply a description of the
+ image, instead of a textual replacement for the image. It's bad
+ because when the image isn't shown, the text doesn't flow as well
+ as in the first example.</p>
- <pre class="bad"><!-- <em>This is the wrong way to do things.</em> -->
+ <pre class="bad"><!-- <em>This is the wrong way to do things.</em> -->
<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="A white house, with a boarded front door.">
- There is a small mailbox here.
+You are standing in an open field west of a house.
+<img src="house.jpeg" alt="A white house, with a boarded front door.">
+There is a small mailbox here.
</p></pre>
- </div>
+ </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>
+ <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>
- </dd>
+ <h6>Icons: a short phrase or label with an alternative graphical representation</h6>
- <dt>Icons: a short phrase or label with an alternative graphical representation</dt>
+ <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>
- <dd>
+ <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>
- <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>
+ <div class="example">
- <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>
+ <p>Here the icons are next to text that conveys the same meaning,
+ so they have an empty <code title="attr-img-alt">alt</code>
+ attribute:</p>
- <div class="example">
-
- <p>Here the icons are next to text that conveys the same meaning,
- so they have an empty <code title="attr-img-alt">alt</code>
- attribute:</p>
-
- <pre><nav>
- <p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
- <p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
- Configuration Tools</a></p>
+ <pre><nav>
+<p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
+<p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
+Configuration Tools</a></p>
</nav></pre>
- </div>
+ </div>
- <p>In other cases, the icon has no text next to it describing what
- it means; the icon is supposed to be self-explanatory. In those
- cases, an equivalent textual label must be given in the <code
- title="attr-img-alt">alt</code> attribute.</p>
+ <p>In other cases, the icon has no text next to it describing what
+ it means; the icon is supposed to be self-explanatory. In those
+ cases, an equivalent textual label must be given in the <code
+ title="attr-img-alt">alt</code> attribute.</p>
- <div class="example">
+ <div class="example">
- <p>Here, posts on a news site are labeled with an icon
- indicating their topic.</p>
+ <p>Here, posts on a news site are labeled with an icon
+ indicating their topic.</p>
- <pre><body>
- <article>
- <header>
- <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
- <p><strong><img src="movies.png" alt="Movies"></strong></p>
- </header>
- <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
- making this its 8th win in the last 12 years.</p>
- </article>
- <article>
- <header>
- <h1>Latest TWiT episode is online</h1>
- <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
- </header>
- <p>The latest TWiT episode has been posted, in which we hear
- several tech news stories as well as learning much more about the
- iPhone. This week, the panelists compare how reflective their
- iPhones' Apple logos are.</p>
- </article>
+ <pre><body>
+<article>
+<header>
+ <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+ <p><strong><img src="movies.png" alt="Movies"></strong></p>
+</header>
+<p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+making this its 8th win in the last 12 years.</p>
+</article>
+<article>
+<header>
+ <h1>Latest TWiT episode is online</h1>
+ <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
+</header>
+<p>The latest TWiT episode has been posted, in which we hear
+several tech news stories as well as learning much more about the
+iPhone. This week, the panelists compare how reflective their
+iPhones' Apple logos are.</p>
+</article>
</body></pre>
- </div>
+ </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>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, 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 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
- discussed, then it is being used as a phrase or paragraph (the
- description of the logo) with an alternative graphical
- representation (the logo itself), and the first entry above
- applies.</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
+ discussed, then it is being used as a phrase or paragraph (the
+ description of the logo) with an alternative graphical
+ representation (the logo itself), and the first entry above
+ applies.</p>
- <div class="example">
+ <div class="example">
- <p>In the following snippets, all four of the above cases are
- present. First, we see a logo used to represent a company:</p>
+ <p>In the following snippets, all four of the above cases are
+ present. First, we see a logo used to represent a company:</p>
- <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
+ <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
- <p>Next, we see a paragraph which uses a logo right next to the
- company name, and so doesn't have any alternative text:
+ <p>Next, we see a paragraph which uses a logo right next to the
+ company name, and so doesn't have any alternative text:
- <pre><article>
- <h2>News</h2>
- <p>We have recently been looking at buying the <strong><img src="alpha.gif"
- alt=""> ΑΒΓ company</strong>, a small Greek company
- specializing in our type of product.</p></pre>
+ <pre><article>
+<h2>News</h2>
+<p>We have recently been looking at buying the <strong><img src="alpha.gif"
+alt=""> ΑΒΓ company</strong>, a small Greek company
+specializing in our type of product.</p></pre>
- <p>In this third snippet, we have a logo being used in an aside,
- as part of the larger article discussing the acquisition:</p>
+ <p>In this third snippet, we have a logo being used in an aside,
+ as part of the larger article discussing the acquisition:</p>
<pre> <strong><aside><p><img src="alpha-large.gif" alt=""></p></aside></strong>
- <p>The ΑΒΓ company has had a good quarter, and our
- pie chart studies of their accounts suggest a much bigger blue slice
- than its green and orange slices, which is always a good sign.</p>
+<p>The ΑΒΓ company has had a good quarter, and our
+pie chart studies of their accounts suggest a much bigger blue slice
+than its green and orange slices, which is always a good sign.</p>
</article></pre>
- <p>Finally, we have an opinion piece talking about a logo, and
- the logo is therefore described in detail in the alternative
- text.</p>
+ <p>Finally, we have an opinion piece talking about a logo, and
+ the logo is therefore described in detail in the alternative
+ text.</p>
- <pre><p>Consider for a moment their logo:</p>
+ <pre><p>Consider for a moment their logo:</p>
<strong><p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p></strong>
@@ -13709,78 +13709,72 @@
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p></pre>
- <p>This example shows how the alternative text should be written
- such that if the image isn't available, and the text is used
- instead, the text flows seamlessly into the surrounding text, as
- if the image had never been there in the first place.</p>
+ <p>This example shows how the alternative text should be written
+ such that if the image isn't available, and the text is used
+ instead, the text flows seamlessly into the surrounding text, as
+ if the image had never been there in the first place.</p>
- </div>
+ </div>
- </dd>
- <dt>A graphical representation of some of the surrounding text</dt>
+ <h6>A graphical representation of some of the surrounding text</h6>
- <dd>
+ <p>In many cases, the image is actually just supplementary, and
+ its presence merely reinforces the surrounding text. In these
+ cases, the <code title="attr-img-alt">alt</code> attribute must be
+ present but its value must be the empty string.</p>
- <p>In many cases, the image is actually just supplementary, and
- its presence merely reinforces the surrounding text. In these
- cases, the <code title="attr-img-alt">alt</code> attribute must be
- present but its value must be the empty string.</p>
+ <div class="example">
- <div class="example">
+ <p>A flowchart that repeats the previous paragraph in graphical form:</p>
- <p>A flowchart that repeats the previous paragraph in graphical form:</p>
-
- <pre><p>The network passes data to the Tokeniser stage, which
+ <pre><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.</p>
<strong><p><img src="images/parsing-model-overview.png" alt=""></p></strong></pre>
- </div>
+ </div>
- <div class="example">
+ <div class="example">
- <p>A graph that repeats the previous paragraph in graphical form:</p>
+ <p>A graph that repeats the previous paragraph in graphical form:</p>
- <pre><p>According to a study covering several billion pages,
+ <pre><p>According to a study covering several billion pages,
about 62% of documents on the Web in 2007 triggered the Quirks
rendering mode of Web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<strong><p><img src="rendering-mode-pie-chart.png" alt=""></p></strong></pre>
- </div>
+ </div>
- <p>In general, an image falls into this category if removing the
- image 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.</p>
+ <p>In general, an image falls into this category if removing the
+ image 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.</p>
- </dd>
- <dt>A purely decorative image that doesn't add any information but is still specific to the surrounding content</dt>
+ <h6>A purely decorative image that doesn't add any information but is still specific to the surrounding content</h6>
- <dd>
+ <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.
- <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.
+ <div class="example">
- <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>
- <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>
-
- <pre><h1>The Lady of Shalott</h1>
+ <pre><h1>The Lady of Shalott</h1>
<strong><p><img src="shalott.jpeg" alt=""></p></strong>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
@@ -13792,154 +13786,137 @@
Round an island there below,<br>
The island of Shalott.</p></pre>
- </div>
+ </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>
+ <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>
- </dd>
+ <h6>A key part of the content</h6>
- <dt>A key part of the content</dt>
+ <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>
- <dd>
+ <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
+ blog entry about that photograph, text that conveys can serve as a
+ substitute for the image must be given as the contents of the
+ <code title="attr-img-alt">alt</code> attribute.</p>
- <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>In a rare subset of these cases, there might be no alternative
+ text available. This could be the case, for instance, on a photo
+ upload site, if the site has received 8000 photos from a user
+ without the user annotating any of them. 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 "}"). The kind of image is something along the lines of
+ "photo", "diagram", "painting", "user-uploaded image", etc.</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
- blog entry about that photograph, text that conveys can serve as a
- substitute for the image must be given as the contents of the
- <code title="attr-img-alt">alt</code> attribute.</p>
+ <p>In any case, if an image is a key part of the content, the
+ <code title="attr-img-alt">alt</code> attribute must not be
+ omitted or specified with an empty value.</p>
- <p>In a rare subset of these cases, there might be no alternative
- text available. This could be the case, for instance, on a photo
- upload site, if the site has received 8000 photos from a user
- without the user annotating any of them. 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 "}"). The kind of image is something along the lines of
- "photo", "diagram", "painting", "user-uploaded image", etc.</p>
+ <div class="example">
- <p>In any case, if an image is a key part of the content, the
- <code title="attr-img-alt">alt</code> attribute must not be
- omitted or specified with an empty value.</p>
+ <p>A screenshot in a gallery of screenshots for a new OS, with
+ some alternative text:</p>
- <div class="example">
-
- <p>A screenshot in a gallery of screenshots for a new OS, with
- some alternative text:</p>
-
- <pre><figure>
- <strong><img src="KDE%20Light%20desktop.png"
- alt="The desktop is blue, with icons along the left hand side in
- two columns, reading System, Home, K-Mail, etc. A window is
- open showing that menus wrap to a second line if they
- cannot fit in the window. The window has a list of icons
- along the top, with an address bar below it, a list of
- icons for tabs along the left edge, a status bar on the
- bottom, and two panes in the middle. The desktop has a bar
- at the bottom of the screen with a few buttons, a pager, a
- list of open applications, and a clock."></strong>
- <legend>Screenshot of a KDE desktop.</legend>
+ <pre><figure>
+<strong><img src="KDE%20Light%20desktop.png"
+ alt="The desktop is blue, with icons along the left hand side in
+ two columns, reading System, Home, K-Mail, etc. A window is
+ open showing that menus wrap to a second line if they
+ cannot fit in the window. The window has a list of icons
+ along the top, with an address bar below it, a list of
+ icons for tabs along the left edge, a status bar on the
+ bottom, and two panes in the middle. The desktop has a bar
+ at the bottom of the screen with a few buttons, a pager, a
+ list of open applications, and a clock."></strong>
+<legend>Screenshot of a KDE desktop.</legend>
</figure></pre>
- </div>
+ </div>
- <div class="example">
+ <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>
+ <p>A photo on a photo-sharing site, if the site received the
+ image with no metadata other than the caption:</p>
- <pre><figure>
- <strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
- <legend>Bubbles traveled everywhere with us.</legend>
+ <pre><figure>
+<strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+<legend>Bubbles traveled everywhere with us.</legend>
</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>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>
- </div>
+ </div>
- <div class="example">
+ <div class="example">
- <p>Sometimes there simply is no text that can do justice to an
- image. For example, there is little that can be said to usefully
- describe a Rorschach inkblot test.</p>
+ <p>Sometimes there simply is no text that can do justice to an
+ image. For example, there is little that can be said to usefully
+ describe a Rorschach inkblot test.</p>
- <pre><figure>
- <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ <pre><figure>
+<strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
+<legend>A black outline of the first of the ten cards
+in the Rorschach inkblot test.</legend>
</figure></pre>
- <p>Note that the following would be a very bad use of alternative
- text:</p>
+ <p>Note that the following would be a very bad use of alternative
+ text:</p>
- <pre class="bad"><!-- This example is wrong. Do not copy it. -->
+ <pre class="bad"><!-- This example is wrong. Do not copy it. -->
<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+<img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+of the first of the ten cards in the Rorschach inkblot test.">
+<legend>A black outline of the first of the ten cards
+in the Rorschach inkblot test.</legend>
</figure></pre>
- <p>Including the caption in the alternative text like this isn't
- useful because it effectively duplicates the caption for users
- who don't have images, taunting them twice yet not helping them
- any more than if they had only read or heard the caption
- once.</p>
+ <p>Including the caption in the alternative text like this isn't
+ useful because it effectively duplicates the caption for users
+ who don't have images, taunting them twice yet not helping them
+ any more than if they had only read or heard the caption
+ once.</p>
- </div>
+ </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">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>
+ <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">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>
- </dd>
+ <h6>An image in an e-mail or document intended for a specific person who is known to be able to view images</h6>
- <dt>An image in an e-mail or document intended for a specific person who is known to be able to view images</dt>
+ <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
+ to other users whose abilities might not include easily seeing
+ images.</p>
- <dd>
- <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
- to other users whose abilities might not include easily seeing
- images.</p>
- </dd>
- </dl>
-
- <p>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>
-
-
-
<h4>The <dfn><code>iframe</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list