Added use case of linking a description that is within the same page (how had I left that out??)
authorcharles
Mon, 19 Nov 2012 11:40:00 +0100
changeset 24 3b21f17166dc
parent 23 2d9248ae5773
child 25 4893614e89f2
Added use case of linking a description that is within the same page (how had I left that out??)
Hopefully got this version to link to the right place now
longdesc1/longdesc.html
--- 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:[email protected]">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:[email protected]">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:[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. Bugs can also be filed directly into the <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=HTML%20WG&amp;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>&lt;!-- The description is somewhere on the same page as the image --&gt;<br>&lt;img src="http://example.com/graph1" alt="(The trend is for drinks to get sweeter)" title="Figure One" <strong>longdesc="#graph1"</strong>&gt;</code><code><br><br>&lt;!-- The description is a page on its own --&gt;<br>&lt;img src="figure1" alt="figure 1" <strong>longdesc="http://example.com/desc1"</strong>&gt;</code><br><code><br>&lt;!-- The description is one of several within an external page --&gt;<br>&lt;img src="DecorativeImage" alt="" title="decorative image" <strong>longdesc="http://example.com/descs#item3"</strong>&gt;</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