A proposed draft
Fri, 05 Oct 2012 12:50:54 +0200
changeset 12 b63325998cc1
parent 11 3e1acb2f030d
child 14 bb49d50c975e
child 20 28b85df10769
A proposed draft
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/longdesc1/longdesc.html	Fri Oct 05 12:50:54 2012 +0200
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
<html dir="ltr" lang="en">
    <meta charset="UTF-8">
    <title>HTML Image Description Extension</title>
      .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;

.idlInterfaceID, .idlDictionaryID, .idlCallbackID, .idlEnumID {
    font-weight:    bold;
    color:  #005a9c;

.idlSuperclass {
    font-style: italic;
    color:  #005a9c;

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

.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]-->
    <div class="head">
      <p> <a href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"
      <h1 class="title" id="title">HTML5 Image Description Extension<br>
      <h2 id="w3c-working-draft-20-september-2012"><abbr title="World Wide Web Consortium">W3C</abbr>
        Editors' Draft 20 September 2012</h2>
        <dt>This version:</dt>
        <dt>Latest published version:</dt>
        <dt>Latest editor's draft:</dt>
        <dd><a href="mailto:[email protected]">Charles McCathie Nevile</a>,
          <a href="http://www.yandex.com">Яндекс.</a></dd>
      <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">
      <p>This specification defines a longdesc attribute to extended
        descriptions to images in HTML5-based content<br>
    <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 as an HTML extension. This document is intended
        to become a <abbr title="World Wide Web Consortium">W3C</abbr>
        Recommendation. If you wish to make comments regarding this document,
        please send them to <a href="mailto:[email protected]">[email protected]</a>
        (<a href="mailto:[email protected]?subject=subscribe">subscribe</a>,
        <a href="http://lists.w3.org/Archives/Public/public-html-a11y/">archives</a>).
+        All feedback is welcome. </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
+          list of any patent disclosures</a> made in connection with the
        deliverables of the group; that page also includes instructions for
        disclosing a patent. An individual who has actual knowledge of a patent
        which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
+          Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
+          6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent
          Policy</a>. </p>
    <section id="toc">
      <h2 class="introductory">Table of Contents</h2>
      <ul class="toc">
        <li class="tocline"><a class="tocxref" href="#intro"><span class="secno">
        <li class="tocline"><a class="tocxref" href="#conformance"><span class="secno">1.
+              </span>Conformance</a>
          <ul class="toc">
            <li class="tocline"><a class="tocxref" href="#dependencies"><span class="secno">1.1
+                  </span>Dependencies</a></li>
        <li class="tocline"><a class="tocxref" href="#UCnR"><span class="secno">2.
+              </span>Use Cases and Requirements</a></li>
        <li class="tocline"><a class="tocxref" href="#longdesc"><span class="secno">3.
+              </span>The <code>longdesc</code> Attribute</a>
          <ul class="toc">
            <li class="tocline"><a class="tocxref" href="#extensions-to-the-element-interface"><span
+                  </span>Extensions to the <code>HTMLImageElement</code>
              <ul class="toc">
                <li class="tocline"><a class="tocxref" href="#attributes"><span
+                      </span>Attributes</a></li>
        <li class="tocline"><a class="tocxref" href="#acknowledgements"><span class="secno">A.
+              </span>Acknowledgements</a></li>
        <li class="tocline"><a class="tocxref" href="#references"><span class="secno">B.
+              </span>References</a>
          <ul class="toc">
            <li class="tocline"><a class="tocxref" href="#normative-references"><span
+                  </span>Normative references</a></li>
            <li class="tocline"><a class="tocxref" href="#informative-references"><span
+                  </span>Informative references</a></li>
    <section id="intro" class="introductory">
      <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>&lt;!-- pointing to something internal to the page --&gt;<br>&lt;img src="http://example.com/image" alt="" title="photo" <strong>longdesc="#photo1"</strong>&gt;<br></code><code>&lt;!-- pointing to an external resource --&gt;<br>&lt;img src="image" alt="[figure 1]" <strong>longdesc="http://example.com/desc1"</strong>&gt;</code><br><code>&lt;!-- pointing to fragment within an external resource --&gt;<br>&lt;img src="image" alt="[figure 1]" <strong>longdesc="http://example.com/descs#item3"</strong>&gt;</code></pre>
    <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"
        <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"
+        </p>
      <p>Requirements phrased in the imperative as part of algorithms (such as
        "strip any leading space characters" or "return false and terminate
        these steps") are to be interpreted with the meaning of the key word
        ("must", "should", "may", etc) used in introducing the algorithm.</p>
      <p>Conformance requirements phrased as algorithms or specific steps may be
        implemented in any manner, so long as the end result is equivalent. (In
        particular, the algorithms defined in this specification are intended to
        be easy to follow, and not intended to be performant.)</p>
      <p>When a method or an attribute is said to call another method or
        attribute, the user agent must invoke its internal API for that
        attribute or method so that e.g. the author can't change the behavior by
        overriding attributes or methods with custom properties or functions in
      <p>If an algorithm calls into another algorithm, any exception that is
        thrown by the latter (unless it is explicitly caught), must cause the
        former to terminate, and the exception to be propagated up to <em>its</em>
      <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
+          [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>]<cite><a class="bibref"
    <section id="UCnR">
      <h2><span class="secno">2. </span>Use Cases and Requirements</h2>
      <p>There are many ways to ensure that users do not need to see images in
        order to successfully interact with content. The alt 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.</p>
      <h3>Use Cases</h3>
        <dt>Describing a well-known image</dt>
        <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, <br>
        <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.<br>
        <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.<br>
        <dd>Requires: No visual encumbrance</dd>
        <dt>Referring to an existing description</dt>
        <dd>Many well-known images are already described by other sources. The
          copyright on those sources is not necessarily compatible with
          repeating the description, but there is little value in making a new
          one, and <br>
        <dd>Requires: Reuse<br>
        <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
          (HTML5) in the description of the image.</dd>
        <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<br>
        <dd>It <em class="rfc2119">must</em> be possible to re-use a single
          description for multiple occurrences of an image</dd>
        <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.<br>
        <dt>Discoverability <br>
        <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<br>
        <dt>Backwards Compatibility<br>
        <dd>It <em class="rfc2119">should</em> be possible to use existing
          tools and techniques to associate an image with its description<br>
        The longer description mechanism MUST be easy to author, easy to
        maintain and have authoring support in terms of tools and educational
        material to accommodate authors of differing skill sets. <br>
        Backwards compatible <br>
        Any proposed mechanism MUST include a means of accessing content added
        by authors using the HTML4 and XHTML1 attribute longdesc<br>
    <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: the link is to <em>part</em> of a document,
          the description <em class="rfc2119">should</em> be contained within
          an element which is the target of the link.<br>
        <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.</p>
        <p>User agents <em class="rfc2119">should</em> allow users to determine
          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, since a common error is to include the text of a description
          instead of a URL as the value of the attribute.</p>
      <section id="extensions-to-the-element-interface">
        <h3><span class="secno">3.1 </span>Extension to the <code><a title="element"
        <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
        <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
              <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
                represents. </p>
              <dl class="domintro">
                <dt><var>image</var>.<code title="dom-Element-innerHTML">longdesc</code>
                  [ = <var>value</var> ] </dt>
                  <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>
          <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;<br></code></pre>
          <pre class="example"><code>//Open new windows for each longdesc found<br><br>var describedImages = document.querySelectorAll('[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>}<br></code></pre>
      <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.<br>
      <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>
            <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>
        <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>
\ No newline at end of file