--- a/longdesc1/longdesc.html Mon Nov 19 11:23:31 2012 +0100
+++ b/longdesc1/longdesc.html Mon Nov 19 11:40:00 2012 +0100
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<meta charset="UTF-8">
<title>HTML Image Description Extension</title>
<style>
.example, .example code {color: #404; background-color:#eee}
.example::before {float:left;
margin-top: -.2em;
background-color: white;
display: block;
border: 1px solid black;
color: #404;
padding: 2px;
content: "Example: (non-normative)"}
.example:first-child {padding-top:1em}
/* Make these stand-out more... */
.externalDFN {
font-style: italic;
background-color: #fff9d6;
}
/* Switch statement */
dl.switch dt::before {
content: "↪ ";
margin-left: 1em;
}
/* Better spacing around various lists (implied paragraph children) */
ol > li, section:not(#toc) ul > li, section dl > dt {
margin: 1em 0;
}
/* domintro styling */
dl.domintro {
background-color: rgb(221, 255, 221);
padding: 1em 0.5em 1em 2em;
clear: both;
}
dl.domintro dt {
color: black;
}
dl.domintro > dd {
color: green;
}
dl.domintro::before {
float: right;
background-color: white;
display: block;
border: 2px solid black;
color: green;
margin-top: -20px;
padding: 2px;
content: "This box is non-normative. Implementation requirements are given below this box.";
}
/* Fancy table stuff */
table {
border-collapse: collapse;
}
thead tr {
border-bottom: 2px solid black;
}
tbody tr:not(:last-child) {
border-bottom: 1px solid black;
}
td {
border-left: 1px solid black;
padding: 4px;
}
/*****************************************************************
* ReSpec 3 CSS
* Robin Berjon - http://berjon.com/
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
cite .bibref {
font-style: normal;
}
code {
color: #ff4500;
}
/* --- TOC --- */
.toc a, .tof a {
text-decoration: none;
}
a .secno, a .figno {
color: #000;
}
ul.tof, ol.tof {
list-style: none outside none;
}
.caption {
margin-top: 0.5em;
font-style: italic;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
/* --- ISSUES/NOTES --- */
div.note-title {
padding-right: 1em;
min-width: 7.5em;
color: #b9ab2d;
}
div.note-title { color: #52e052; }
div.note-title span {
text-transform: uppercase;
}
div.note {
margin-top: 1em;
margin-bottom: 1em;
}
.note > p:first-child { margin-top: 0 }
.note {
padding: .5em;
border-left-width: .5em;
border-left-style: solid;
}
div.note {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
span.note { padding: .1em .5em .15em; }
.note {
border-color: #52e052;
background: #e9fbe9;
}
pre.idl {
border-top: 1px solid #90b8de;
border-bottom: 1px solid #90b8de;
padding: 1em;
line-height: 120%;
}
pre.idl::before {
content: "WebIDL";
display: block;
width: 6ex;
background: #90b8de;
color: #fff;
font-family: initial;
padding: 3px;
font-weight: bold;
margin: -1em 0 1em -1em;
}
.idlType {
color: #ff4500;
font-weight: bold;
text-decoration: none;
}
/*.idlInterface*/
.idlInterfaceID, .idlDictionaryID, .idlCallbackID, .idlEnumID {
font-weight: bold;
color: #005a9c;
}
.idlSuperclass {
font-style: italic;
color: #005a9c;
}
/*.idlAttribute*/
.idlAttrType, .idlFieldType, .idlMemberType {
color: #005a9c;
}
.idlAttrName, .idlFieldName, .idlMemberName {
color: #ff4500;
}
.idlAttrName a, .idlFieldName a, .idlMemberName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
.extAttr {
color: #666;
}
/*.idlConst*/
.idlConstType {
color: #005a9c;
}
.idlConstName {
color: #ff4500;
}
.idlConstName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
.idlImplements a {
font-weight: bold;
}
dl.attributes, dl.methods, dl.constants, dl.fields, dl.dictionary-members {
margin-left: 2em;
}
.attributes dt, .methods dt, .constants dt, .fields dt, .dictionary-members dt {
font-weight: normal;
}
.attributes dt code, .methods dt code, .constants dt code, .fields dt code, .dictionary-members dt code {
font-weight: bold;
color: #000;
font-family: monospace;
}
.attributes dt code, .fields dt code, .dictionary-members dt code {
background: #ffffd2;
}
.attributes dt .idlAttrType code, .fields dt .idlFieldType code, .dictionary-members dt .idlMemberType code {
color: #005a9c;
background: transparent;
font-family: inherit;
font-weight: normal;
font-style: italic;
}
.attributes dd, .methods dd, .constants dd, .fields dd, .dictionary-members dd {
margin-bottom: 1em;
}
</style> <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
<!--[if lt IE 9]><script src='undefined://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]-->
</head>
<body>
<div class="head">
<p> <a href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"
height="48"
width="72"></a>
</p>
<h1 class="title" id="title">HTML5 Image Description Extension </h1>
<h2 id="w3c-working-draft-20-september-2012"><abbr title="World Wide Web Consortium">W3C</abbr>
Editors' Draft 19 November 2012</h2>
<dl>
<dt>This version:</dt>
<dd><a title="This version" href="http://dvcs.w3.org/hg/html-proposals/raw-file/bc0558bb2d98/longdesc1/longdesc.html">http://dvcs.w3.org/hg/html-proposals/raw-file/bc0558bb2d98/longdesc1/longdesc.html</a><br>
</dd>
<dt>Latest published version:</dt>
<dd>@@</dd>
<dt>Latest editor's draft:</dt>
<dd>
<meta charset="utf-8">
<a href="http://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html">http://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html</a></dd>
<dt>Editors:</dt>
<dd><a href="mailto:chaals@yandex-team.ru">Charles McCathie Nevile</a>,
<a href="http://www.yandex.com">Яндекс.</a></dd>
</dl>
<p class="copyright"> <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
© 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
(<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
<a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. <abbr
title="World Wide Web Consortium">W3C</abbr>
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
+<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<meta charset="UTF-8">
<title>HTML Image Description Extension</title>
<style>
.example, .example code {color: #404; background-color:#eee}
.example::before {float:left;
margin-top: -.2em;
background-color: white;
display: block;
border: 1px solid black;
color: #404;
padding: 2px;
content: "Example: (non-normative)"}
.example:first-child {padding-top:1em}
/* Make these stand-out more... */
.externalDFN {
font-style: italic;
background-color: #fff9d6;
}
/* Switch statement */
dl.switch dt::before {
content: "↪ ";
margin-left: 1em;
}
/* Better spacing around various lists (implied paragraph children) */
ol > li, section:not(#toc) ul > li, section dl > dt {
margin: 1em 0;
}
/* domintro styling */
dl.domintro {
background-color: rgb(221, 255, 221);
padding: 1em 0.5em 1em 2em;
clear: both;
}
dl.domintro dt {
color: black;
}
dl.domintro > dd {
color: green;
}
dl.domintro::before {
float: right;
background-color: white;
display: block;
border: 2px solid black;
color: green;
margin-top: -20px;
padding: 2px;
content: "This box is non-normative. Implementation requirements are given below this box.";
}
/* Fancy table stuff */
table {
border-collapse: collapse;
}
thead tr {
border-bottom: 2px solid black;
}
tbody tr:not(:last-child) {
border-bottom: 1px solid black;
}
td {
border-left: 1px solid black;
padding: 4px;
}
/*****************************************************************
* ReSpec 3 CSS
* Robin Berjon - http://berjon.com/
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
cite .bibref {
font-style: normal;
}
code {
color: #ff4500;
}
/* --- TOC --- */
.toc a, .tof a {
text-decoration: none;
}
a .secno, a .figno {
color: #000;
}
ul.tof, ol.tof {
list-style: none outside none;
}
.caption {
margin-top: 0.5em;
font-style: italic;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
/* --- ISSUES/NOTES --- */
div.note-title {
padding-right: 1em;
min-width: 7.5em;
color: #b9ab2d;
}
div.note-title { color: #52e052; }
div.note-title span {
text-transform: uppercase;
}
div.note {
margin-top: 1em;
margin-bottom: 1em;
}
.note > p:first-child { margin-top: 0 }
.note {
padding: .5em;
border-left-width: .5em;
border-left-style: solid;
}
div.note {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
span.note { padding: .1em .5em .15em; }
.note {
border-color: #52e052;
background: #e9fbe9;
}
pre.idl {
border-top: 1px solid #90b8de;
border-bottom: 1px solid #90b8de;
padding: 1em;
line-height: 120%;
}
pre.idl::before {
content: "WebIDL";
display: block;
width: 6ex;
background: #90b8de;
color: #fff;
font-family: initial;
padding: 3px;
font-weight: bold;
margin: -1em 0 1em -1em;
}
.idlType {
color: #ff4500;
font-weight: bold;
text-decoration: none;
}
/*.idlInterface*/
.idlInterfaceID, .idlDictionaryID, .idlCallbackID, .idlEnumID {
font-weight: bold;
color: #005a9c;
}
.idlSuperclass {
font-style: italic;
color: #005a9c;
}
/*.idlAttribute*/
.idlAttrType, .idlFieldType, .idlMemberType {
color: #005a9c;
}
.idlAttrName, .idlFieldName, .idlMemberName {
color: #ff4500;
}
.idlAttrName a, .idlFieldName a, .idlMemberName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
.extAttr {
color: #666;
}
/*.idlConst*/
.idlConstType {
color: #005a9c;
}
.idlConstName {
color: #ff4500;
}
.idlConstName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
.idlImplements a {
font-weight: bold;
}
dl.attributes, dl.methods, dl.constants, dl.fields, dl.dictionary-members {
margin-left: 2em;
}
.attributes dt, .methods dt, .constants dt, .fields dt, .dictionary-members dt {
font-weight: normal;
}
.attributes dt code, .methods dt code, .constants dt code, .fields dt code, .dictionary-members dt code {
font-weight: bold;
color: #000;
font-family: monospace;
}
.attributes dt code, .fields dt code, .dictionary-members dt code {
background: #ffffd2;
}
.attributes dt .idlAttrType code, .fields dt .idlFieldType code, .dictionary-members dt .idlMemberType code {
color: #005a9c;
background: transparent;
font-family: inherit;
font-weight: normal;
font-style: italic;
}
.attributes dd, .methods dd, .constants dd, .fields dd, .dictionary-members dd {
margin-bottom: 1em;
}
</style> <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
<!--[if lt IE 9]><script src='undefined://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]-->
</head>
<body>
<div class="head">
<p> <a href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"
height="48"
width="72"></a>
</p>
<h1 class="title" id="title">HTML5 Image Description Extension </h1>
<h2 id="w3c-working-draft-20-september-2012"><abbr title="World Wide Web Consortium">W3C</abbr>
Editors' Draft 19 November 2012</h2>
<dl>
<dt>This version:</dt>
<dd><a title="This version" href="http://dvcs.w3.org/hg/html-proposals/raw-file/792498c55bf0/longdesc1/longdesc.html">http://dvcs.w3.org/hg/html-proposals/raw-file/792498c55bf0/longdesc1/longdesc.html</a><br>
</dd>
<dt>Latest published version:</dt>
<dd>@@</dd>
<dt>Latest editor's draft:</dt>
<dd>
<meta charset="utf-8">
<a href="http://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html">http://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html</a></dd>
<dt>Editors:</dt>
<dd><a href="mailto:chaals@yandex-team.ru">Charles McCathie Nevile</a>,
<a href="http://www.yandex.com">Яндекс.</a></dd>
</dl>
<p class="copyright"> <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
© 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
(<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
<a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. <abbr
title="World Wide Web Consortium">W3C</abbr>
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply. </p>
<hr> </div>
<section class="introductory" id="abstract">
<h2>Abstract</h2>
<p>This specification defines a longdesc attribute to link extended
descriptions with images in HTML5-based content. </p>
</section>
<section class="introductory" id="sotd">
<h2>Status of This Document</h2>
<p> <em>This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list
of current <abbr title="World Wide Web Consortium">W3C</abbr>
publications and the latest revision of this technical report can be
found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr>
technical reports index</a> at http://www.w3.org/TR/.</em> </p>
<p> This document is an editors' draft proposed to the HTML Working Group
Accessibility Task Force for a First Public Working Draft of an HTML
extension Proposal. This document is intended to become a <abbr title="World Wide Web Consortium">W3C</abbr>
Recommendation, either on its own or merged into an HTML Recommendation.
If you wish to make comments regarding this document, please send them
to <a href="mailto:public-html-a11y@w3.org">public-html-a11y@w3.org</a>
(<a href="mailto:public-html-a11y-request@w3.org?subject=subscribe">subscribe</a>,
<a href="http://lists.w3.org/Archives/Public/public-html-a11y/">archives</a>).
All feedback is welcome. Bugs can also be filed directly into the <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=HTML%20WG&amp;component=HTML%20Image%20Description%20Extension">W3C
Bug tracker for this specification</a> <br>
</p>
<p> Publication as a Working Draft does not imply endorsement by the <abbr
title="World Wide Web Consortium">W3C</abbr>
Membership. This is a draft document and may be updated, replaced or
obsoleted by other documents at any time. It is inappropriate to cite
this document as other than work in progress. </p>
<p> This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
February 2004 <abbr title="World Wide Web Consortium">W3C</abbr>
Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr>
maintains a <a href="http://www.w3.org/2004/01/pp-impl/42538/status" rel="disclosure">public
@@ -16,7 +16,7 @@
</span>Normative references</a></li>
<li class="tocline"><a class="tocxref" href="#informative-references"><span
class="secno">B.2
</span>Informative references</a></li>
</ul>
</li>
</ul>
</section>
<section id="intro" class="introductory">
<h1>Introduction</h1>
<p>HTML 4 provided a <code>longdesc</code> attribute for the <code>img</code>
element. This enabled a machine-discoverable description of an image to
be linked to the image. This extension specification defines the same
functionality for HTML5-based content.</p>
<pre class="example"><code><br><br><!-- The description is somewhere on the same page as the image --><br><img src="http://example.com/graph1" alt="(The trend is for drinks to get sweeter)" title="Figure One" <strong>longdesc="#graph1"</strong>></code><code><br><br><!-- The description is a page on its own --><br><img src="figure1" alt="figure 1" <strong>longdesc="http://example.com/desc1"</strong>></code><br><code><br><!-- The description is one of several within an external page --><br><img src="DecorativeImage" alt="" title="decorative image" <strong>longdesc="http://example.com/descs#item3"</strong>></code></pre>
</section>
<section id="conformance">
<h2><span class="secno">1. </span>Conformance</h2>
<p> As well as sections marked as non-normative, all authoring guidelines,
diagrams, examples, and notes in this specification are non-normative.
Everything else in this specification is normative. </p>
<p> The key words <em title="must" class="rfc2119">must</em>, <em title="should"
class="rfc2119">should</em>,
<em title="should not" class="rfc2119"></em><em title="recommended" class="rfc2119"></em>and
<em title="may" class="rfc2119">may</em><em title="optional" class="rfc2119"></em>
in this specification are to be interpreted as described in [<cite><a class="bibref"
href="#bib-RFC2119">RFC2119</a></cite>].</p>
<section id="dependencies">
<h3><span class="secno">1.1 </span>Dependencies</h3>
<p>The IDL fragments in this specification must be interpreted as
required for conforming IDL fragments, as described in the Web IDL
specification. [<cite><a class="bibref" href="#bib-WEBIDL">WEBIDL</a></cite>]</p>
<p>Some of the terms used in this specification are defined in [<cite><a
class="bibref"
href="#bib-DOM4">DOM4</a></cite>],
- [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>]<cite><a class="bibref"
href="#bib-XML10"></a></cite>.
</p>
</section>
</section>
<section id="UCnR">
<h2><span class="secno">2. </span>Use Cases and Requirements</h2>
<p>There are many ways users can successfully interact with content even
if they cannot see, or see well, images included in that content. The <code>alt</code>
attribute is designed to ensure that for everyday work, a user has
enough information to replace an image, and often this is more helpful
than a detailed description of every image. The <code>longdesc</code>
attribute is designed to complement this, to meet the following use
cases<br>
</p>
<h3>Use Cases</h3>
<dl>
<dt>Describing a well-known image</dt>
</dl>
<dl>
<dd>There are many well-known images which are widely reproduced - Mona
Lisa, Washington crossing some river, the Da Vinci picture of the guy
in a square and a circle, Gerníka, Cubbin's "Lost", Leunig's "ramming
the shears". While different people know the images by different
titles, and some images have no widely known titles, visually
recognising the image is often an important part of framing a
discussion. Where the image itself cannot be seen, a description can
often be used to offer the same recognition.</dd>
<dd>Requires: Discoverability</dd>
<dd>Helped by: Inline, Reuse</dd>
<dt>Describing a complex diagram</dt>
<dd>In many environments diagrams are used to explain a concept or
transmit information efficiently. Where a user has a reduced ability
to see the image (poor contrast vision and other conditions are as
relevant here as a complete lack of vision), a description can enable
that user to understand the information being presented</dd>
<dd>Requires: Structured Markup, Inline, Reuse, Simple Return</dd>
<dt>Teaching Accessible Development</dt>
<dd>In many environments producing content that is accessible to users
regardless of disability is a legal and/or market requirement. </dd>
<dd>Requires: Maintenance, Backwards compatibility</dd>
<dt>A self-describing artistic work</dt>
<dd>For many pages the visual design of the page is an important part of
the message it conveys to a fully-sighted user, but the author would
like to convey as much of that design as possible to a user with low
or no vision available. </dd>
<dd>Requires: No visual encumbrance, Structured Markup</dd>
<dd>Helped by: Reuse, Simple Return</dd>
<dt>Referring to an existing description</dt>
<dd>Many well-known images are already described by other sources. The
copyright on those sources may not be compatible with re-publishing
the description, but there is little value in making a new one. </dd>
<dd>Requires: Reuse, Structured Markup, Simple Return</dd>
<dd>Helped by: No Visual Encumbrance</dd>
</dl>
<h3>Requirements </h3>
<dl>
<dt>No visual encumbrance</dt>
<dd>It <em class="rfc2119">must</em> be possible to provide a
description for an image without any visual encumbrance on the page.</dd>
<dt>Structured Markup</dt>
<dd>It <em class="rfc2119">must</em> be possible to include rich markup
(e.g. HTML5) in the description of the image.</dd>
<dt>Inline</dt>
<dd>It <em class="rfc2119">must</em> be possible to associate a
description in the body of a page with an image in that page. </dd>
<dt>Reuse</dt>
<dd>It <em class="rfc2119">must</em> be possible to re-use a single
description for multiple occurrences of an image.</dd>
<dt>Maintenance</dt>
<dd>It <em class="rfc2119">must</em> be simple to maintain a library of
images and descriptions for dynamic assembly, or dis-assembly and
re-assembly, of content. </dd>
<dt>Discoverability </dt>
<dd class="rfc2119">It <em class="rfc2119">must</em> be simple for a
user agent to automatically discover a description provided for a
given image.</dd>
<dt>Optional consumption</dt>
<dd>A user <em class="rfc2119">must</em> be able to choose not to read
the long description of a given image.</dd>
<dt>Simple return</dt>
<dd>A user <em class="rfc2119">must</em> be able to return from the
description to the image. </dd>
<dt>Backwards Compatibility </dt>
<dd>It <em class="rfc2119">should</em> be possible to use existing
tools and techniques to associate an image with its description. </dd>
</dl>
</section>
<section id="longdesc">
<h2><span class="secno"></span>3. The <code>longdesc</code> attribute</h2>
<section id="parsing">
<p>The <code>longdesc</code> attribute <em class="rfc2119">must</em>
contain a <a href="http://dev.w3.org/html5/spec/urls.html#valid-url-potentially-surrounded-by-spaces">valid
- URL potentially surrounded by spaces</a>. The URL is a <a href="http://dev.w3.org/html5/spec/links.html#hyperlink">hyperlink</a>
to a description of the image that its parent <code>img</code>
element represents.</p>
<p>Authoring requirement: if the description is only part of the
document at the URL<em></em>, the description <em class="rfc2119">should</em>
be contained within an element which is the target of the link. </p>
<p>User agents <em class="rfc2119">should</em> make the link available
to users, and <em class="rfc2119">should</em> expose the link to
relevant APIs, especially accessibility-oriented APIs.<br>
</p>
<p>User agents <em class="rfc2119">should</em> allow users to discover
when images in a page contain a long description.</p>
<p>If a <code>longdesc</code> attribute has invalid content, user
agents <em class="rfc2119">may</em> make that content available to
the user. This is because a common authoring error is to include the
text of a description, instead of a URL, as the value of the
attribute.</p>
<p class="note">Best practices for full descriptions of images are
beyond the scope of this document, but there are many resources
available.</p>
<p class="note">Best practices for implementation are beyond the scope
of this document. Implementors should note that since images with long
description may also be normal link content, it is important to ensure
that users can activate both behaviours. Likewise, the behaviour for
finding, reading, and returning from a long description to the image
described should be a consistent experience.<br>
</p>
</section>
<section id="extensions-to-the-element-interface">
<h3><span class="secno">3.1 </span>Extension to the <code><a title="element"
class="externalDFN"
data-spec="HTML5">HTMLImageElement</a></code>
interface</h3>
<br>
<pre class="idl"><span class="idlInterface" id="idl-def-Element">partial interface <span
class="idlInterfaceID">HTMLImageElement</span> {
<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span
class="idlAttrName"><a
href="#widl-Element-innerHTML">longdesc</a></span>;</span>
};</span></pre>
<section id="attributes">
<h4><span class="secno">3.1.1 </span>Attribute</h4>
<dl class="attributes">
<dt id="widl-Element-innerHTML"><code>longdesc</code> of type <span
class="idlAttrType"><a>DOMString</a></span></dt>
<dd>
<p class="rfc2119">The <dfn title="dom-Element-innerHTML" id="dfn-dom-element-innerhtml"><code>longdesc</code></dfn>
IDL attribute <em class="rfc2119">must</em> be a valid
non-empty URL potentially surrounded by spaces. It represents a
hyperlink to a detailed description of the image its parent <code><a
title="element"
class="externalDFN"
data-spec="DOM4">HTMLImageElement</a></code>
represents. </p>
<dl class="domintro">
<dt><var>image</var>.<code title="dom-Element-innerHTML">longdesc</code>
[ = <var>value</var> ] </dt>
<dd>
<p>Returns a DOMString that represents the attribute's
contents. </p>
<p>Can be set, to replace the contents of the attribute with
the given string.</p>
</dd>
</dl>
</dd>
</dl>
<pre class="example"><code>//Make the first internal longdesc reference absolute<br><br>var baseURL = document.location.origin + document.location.pathname<br>var someImage = document.querySelector('img[longdesc^=#]');<br><br>someImage.longdesc = baseURL + someImage.longdesc;</code></pre>
<pre class="example"><code>//Open new windows for each longdesc found<br><br>var describedImages = document.querySelectorAll('img[longdesc]');<br><br>for (i in describedImages) {<br> if (i.<strong>longdesc</strong>) //there are a couple of extra things matched <br> window.open(i.<strong>longdesc</strong>);<br>}</code></pre>
</section>
</section>
<section class="appendix" id="acknowledgements">
<h2><span class="secno">A. </span>Acknowledgements</h2>
<p>Thanks to the HTML Working group of the late 1990s for the original
specification of longdesc, and to many many people involved with the
development of HTML5 for the discussion that led to this
specification. I haven't named them: the list might be larger than the
content of the specification. </p>
</section>
<section class="appendix" id="references">
<h2><span class="secno">B. </span>References</h2>
<section id="normative-references">
<h3><span class="secno">B.1 </span>Normative references</h3>
<dl class="bibliography">
<dt id="bib-RFC2119">[RFC2119]</dt>
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
+ [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>]<cite><a class="bibref"
href="#bib-XML10"></a></cite>.
</p>
</section>
</section>
<section id="UCnR">
<h2><span class="secno">2. </span>Use Cases and Requirements</h2>
<p>There are many ways users can successfully interact with content even
if they cannot see, or see well, images included in that content. The <code>alt</code>
attribute is designed to ensure that for everyday work, a user has
enough information to replace an image, and often this is more helpful
than a detailed description of every image. The <code>longdesc</code>
attribute is designed to complement this, to meet the following use
cases<br>
</p>
<h3>Use Cases</h3>
<dl>
<dt>Describing a well-known image</dt>
</dl>
<dl>
<dd>There are many well-known images which are widely reproduced - Mona
Lisa, Washington crossing some river, the Da Vinci picture of the guy
in a square and a circle, Gerníka, Cubbin's "Lost", Leunig's "ramming
the shears". While different people know the images by different
titles, and some images have no widely known titles, visually
recognising the image is often an important part of framing a
discussion. Where the image itself cannot be seen, a description can
often be used to offer the same recognition.</dd>
<dd>Requires: Discoverability</dd>
<dd>Helped by: Inline, Reuse</dd>
<dt>Describing a complex diagram</dt>
<dd>In many environments diagrams are used to explain a concept or
transmit information efficiently. Where a user has a reduced ability
to see the image (poor contrast vision and other conditions are as
relevant here as a complete lack of vision), a description can enable
that user to understand the information being presented</dd>
<dd>Requires: Structured Markup, Inline, Reuse, Simple Return</dd>
<dt>Teaching Accessible Development</dt>
<dd>In many environments producing content that is accessible to users
regardless of disability is a legal and/or market requirement. </dd>
<dd>Requires: Maintenance, Backwards compatibility</dd>
<dt>A self-describing artistic work</dt>
<dd>For many pages the visual design of the page is an important part of
the message it conveys to a fully-sighted user, but the author would
like to convey as much of that design as possible to a user with low
or no vision available. </dd>
<dd>Requires: No visual encumbrance, Structured Markup</dd>
<dd>Helped by: Reuse, Simple Return</dd>
<dt>Referring to an existing description</dt>
<dd>Many well-known images are already described by other sources. The
copyright on those sources may not be compatible with re-publishing
the description, but there is little value in making a new one. </dd>
<dd>Requires: Reuse, Structured Markup, Simple Return, Optional
Consumption<br>
</dd>
<dd>Helped by: No Visual Encumbrance</dd>
<dt>Linking to a description included within a page</dt>
<dd>In some cases an image already has a description included within a
page. Making the linkage explicit can provide further clarity for a
user navigating the page who is not able to interpret the default
layout, e.g. because they have forced a re-layout of the page
elements, or because they do not see the default visual relationship
between the element and its description.</dd>
<dd>This practice also enables description to be provided for all users,
and by making the association clear can be a good reminder to the
content maintainer to check that the description and link are actually
correct.</dd>
<dd>Requires: Inline, Simple Return, Structured Markup, Optional
Consumption<br>
</dd>
</dl>
<h3>Requirements </h3>
<dl>
<dt>No visual encumbrance</dt>
<dd>It <em class="rfc2119">must</em> be possible to provide a
description for an image without any visual encumbrance on the page.</dd>
<dt>Structured Markup</dt>
<dd>It <em class="rfc2119">must</em> be possible to include rich markup
(e.g. HTML5) in the description of the image.</dd>
<dt>Inline</dt>
<dd>It <em class="rfc2119">must</em> be possible to associate a
description in the body of a page with an image in that page. </dd>
<dt>Reuse</dt>
<dd>It <em class="rfc2119">must</em> be possible to re-use a single
description for multiple occurrences of an image.</dd>
<dt>Maintenance</dt>
<dd>It <em class="rfc2119">must</em> be simple to maintain a library of
images and descriptions for dynamic assembly, or dis-assembly and
re-assembly, of content. </dd>
<dt>Discoverability </dt>
<dd class="rfc2119">It <em class="rfc2119">must</em> be simple for a
user agent to automatically discover a description provided for a
given image.</dd>
<dt>Optional consumption</dt>
<dd>A user <em class="rfc2119">must</em> be able to choose not to read
the long description of a given image.</dd>
<dt>Simple return</dt>
<dd>A user <em class="rfc2119">must</em> be able to return from the
description to the image. </dd>
<dt>Backwards Compatibility </dt>
<dd>It <em class="rfc2119">should</em> be possible to use existing
tools and techniques to associate an image with its description. </dd>
</dl>
</section>
<section id="longdesc">
<h2><span class="secno"></span>3. The <code>longdesc</code> attribute</h2>
<section id="parsing">
<p>The <code>longdesc</code> attribute <em class="rfc2119">must</em>
contain a <a href="http://dev.w3.org/html5/spec/urls.html#valid-url-potentially-surrounded-by-spaces">valid
+ URL potentially surrounded by spaces</a>. The URL is a <a href="http://dev.w3.org/html5/spec/links.html#hyperlink">hyperlink</a>
to a description of the image that its parent <code>img</code>
element represents.</p>
<p>Authoring requirement: if the description is only part of the
document at the URL<em></em>, the description <em class="rfc2119">should</em>
be contained within an element which is the target of the link. </p>
<p>User agents <em class="rfc2119">should</em> make the link available
to users, and <em class="rfc2119">should</em> expose the link to
relevant APIs, especially accessibility-oriented APIs.<br>
</p>
<p>User agents <em class="rfc2119">should</em> allow users to discover
when images in a page contain a long description.</p>
<p>If a <code>longdesc</code> attribute has invalid content, user
agents <em class="rfc2119">may</em> make that content available to
the user. This is because a common authoring error is to include the
text of a description, instead of a URL, as the value of the
attribute.</p>
<div class="note">
<p><em>This section is informative</em></p>
<p>Best practices for full descriptions of images are beyond the scope
of this document, but there are many resources available.</p>
<p>Best practices for implementation are beyond the scope of this
document. Since images with long description may also be normal link
content, it is important for implementations to ensure that users
can activate both behaviours. Likewise, it is generally helpful when
the behaviour for finding, reading, and returning from a long
description to the image described is a consistent experience. </p>
</div>
</section>
<section id="extensions-to-the-element-interface">
<h3><span class="secno">3.1 </span>Extension to the <code><a title="element"
class="externalDFN"
data-spec="HTML5">HTMLImageElement</a></code>
interface</h3>
<br>
<pre class="idl"><span class="idlInterface" id="idl-def-Element">partial interface <span
class="idlInterfaceID">HTMLImageElement</span> {
<span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span
class="idlAttrName"><a
href="#widl-Element-innerHTML">longdesc</a></span>;</span>
};</span></pre>
<section id="attributes">
<h4><span class="secno">3.1.1 </span>Attribute</h4>
<dl class="attributes">
<dt id="widl-Element-innerHTML"><code>longdesc</code> of type <span
class="idlAttrType"><a>DOMString</a></span></dt>
<dd>
<p class="rfc2119">The <dfn title="dom-Element-innerHTML" id="dfn-dom-element-innerhtml"><code>longdesc</code></dfn>
IDL attribute <em class="rfc2119">must</em> be a valid
non-empty URL potentially surrounded by spaces. It represents a
hyperlink to a detailed description of the image its parent <code><a
title="element"
class="externalDFN"
data-spec="DOM4">HTMLImageElement</a></code>
represents. </p>
<dl class="domintro">
<dt><var>image</var>.<code title="dom-Element-innerHTML">longdesc</code>
[ = <var>value</var> ] </dt>
<dd>
<p>Returns a DOMString that represents the attribute's
contents. </p>
<p>Can be set, to replace the contents of the attribute with
the given string.</p>
</dd>
</dl>
</dd>
</dl>
<pre class="example"><code>//Make the first internal longdesc reference absolute<br><br>var baseURL = document.location.origin + document.location.pathname<br>var someImage = document.querySelector('img[longdesc^=#]');<br><br>someImage.longdesc = baseURL + someImage.longdesc;</code></pre>
<pre class="example"><code>//Open new windows for each longdesc found<br><br>var describedImages = document.querySelectorAll('img[longdesc]');<br><br>for (i in describedImages) {<br> if (i.<strong>longdesc</strong>) //there are a couple of extra things matched <br> window.open(i.<strong>longdesc</strong>);<br>}</code></pre>
</section>
</section>
<section class="appendix" id="acknowledgements">
<h2><span class="secno">A. </span>Acknowledgements</h2>
<p>Thanks to the HTML Working group of the late 1990s for the original
specification of longdesc, and to many many people involved with the
development of HTML5 for the discussion that led to this
specification. I haven't named them: the list might be larger than the
content of the specification. </p>
</section>
<section class="appendix" id="references">
<h2><span class="secno">B. </span>References</h2>
<section id="normative-references">
<h3><span class="secno">B.1 </span>Normative references</h3>
<dl class="bibliography">
<dt id="bib-RFC2119">[RFC2119]</dt>
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
words for use in RFCs to Indicate Requirement Levels.</cite></a>
March 1997. Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
</dd>
<dt id="bib-WEBIDL">[WEBIDL]</dt>
<dd>Cameron McCormack. <a href="http://www.w3.org/TR/2011/WD-WebIDL-20110927/"><cite>Web
IDL.</cite></a> 27 September 2011. W3C Working Draft. (Work in
progress.) URL: <a href="http://www.w3.org/TR/2011/WD-WebIDL-20110927/">http://www.w3.org/TR/2011/WD-WebIDL-20110927/</a>
</dd>
</dl>
</section>
<section id="informative-references">
<h3><span class="secno">B.2 </span>Informative references</h3>
<dl class="bibliography">
<dt id="bib-HTML5">[HTML5]</dt>
<dd>Robin Berjon et. al., eds. <a href="http://www.w3.org/TR/html5"><cite>HTML5.</cite></a>
W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/html5">http://www.w3.org/TR/html5</a>
</dd>
</dl>
</section>
</section>
</section>
</body>
</html>
\ No newline at end of file