- From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 18 Feb 2010 15:58:32 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv22855/alt-techniques
Added Files:
Overview.html
Log Message:
new
--- NEW FILE: Overview.html ---
<!DOCTYPE HTML>
<html lang="en-US"><head><title>HTML5: Techniques for the provision of text alternatives</title><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
p.copyright { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
/*added styles*/
.example img {border: 1px}
h6 { text-transform: none; }
.element {width:400px;}
.warning1 {font-weight: bolder; font-style: italic; }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML5: Techniques for providing useful text alternatives</h1>
<h2>Editor's Draft 15th February 2010</h2>
<h3>Editor:</h3>
<p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
<hr>
<H2>Abstract</H2>
<p>This document contains best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
<H3>Status of This document</H3>
<p>This document is for review by the HTML and Protocols, Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
<h2>Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a>
<ul>
<li><a href="#text-alt">Text Alternatives</a></li>
<li><a href="#example-benefits">Examples of scenarios where users benefit from text alternatives for images</a></li>
<li><a href="#good-practices">General Text Alternative Good Practices</a></li>
</ul>
</li>
<li><a href="#Recommendations">Recommendations</a>:
<ul>
<li><a href="#button-image-only">1. A link or button containing nothing but an image</a></li>
<li><a href="#graphical-representations">2. Graphical representations: charts, diagrams, graphs, maps, illustrations</a></li>
<li><a href="#img-of-text">3. Images of text</a></li>
<li><a href="#images-include-text">4. Images that include text</a></li>
<li><a href="#decorative">5. A purely decorative image that doesn't add any information</a></li>
<li><a href="#images-enhance">6. Images that enhance the themes or subject matter of the page content</a></li>
<li><a href="#img-not-for-user">7. An image not intended for the user</a></li>
<li><a href="#icons">8. A short phrase or label with an alternative graphical representation: icons, logos</a></li>
<li><a href="#pictures">9. Images of Pictures</a></li>
<li>10</li>
<li>11</li>
<li>12</li>
<li><a href="#glossary">Glossary</a></li>
</ul>
</li>
</ul>
<h2 id="intro">Introduction</h2>
<H3 id="text-alt">Text Alternatives</H3>
<p><A href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</A> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
<p>To determine appropriate <A href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</A> it is important to think about why an image is being included in a document. What is its purpose? Thinking like this will help you to understand what is important about the image for the page's intended audience. Every image has a reason for being on a page because it either provides useful information, performs a function, or enhances aesthetics. Therefore, knowing what the image is for, makes writing appropriate <A href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</A> easier.</p>
<h3 id="example-benefits">Examples of scenarios where users benefit from text alternatives for images</h3>
<ul>
<li>They have a very slow connection. </li>
<li>They have a vision impairment and use text to speech software. </li>
<li>They have a cognitive impairment and use text to speech software. </li>
<li>They
are using a text-only browser. </li>
<li> They are listening to
the page being read out by a voice Web
browser.</li>
</ul>
<H3 id="good-practices">General Text Alternative Good Practices</H3>
<UL>
<LI>Provide the same informational <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> as the image.
<LI>Where an image performs a specific function, such as a graphical link, provide information about its <A href="http://www.w3.org/TR/WCAG20/#functiondef">functionality</A>.
<LI>Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice.
<LI>Write suitable alt text according to context. The same image in a different situation may need very different alt text.
<LI>Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary. </LI>
</UL>
<h2 id="recommendations">Recommendations:</h2>
<p>The recommendations for the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as
described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.</p>
<h3 id="button-image-only"><span class="secno">1. </span>A link or button containing nothing but an image</h3>
<p>When an <a href="#the-a-element">a</a> element that is a <a href="history.html#hyperlink">hyperlink</a>,
or a <code><a href="forms.html#the-button-element">button</a></code> element, has no text content but
contains one or more images, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attributes must contain text that
together convey the purpose of the link or button.</p>
<h4>Example 1.1</h4>
<div class="example">
<p>In this example, a user is asked to pick her preferred color
from a list of three. Each color is given by an image, but for
users who cannot view the images,
the color names are included within the alt attributes of the images:</p>
<p><strong>Example Rendering:</strong></p>
<p><img src="images/buttons.gif" width="274" height="45" alt="The example HTML code as displayed in a browser. 3 links each containing a rectangular image: 1 is blue with the text 'blue', 2 red with the text 'red' and 3 is green with the text 'green'."></p>
<p><strong>Example code:</strong></p>
<pre>
<ul>
<li><a href="red.html"><img src="red.jpeg" <strong>alt="Red"</strong>></a></li>
<li><a href="green.html"><img src="green.jpeg" <strong>alt="Green"</strong>></a></li>
<li><a href="blue.html"><img src="blue.jpeg" <strong>alt="Blue"</strong>></a></li></ul></pre>
</div>
<h4>Example 1.2</h4>
<div class="example">
<p>In this example, a button has a set of images to indicate the
kind of color output desired by the user. The first image is used to give the text alternative.</p>
<p><strong>Example Rendering:</strong></p>
<p><img src="images/rgbbutton1.gif" width="88" height="49" alt="A button with the letters R G B."></p>
<p><strong>Example code:</strong></p>
<pre><abbr title="red, green and blue."><button name="rgb">
<img src="red.jpg" <strong>alt="RGB"</strong>><img src="green.jpg" <strong>alt=""</strong>><img src="blue.jpg" <strong>alt=""</strong>></button>
</abbr></pre>
<p>Since each image represents one part of the text, it could also
be written like this:</p>
<pre><abbr title="red, green and blue.">
<button name="rgb"><img src="red.jpg" <strong>alt="R"</strong>><img src="green.jpg" <strong>alt="G"</strong>>
<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
</pre>
<p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G196">Using a text alternative on one item within a group of images that describes all items in the group</a> (WCAG technique)</li>
<li><a href="http://universalusability.com/access_by_design/links/alt-text.html">Use alt-text for image links</a></li>
<li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links want to be Links</a></li>
</ul>
<h3 id="graphical-representations"><span class="secno">2. </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
<p>The full text alternative may be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute, or a shorter text alternative may be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
<p>It is important to understand that a text alternative provided in the alt attribute is a <em>replacement</em> for the image, while a short text alternative in the alt attribute, accompanied by a programmatically associated longer text alternative, can be a description of the
image or a link target if the image is the sole content of a link.</p>
<p>While all the examples below can be considered for use, each method has advantages and disadvantages.</p>
<h4>Example 2.1</h4>
<div class="example">
<p>In the following example we have an image of a <a href="#flowchart">flowchart</a> , with text in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute describes the process shown in the flowchart:</p>
<p><strong>Example Image:</strong></p>
<img src="images/flowchart.gif" width="221" height="299" alt="flowchart" id="flowchart">
<p>
<strong>Example Code:</strong><br>
</p>
<pre>
<p>A flowchart representing a process for dealing with a non-functioning lamp:</p>
<p><img src="flowchart.gif" <strong>alt="If the lamp doesn't work; check if it's plugged in.
If not, plug it in. If it's plugged in and still doesn't work; check if the bulb is burned out.
If it is, replace the bulb. If it still does not work; buy a new lamp."</strong>></p></pre>
<h5>Advantages:</h5>
<ul>
<li>Robust support in most user agents and assistive technologies.</li>
<li>Text alternative is explicitly associated with the image.</li>
</ul>
<h5>Disadvantages:</h5>
<ul>
<li>Content of the alt attribute is not available to some users who may find it useful.</li>
<li>The length of the alt attribute content may cause display issues in some browsers.</li>
</ul>
<p> </p>
</div>
<h4>Example 2.2</h4>
<div class="example">
<p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
<p><strong>Example Code:</strong><br>
</p>
<pre>
<p><strong><a href="#d1" title="Flowchart description."></strong><img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>><strong></a></strong></p>
...
<div <strong>id="d1"</strong>>
<h2>Broken lamp flowchart description</h2>
<p>If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
</div>
</pre>
<h5>Advantages:</h5>
<ul>
<li>Robust support in most user agents and assistive technologies.</li>
<li>Text alternative is explicitly associated with the image.</li>
<li>Text alternative is available to all users.</li>
</ul>
<h5>Disadvantages:</h5>
<ul>
<li>Text alternative takes up visual display space.</li>
<li>The target of the link is not apparent to users who can view the image unless they can use a mouse and view the title attribute content.</li>
</ul>
</div>
<h4>Example 2.3</h4>
<div class="example">
<p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example Code:</strong><br>
</p>
<pre>
<p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong>
<strong>aria-describedby="d1"</strong>></p>
<p <strong>id="d1"</strong>>If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
</pre>
<h5>Advantages:</h5>
<ul>
<li>Short and long text alternatives are explicitly associated with the image.</li>
<li>Long text alternative is available to all users.</li>
</ul>
<h5>Disadvantages:</h5>
<ul>
<li>Long text alternative takes up visual display space.</li>
<li>The explicit association using aria-describedby is not supported by some user agents and assistive technology.</li>
<li>Users of assistive technology that support aria-describedby may have the long text alternative announced more than once.</li>
</ul>
</div>
<!-- <h4>Example 2.4</h4>
<div class="example">
<p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included as a programmatically associated label, using the <a href="http://www.w3.org/TR/wai-aria/#aria-labelledby">aria-labelledby</a> attribute, in text below the image and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example Code:</strong><br>
</p>
<pre>
<p><img src="flowchart.gif"<strong></strong> <strong>aria-describedby="d1"</strong> <strong>aria-labelledby="l1"</strong>></p>
<p <strong>id="l1"</strong>>A flowchart representing a process for dealing with a non-functioning lamp.</p>
...
<p <strong>id="d1"</strong>>If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p></pre>
</div> -->
<h4>Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/WCAG-TECHS/G92.html">Providing long description for non-text content that serves the same purpose and presents the same information</a> (WCAG 2.0 Technique)</li>
<li><a href="http://www.w3.org/TR/WCAG-TECHS/G94.html">Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content </a>(WCAG 2.0 Technique)</li>
<li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
</ul>
<h3 id="img-of-text"><span class="secno">3. </span>Images of text</h3>
<p>Sometimes, an image only contains text, and the purpose of the
image is to display text using visual effects and /or fonts. While it is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute should consist of the same text as
written in the image itself. </p>
<h4>Example 3.1</h4>
<div class="example">
<!-- <p>Consider this <a href="images/text.gif">image</a> containing the text "Get Happy!" it uses a non standard font and uses multiple colors. The text is
merely being used as a heading, to spice up the page for graphical
users, then the correct alternative text is just the same text
"Get Happy!", and no mention need be made of the text style:
</p>-->
<p>This example shows an image of the text "Get Happy!"
written in a fancy multi colored freehand style.
The image makes up the content of a heading. In this case the text alternative for the image should be "Get Happy!".</p>
<p><strong>Example Image:</strong></p>
<p> <img src="images/text.gif" alt="Get Happy!" width="275" height="77"> </p>
<p><strong>Example code:</strong></p>
<pre><h1><img src="gethappy.gif" <strong>alt="Get Happy!"</strong>></h1>
</pre></div>
<h4>Example 3.2</h4>
<div class="example">
<!-- <p>Consider this <a href="images/text.gif">image</a> containing the text "Get Happy!" it uses a non standard font and uses multiple colors. The text is
merely being used as a heading, to spice up the page for graphical
users, then the correct alternative text is just the same text
"Get Happy!", and no mention need be made of the text style:
-->
<p>In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends friday" In this case it is recommended that the image's text alternative only include the text "The BIG sale" once as the repeptition is for visual effect and the repetition of the text for users who cannot view the image is unecessary and may be confusing.</p>
<p><strong>Example Image:</strong></p>
<p><img src="images/sale.gif" alt="The big sale ends Friday." width="400" height="190"></p>
<p><strong>Example code:</strong></p>
<pre><p><img src="sale.gif" <strong>alt="The BIG sale ...ends friday."</strong>></p></pre>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html">Images of text</a> explanation from WCAG 2.0 of why it is better to use text rather than images of text</li>
</ul>
<h3 id="images-include-text">4. Images that include text</h3>
<p>Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in text alternative. </p>
<h4>Example 4.1</h4>
<div class="example">
<p>Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative.</p>
<p><strong>Example Image:</strong></p>
<p><img src="images/figure1.gif" width="500" height="300" alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%."></p>
<p><strong>Example code:</strong></p>
<pre><p><img src="figure1.gif" <strong>alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%."</strong>></p></pre>
<h5>Advantages:</h5>
<ul>
<li>Robust support in most user agents and assistive technologies.</li>
<li>Text alternative is explicitly associated with the image.</li>
</ul>
<h5>Disadvantages:</h5>
<ul>
<li>?</li>
</ul>
</div>
<h4>Example 4.2</h4>
<div class="example">
<p>Here's another example of the same <a href="#piechart">pie chart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example code:</strong></p>
<pre><p><img src="figure1.gif" <strong>alt="Figure 1"</strong> <strong>aria-describedby="d2"</strong>></p>
<p <strong>id="d2"</strong>>Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p></pre>
</div>
<h4>Related techniques and resources</h4>
<p><span class="note">to do</span></p>
<h3 id="decorative"><span class="secno">5. </span>A purely decorative image that doesn't add any information</h3>
<p><A href="http://www.w3.org/TR/WCAG20/#puredecdef">Purely decorative</A> images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They have no meaning in themselves and do not provide page <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A>.</p>
<p>Mark up purely decorative images so they can be ignored by <A href="http://www.w3.org/TR/WCAG20/#atdef">assistive technology</A> with a null alt attribute (alt="") or preferably use CSS techniques. If the image isn't providing the user any informative <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> or enhancing greater understanding of the <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A>, then it is appropriate for the alt text to be empty.</p>
<h4>Example 5.1</h4>
<div class="example">
<p>Here's an example of an image being used as a decorative banner for a persons blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative, to include the image using CSS.</p>
<p><strong>Example image in context:</strong></p>
<div class="element">
<p><img src="images/border.gif" alt="" width="400" height="30"></p>
<p><strong>Clara's Blog</strong></p>
<p>Welcome to my blog...</p></div>
<p> </p>
<p><strong>Example code:</strong></p>
<pre><p><img src="border.gif" <strong>alt=""</strong> width="400" height="30"></p>
<h1<strong></strong>>Clara's Blog</h1>
<p>Welcome to my blog...</p></pre>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><A href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null alt text and no title attribute on img elements for images that AT should ignore (HTML)</A> (WCAG technique)</li>
<li><A href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using CSS to include decorative images (CSS)</A> (WCAG technique)</li>
<LI><A href="F38.html">Omitting the alt-attribute for non-text content used for decorative purposes only in HTML</A> (WCAG failure example).</LI>
<LI><A href="F39.html">Providing a text alternative that is not null. (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</A> (WCAG failure example).</LI>
</ul>
<h3 id="images-enhance">6. Images that enhance the themes or subject matter of the page content</h3>
<p>An image that isn't discussed directly by the
surrounding text but still has some relevance can be included in a page
using the <code><a href="#the-img-element">img</a></code> element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so
still form part of the content. In these cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute must be present but its
value may be null. In cases where the image is closely related to the subject matter of the page content, the text alternative must include a description of the content of the image or a description of the target of a linked page, if it is the content of a link. </p>
<h4>Example 6.1</h4>
<div class="example">
<p>Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An
image of a painting inspired by a poem, on a page reciting that
poem. The following snippet shows an example (only the first verse is included in this snippet). The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. The description of the content of the image would be redundant for users who can view the image, so the appropriate place to put it is in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute.</p>
<p><strong>Example Image </strong></p>
<p><img src="images/shalott.jpg" width="400" height="305" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott"> </p>
<p><strong>Example code: </strong></p>
<pre>
<h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2>
<p><img src="shalott.jpeg" <strong>alt="A painting of a young women with long hair sitting in a wooden boat,
she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix
lying in front of her. Beside it are three candles. Two have blown out."</strong>></p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
<h4>Example 6.2</h4>
<div class="example">
<p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
<p>In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
<p><strong>Example code: </strong></p>
<pre><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2>
<p><a href="http://bit.ly/5HJvVZ" title="A painting inspired by the poem">
<img src="shalott.jpeg" <strong>alt="A painting inspired by the poem."</strong>><a/></p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
<!-- <h4>Example 6.3</h4>
<div class="example">
<p>In this example of the same image a visible text caption is provided using the <figure> and <figcaption> elements.</p>
<p>In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
<p><strong>Example code: </strong></p>
<pre>
<h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2>
<figure>
<img src="shalott.jpeg" <strong>alt="A painting of a young women with long hair sitting in a wooden boat,
she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix
lying in front of her. Beside it are three candles. Two have blown out."</strong>>
<figcaption>Painting by John William Waterhouse</figcaption>
</figure>
</pre>
</div> -->
<h4>Example 6.3</h4>
<div class="example">
<p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image. So both options are considered to be conforming HTML5.</p>
<p><strong>Example Image in context: </strong></p>
<div class="element"><p><b>Medieval Nights</b></p>
<p><img src="images/shalott.jpg" width="188" height="129" alt=""></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p></div>
<p><strong>Example code 1: </strong></p>
<pre>
<h1>Medieval Nights</h1>
<p><img src="shalott.jpeg" <strong>alt=""</strong>></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
</pre>
<p><strong>Example code 2: </strong></p>
<pre>
<h1>Medieval Nights</h1>
<p><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p</pre>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
<li><a href="http://www.rnib.org.uk/LIVINGWITHSIGHTLOSS/LEISURECULTURE/ARTSCRAFTS/PAINTING/Pages/audio_description_painting.aspx">Try audio describing a painting</a></li>
<li><a href="http://www.vsarts.org/x6020.xml">Blind Imagination: Pictures into Word</a></li>
<li><A href="H30.html">Providing link text that describes the purpose of a link for anchor elements</A> (WCAG technique)</li>
<li><A href="G82.html">Providing a text alternative that identifies the purpose of the non-text content</A> (WCAG technique)</li>
</ul>
<h3 id="img-not-for-user"><span class="secno">7. </span>An image not intended for the user</h3>
<p>Generally authors should avoid using <code>img</code> elements
for purposes other than showing images.</p>
<p>If an <code>img</code> element is being used for purposes other
than showing an image, e.g. as part of a service to count page
views, then include an empty <code title="attr-img-alt">alt</code> attribute. This will </p>
<p>In such cases, the <code title="attr-dim-width">width</code> and <code title="attr-dim-height">height</code> attributes should both
be set to zero.</p>
<h4>Example 7.1</h4>
<div class="example">
<p>An example of an img element used to collect web page statistics. The alt attribute is empty.</p>
<p><strong>Example code:</strong></p>
<pre><p><img src="http://server3.web-stat.com/count.pl?octafish.com"
width="0" height="0" <strong>alt=""</strong>></p>
</pre>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><A href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null alt text and no title attribute on img elements for images that AT should ignore (HTML)</A> (WCAG technique).</li>
</ul>
<h3 id="icons"><span class="secno"> </span>8. A short phrase or label with an alternative graphical representation: icons, logos</h3>
<p>An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.</p>
<p>In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, provide an empty <A href="#attr-img-alt">alt</A> attribute. </p>
<h4>Example 8.1</h4>
<div class="example">
<p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
<p><strong>Example Image in context: </strong></p>
<p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
<p> </p>
<p><strong>Example code 1 - inline image:</strong></p>
<pre><a href="home.html">
<img src="icon.gif" width="15" height="15" <strong>alt=""</strong>>Home</a>
</pre>
<p><strong>Example code 2 - CSS image:</strong></p>
<pre>
#home:before
{
content: url(home.png);
}
<a href="home.html" id="home">Home</a></pre>
</div>
<h4>Related techniques and resources</h4>
<p><span class="note">to do</span></p>
<h3 id="pictures">9. Images of Pictures</h3>
<p>Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a> can convey a significant amount of information visually or provide a <a href="http://www.w3.org/TR/WCAG20/#sensoryexpdef">specific sensory experience</a> to a sighted person. Examples include photographs, paintings, drawings and artwork.</p>
<p>An appropriate text alternative for a picture is a brief description, or <a href="http://www.w3.org/TR/WCAG20/#namedef">name</a>. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The alt text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In addition to providing a short <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternative</a> that gives a brief description of the <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, also providing <a href="http://www.w3.org/TR/WCAG20/#suppcontentdef">supplemental content</a> through another means when appropriate may be useful.</p>
<h4>Example 9.1</h4>
<p>Context: One of a mixed set of photographs uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath.</p>
<div class="example">
<p><strong>Example image in context:</strong></p>
<div class="element">
<p><img src="images/lola.jpg" alt="Lola the cat sitting under an umbrella in the bath tub." width="300" height="242"></p>
<p>Lola prefers a bath to a shower.</p>
</div>
<p><strong>Example code:</strong></p>
<pre>
<figure>
<img src="1100670787_6a7c664aef.jpg" <strong>alt="Lola the cat sitting under an umbrella in the bath tub."</strong>>
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure> </pre>
</div>
<h4>Example 9.2</h4>
<p>Context: An image on a page explaining in general terms Rorschach inkblot personality tests. The image is an abstract freeform which is subjective to individual interpretation.</p>
<div class="example">
<p><strong>Image example in context:</strong></p>
<div class="element">
<blockquote cite="http://en.wikipedia.org/wiki/Rorschach_test#History">Using interpretation of "ambiguous designs" to assess an individual's personality is an idea that goes back to Leonardo da Vinci and Botticelli. Interpretation of inkblots was central to a game from the late 19th century. Rorschach's, however, was the first systematic approach of this kind.</blockquote>
<p><img src="images/inkblot1.jpg" alt="An abstract, freeform inkblot." width="300" height="197"></p>
<p>The first of the ten cards in the Rorschach test.</p>
</div>
<p><strong>Code Example:</strong></p>
<pre><figure>
<img src="Rorschach1.jpg" <strong>alt="An abstract, freeform inkblot."</strong>>
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> </pre>
</div>
<h4>Related techniques and resources</h4>
<ul>
<li><a href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 <code>figure</code> element</a></li>
<li><a href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 <code>figcaption</code> element</a></li>
</ul>
<p> </p>
<h3>10. A graphical representation of some of the surrounding text</h3>
<p><span class="note">to do</span></p>
<h3>11. A group of images that form a single larger picture with no links</h3>
<p><span class="note">to do</span></p>
<p> </p>
<h3>12. Images that are a key part of the content</h3>
<p><span class="note">to do</span></p>
<hr>
<h2 id="glossary">Glossary</h2>
<h3>alt text </h3>
<p>Colloquial term for a text alternative provided using the <code>alt</code> attribute of an <code>img</code> element.</p>
<h3>Empty alt attribute or null alt attribute.</h3>
<p>An alt attribute with no content:</p>
<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
<h3>Text alternative</h3>
<p>A programmatically determined <A title="definition: text" href="appendixA.html#textdef">text</A> that is used in place of <A title="definition: non-text content" href="appendixA.html#non-text-contentdef">non-text content</A>, or text that is used in addition to non-text content and referred to from the <A title="definition: programmatically determined" href="appendixA.html#programmaticallydetermineddef">programmatically determined</A> text</p>
<h3> </h3>
Received on Thursday, 18 February 2010 15:58:36 UTC