Examples In the Wild

No Forced Visual Encumbrance or Default Visual Indicator

A11y Bugs Project

Sample Markup:
<img src="bugs/1/copy.gif" 
        alt="Highlight text and image content and select 'Copy' from the context menu." 
        width="268" height="167" 
        longdesc="http://objdesc.org/?H5PI" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

AccessAbility SIG

Markup:
<a href="index.shtml" title="AccessAbility SIG Home" 
 tabindex="0">
 <img class="asig_logo" 
  src="images/butterfly_logo-102x102.gif" 
  alt="[AccessAbility SIG logo]" title="AccessAbility SIG logo"
  longdesc="siglogo.shtml" />
</a>

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. The longdesc attribute is the sole mechanism used for long description.

ACCESS-ed: University of Wisconsin - Milwaukee

Markup:
<img src="/media/IMG/VC/classrooms.png" 
 alt="A diverse group of generic college classroom buildings." 
 longdesc="/EqTD/classrooms" 
 class="VC_pic" 
 ID="Classrooms" 
 style="top:-19%; left:-4%; Z-index:11;" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Alienor (France)

Markup:
<img src="images/CarteCouronne.gif" 
 alt="Carte de France au d&eacute;but du 11e si&egrave;cle" 
 width="531" height="491" 
 longdesc="longdesc/cartecouronne.htm">

The longdesc attribute is the sole mechanism used for long description in this sample.

Australian Government Department of Health and Aging

Sample Markup:
<img 
 src="/internet/yourhealth/publishing.nsf/650f3eec0dfb990fca25692100069854/ca2575fd004c0485ca2576e30015e527/WebPageBody/0.11BE?OpenElement&amp;FieldElemFormat=jpg"
 width="369" height="268" 
 alt="Figure 1: Locations of Government&#8217;s health reform consultations" 
 longdesc="nhhn-longdesc-fig1">

Note: The longdesc attribute is the sole mechanism used for long description.

Berrien Metal Products, Inc.

Markup:
<img src="assets/images/other/banner-background.jpg" 
 alt="steel &amp; stainless steel fabricators of america Berrien
 Metal Products, Inc." 
 width="900" height="134" border="0" 
 usemap="#Map2" 
 longdesc="assets/longdesc/banner-image-long-description.html" />

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. The longdesc attribute is the sole mechanism used for long description.

California Department of Fish and Game

Markup:
<a href="/about/images/DFG-History-Timeline-LongDesc.html">
 <img src="/about/images/DFG-History-Timeline.png" 
  alt="Link to text version of timeline milestones"
  title="Link to text version of timeline milestones" width="2004" height="534" border="0" 
  longdesc="/about/images/DFG-History-Timeline-LongDesc.html" />
</a>

Note: In addition to longdesc uses a redundant invisible a href.

Camera Obscura

Markup:
<img src="blossoms.gif" 
 alt="Gather Ye Rosebuds While Ye May, in..."
 align="left" style="height:400px;width=325px;" 
 longdesc="blossoms_longdesc.html"/>

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Commonwealth of Massachusetts

Sample markup:
<img src="/bb/fy2008h1/img08/fisc_budget_spend.gif"
 alt="Bar chart showing budgetary and off budget spending" 
 width="400" height="219" 
 title="Bar chart showing budgetary and off budget spending"
 longdesc="/bb/fy2008h1/img08/fisc_budget_spend-text.html"> 
<a href="/bb/fy2008h1/img08/fisc_budget_spend-text.html" 
 style="text-decoration: none;
 font-size: 1pt; color: #fff;" 
 title="Link to a description of the image">d
</a>

Note: Uses a redundant d-link that is hidden with white on white text color and a font size of 1pt . Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description.

Connexions

Sample markup:
<img src="C10_SAR_2_P05_001.jpg"
  longdesc="C10_SAR_2_P05_001.html"
  alt="The prime factorization of sixty. See the longdesc for a full description."/>

Note: Connexions Markup Language (CNXML), is a "lightweight XML markup language designed for marking up educational content". CNXML 0.6 and up supports longdesc. The "Adding Multimedia to Your Connexions Content" module by Dan Galvan, Mark Husband, and Daniel Williamson explains to their users how to use longdesc.

Conseil supérieur de la langue française

Sample markup:
<img src="typo3temp/pics/464df3a6f8.jpg" 
  width="375" height="445" border="0" 
  alt="Menu en français"
  longdesc="http://www.cslf.gouv.qc.ca/index.php?id=255" />

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

CSS Squirrel

Sample markup:
<div class="comic">
 <img longdesc="http://cssquirrel.com/comicscripts/script89.htm" 
  src="/images/comic/cs089.png" 
  alt="CSSquirrel #89: The Value of Meaning" />
</div>

Note: This site has begun using the longdesc attribute in its blog posts which is picked up by feed readers like Opera's feed reader and web based readers such as Bloglines in conjunction with iCab and FireFox with longdesc extension, etc.
Images are used on separate pages (blog post and comic series) and share the same long description page.
In addition to longdesc earlier comic strips used a redundant aria-describedby and CSS to move an #ariaLink off screen. {position: absolute; left: -9999em; top:-9999em;}. This has been discontinued because it does not work and longdesc is now the sole mechanism used for long descriptions.

Daegu Metropolitan Office of Education (South Korea)

Sample markup:
<img 
   src="data-public/files/contentimage/greeting.jpg"
   width="750" height="501" 
  alt="Chancellor's Message" 
  longdesc="/longdesc/greeting.html" />
</a>
<a href="/longdesc/greeting.html">    
  title="Message from the Chancellor introduced a professional"    
  class="dlink"[D] 
</a>

Note: In addition to longdesc uses a redundant invisible a href CSS: a.dlink { width:0; height:0; overflow:hidden; font-size:0; line-height:0; z-index:-1; visibility:hidden;}. The CSS declaration visibility:hidden also hides text from all users. It should not be used if the content is to be read by a screen reader.

CSS Work

Sample markup:
<img 
 src="http://www.d.umn.edu/~lcarlson/images/LLC_logo.gif"
 style="float:right;" width="37" height="44" 
 alt="LLC logo" 
 longdesc="http://www.d.umn.edu/~lcarlson/ld/logo.html">

Note: The longdesc attribute is the sole mechanism used for long description in these samples. It is used on all pages in the CSS Work site.

Data & Statistics (Branch of CDC)

Sample markup:
<img src="dsChildHealthData-550px.gif" 
 alt="Chart: Secondhand Smoke: Children Ages 4-17 with Blood Cotinine* Levels, Selected Years 1998-2008. 
 " width="550" height="324" 
 longdesc="longdesc.html"/>

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

Dhammadana, The Original Teaching of Buddha (Myanmar)

The Dhammadana site uses longdesc on thumbnails throughout their galleries of photographs. A few examples of many:

Sample markup:
<a href="../../../ph/601.jpg" 
 title="Mingun &ndash; If this bloc of ruined bricks is famous, it's because the base 
  should have been the biggest pagoda of the world. The big fissure was made by a 
  earthtake in the XIXth century. Because of the old stair recently built on the 
  outside, we can climb on it.">
 <img src="../../../ph/pt601.jpg" alt="Photo 1" 
  longdesc="../../longdesc/101.htm" />
</a>

Note: Uses the longdesc for the long description and an a href to go to a page with a larger image.

dizABLED

dizABLED has a full section of cartoons that all utilize longdesc. Among them are:

Sample markup:
<a href="/comics/stairs/" title="View Next Comic">
 <img src="images/comics/19980527_car-wash.jpg" 
  longdesc="/comics/car-wash/description/" 
  alt="Car Wash: Leeder trys out the carwash" 
  title="Car Wash: Leeder trys out the carwash" 
  width="728" height="192" />
</a>

Note: The longdesc attribute is the sole mechanism used for long description. a href is mapped to go to the next comic in the series.

Environment Canada (in English)

2012 Canada's Emissions Trends Report:

Markup:
<img alt="figure 1" height="302" id="figure1" 
 longdesc="default.asp?lang=En&amp;n=DD38DDB7-1#figure1" 
 src="72F82C27-A513-4AAF-942F-E60A7DA860E9/fig1-eng.jpg"
 width="590" />

Note: The longdesc attribute is the sole mechanism used for long description.

Environnement Canada (In French)

2012 Évaluation scientifique canadienne du smog faits saillants et messages clés

Markup:
<img alt="figure 1" height="246" id="figure1" 
 longdesc="default.asp?lang=Fr&amp;n=DD38DDB7-1#figure1" 
 src="72F82C27-A513-4AAF-942F-E60A7DA860E9/fig1-fra.jpg"
  width="560" />

Note: The longdesc attribute is the sole mechanism used for long description.

ESC XV - Club Sport Loisir - Paris 15

Markup:
<img src="http://static.esc15.fr/images/volley_csit_2002.jpeg" 
  width="279" height="259"  
  alt="Photo dÕun joueur en smatch au volley" 
  class="lieu" longdesc="/longdesc#volley" />
<a href="/longdesc#volley" class="accessi">d-link
</a>

Note: Also uses an invisible D link via CSS a.accessi{display:none !important;}. As implemented display:none is hidden from screen readers.
Although they have short comings, D links attempt to mitigate damages of user agents that do not yet have a long description feature directly built into them. With proper implementation in user agents, these could all simply be longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

Fakoo(Germany)

Sample markup:
<a href="fakoo/fakoo-plus.html" 
 target="_blank"
 onmouseover="document.images['plan'].src='fakoo/lageplan-3d.gif'"
 onmouseout="document.images['plan'].src='fakoo/lageplan.gif'" 
 class="img">
 <img src='fakoo/lageplan.gif' 
   name='plan' 
   alt="tastbarer Lageplan mit Legende in Fakoo (Beschreibung siehe longdesc)" 
   title="öffnet ein neues Fenster" border="0" 
   longdesc="lageplan.txt">
</a>

Note: The longdesc attribute is the sole mechanism used for long description. Uses an a href to go to larger image.

Federal Deposit Insurance Corporation

Sample markup:
<img border="0" longdesc="Chart1.html" 
 alt="A line graph that shows the
 yield curve of constant maturity Treasury rates in November 2007, 
 November 2008, and November 2009. " 
 src="images/chart1.jpg" 
 width="506" height="332"/>

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

Global Alliance on Accessible Technologies and Environments

Markup:
<img alt="The front cover of the International Best 
 Practices in Universal Design: A Global Review." 
 src="images/sm-ud1.jpg" height="350"  
 style="float:right;margin:.5em;border:thin solid #ccc;"  
 width="210" 
 longdesc="ld_ud1.shtml" />

Note: The longdesc attribute is the sole mechanism used for long description.

Grinning Planet

Markup:
<img  src="pi_toon.jpg" 
 width="468" height="411" 
 alt="funny cartoon, THE WORKING PRIVATE EYE VS. THE RETIRED PRIVATE 
 EYE; see longdesc for text-only equivalent"
 longdesc="pi_toon_textonly.htm">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Health and Safety Executive (UK)

Markup:
<a href="plan0104-09longdesc.htm" title="Long 
description available">
  <img src="../images/strategic_pie.gif" 
   alt="Strategic plan pie chart: Resource allocation programme blocks"
   width="390" height="264" 
   longdesc="plan0104-09longdesc.htm#skip" />
  <span class="hide">Long description available</span>
</a>

Note: Uses longdesc and redundant hidden link text. Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description.

Health Resources and Services Administration

Markup:
<a href="../longdesc/12oldpie.html" 
 id="first">
 <img src="../graphs/12oldpie.gif" 
  alt="Pie graph: Learning Disabilities Among Children with Conditions" 
  longdesc="../longdesc/12oldpie.html" />
</a>

Note: In addition to longdesc uses a redundant invisible a href.

Hipocampo

Markup:
<img src="/originales/TocandoViolin.jpg" 
alt="Interpretando" 
width="400" height="462" 
title="Tocando el viol&iacute;n: el circuito de entrada-salida." 
longdesc="http://www.hipocampo.org/LongDesc/tocandomusica.asp" />

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

HTML5 Multimedia

Markup:
<img src="img/html5-multimedia-books-ian-devlin.jpg"
 width="300" height="182" alt="HTML5 Multimedia Develop and Design book pile" 
 longdesc="imgdesc/bookpile.html" />

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

Indiana University-Purdue University Indianapolis Common Core Curriculum Committee

Markup:
<a href="home.html">  
 <img src="Images/ccclogo.gif"    
 width="200" height="100" border="0"    
 alt="Core Curriculum Committee"    
 longdesc="../longdesc.html#ccclogo"> 
</a> 
<a href="longdesc.html#ccclogo">  
 <img src="Images/dlink.gif"   
 width="1" height="1"   
 alt="D"   
 border="0"   
 longdesc=""> 
</a>

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. Also uses an invisible redundant gif image after the home.html link. Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description.

Information Technology and Disabilities Journal

Markup:
<img src="thompson/images/figure1.png"
 alt="A bar graph shows the generally positive relationship between accessibility 
  policy and performance on several web accessibility measures"
 longdesc="thompson/desc/figure1.html">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Interacciones (Argentina)

Markup:
<img  
 src="http://www.interacciones.com.ar/wp-content/uploads/2007/08/dev-joke.jpg"
 alt="chiste de desarrollo" 
 id="image137" 
 style="width: 380px; height: 914px" 
 longdesc="http://www.interacciones.com.ar/logdesc1.html" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Iris Fernandez: BETA Weblog, educación y tecnología en Argentina

The archive for humor section on this site uses longdesc for cartoons. A few samples of many.

Sample Markup:
<p class="cargando">
<img src="http://agenciablog.net/media/cargando18.png" 
  title="Cargando" 
  alt="Tira Cargando" 
  longdesc="http://www.irisfernandez.com.ar/cargando/cargando18.html" 
  width="100%" />
</p>
<p class="comentario"> 
  <em>CargandoÖ </em>es una tira de 
 <a 
  href="http://www.irisfernandez.com.ar/">IrisFernandez.com.ar
 </a> y 
 <a href="http://agenciablog.net/">AgenciaBlog
 </a>.
<br /> Publicada bajo una licencia 
 <a href="http://creativecommons.org/licenses/by/2.5/ar/">
 Creative Commons AtribuciÛn
 </a>.
<br /> Si bien su lenguaje es mayormente visual, 
  quisiÈramos que todos la puedan disfrutar y para ello la 
  publicamos con un cÛdigo que permite a los lectores de 
pantalla, 
  usado por invidentes, leerles un texto equivalente a la imagen.
<br />
Si desea reproducirla, le pedimos que lo haga con estas mismas caracterÌsticas.
<br />
  Puede copiar y pegar este cÛdigo para publicar la tira:
</p>
<p class="comentario"> 
 <img 
src=&#8221;http://agenciablog.net/media/cargando18.png&#8221; 
 title=&#8221;Cargando&#8221; 
 alt=&#8221;Tira Cargando&#8221; 
 longdesc=&#8221;http://www.irisfernandez.com.ar/cargando/cargando18.html&#8221;
 /&gt;
</p>

Note: Below each comic is a statement regarding Creative Commons licensing and a request that if you use the comic to use their markup because it allows blind people who use screen readers a text equivalent of the image. The site supplies the code to use in plain text. The site does not use redundant link text to the long description page.

John Foliot.ca

Markup:
<div id="poster">
 <img id="poster-img" 
 src="poster2.png" 
 width="480" height="324" 
 alt="A perfectly valid html5 video example" 
 longdesc="postertext.html">
</div>

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Kreuttal (Austria)

Markup:

<a href="longdesc.html">  
 <IMG SRC="partnerschaft2.jpg"    
  ALT="Foto der 2. Partnerschaftsurkunde"     
  title="Foto der 2. Partnerschaftsurkunde"    
  longdesc="longdesc.html"> 
</a>

Note: This sample uses the following CSS.

a:link       { text-decoration: none; color: #00007F; 
font-weight: bold; font-size: 11pt; font-family: "Futura LT 
BT",Helvetica, Arial  }
a:visited    { text-decoration: none; color: #00007F; font-weight: bold;
 font-size: 11pt; font-family: "Futura LT BT",Helvetica, Arial }
a:active     { text-decoration: none; color: #00007F; font-weight: bold;
 font-size: 11pt; font-family: "Futura LT BT",Helvetica, Arial }
a:hover      { text-decoration: none; color: #FF0000; font-size: 11pt; 
font-family: "Futura LT BT",Helvetica, Arial }

Kyungpook (South Korea)

Sample Markup:
<img src="http://image.gb.go.kr/Images/Intro/chart/2010/sfic08_02.gif"
  alt="??¾÷º° ??¾÷??" 
  longdesc="2010/sfic08_02.htm" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Lambda Theta Phi Latin Fraternity

All of the following separate pages share the same long description page: Long Description: Lambda Banner

Markup:
<img src="lambdabanner.jpg" 
 alt="Lambda Theta Phi Latin Fraternity Inc. Alpha Iota Chapter" longdesc="longdesc/longdesc.html#lambdabanner">
<A href="longdesc/longdesc.html#lambdabanner">
 <span class="styleSmall" style="color: White;">D
 </span>
</a>

Note: Also uses invisible link text via CSS style="color:White;". Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

Linux Foundation

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Markup:
<img src="images/OpenA11y.png" 
 class="a11y-logo" 
 alt="Open A11y.org (The Linux Foundations' Accessibility Work Group)" 
 longdesc="images/longdesc/OpenA11y.html" />

Note:

Marden Neighbourhood Plan

Markup:
<IMG src="http://upload.wikimedia.org/wikipedia/commons/5/5c/Marden_-_geograph.org.uk_-_108304.jpg" 
 alt="Marden Crossroads" 
 width="640" height="430" border="0" 
 style="float: left; margin-right: 2em" 
 longdesc="/Resources/Accessibility/Marden-crossroads.html">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Michigan State University

Markup:
<img alt="Infographic of MSU's Global Goods"
 longdesc="/stories/international-infographic-description.html" 
 src="../_files/images/infographics/global-goods-international-infographic.jpg"  
 width="528"/>

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Ministère des Relations internationales - Gouvernement du Quèbec

Markup:
<img src="image/HautPage_ClaudeBechard.jpg" 
 longdesc="longdesc.htm" 
 alt="Recueil de temoignages a l'occasion du decees de monsieur Claude 
  Bechard survenu le mardi 7 septembre" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

My Opera

Markup:
<img 
 src="http://files.myopera.com/chaals/blog/excesskey11.jpg" 
 alt="" 
 title="a screenshot as described above"
 longdesc="http://my.opera.com/chaals/blog/excesskey-descriptions#Excesskey11">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

National Institute of Information and Communications Technology (Japan)

Markup:
<a href="longdesc.html">
 <img src="fig4-1.gif" 
  alt="Summary Conceptual diagram of the system"
  width="749" height="500" 
  longdesc="longdesc.html#sec-a">
</a>

Note: In addition to longdesc uses a redundant invisible a href.

National Institutes of Health (Canada)

Markup:
<a href="moc-pie.htm" 
 title="description of pie chart showing summarization of Marketing to 
  Our Communities survey results">
  <img src="graphics/moc-pie.gif" 
   alt="" 
   width="440" height="340" border="0" 
   longdesc="moc-pie.htm">
</a>

Note: In addition to longdesc uses a redundant invisible a href.

National Institute of Dental and Craniofacial Research

Markup:
<a href="/NR/rdonlyres/5BCE4FD4-48C4-4272-BA70-E788F0F01FF4/19267/RangeFigWebsite1.jpg" 
 target=_blank>
  <img height=248 
  alt="Patterning of the neuroectoderm in sea urchin embryos - click to enlarge" 
  src="/NR/rdonlyres/5BCE4FD4-48C4-4272-BA70-E788F0F01FF4/19268/RangeFigWebsitethumb1.jpg" 
  width=400 
  longDesc=http://www.nidcr.nih.gov/Research/NIDCRLaboratories/DevelopmentalMechanisms/neuroectoderm-longdesc.html>
</a>

Note: In addition to longdesc uses a redundant invisible a href to go to a larger version of the image.

National Institutes of Health (United States)

The United States National Institutes of Health uses longdesc attribute throughout their Curriculum Supplement Series of teacher guides.

Markup:
<img src="../images/guide/info_fig6.gif" 
 alt="Figure 6" width="300" height="258" border="0" class="figImg" 
 longdesc="desc/fig6_desc.htm">

Note: longdesc is the sole mechanism used for long description in these samples.

Nick's Mathematical Miscellany

Sample markup:
<img src="p055s.gif" width="271" height="211" 
 alt="Trapezoid, divided into four triangles by its diagonals." 
 longdesc="p055sdesc1.html" class="p">

Note: The longdesc attribute is the sole mechanism used for long description in in these samples.

nota-ben

The longdesc attribute is used for hundreds of photos on the nota-ben site. A few samples:

Sample markup:
<img longdesc='/spip.php?page=longdesc&id_document=205' 
 alt='Des nuages' 
 src='local/cache-vignettes/L728xH546/nuages-9490e.jpg' 
 width='728' height='546' />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Object Description

Sample Markup:
<img longdesc="http://objdesc.org/?H5O7" 
 alt="Screenshot shows context menu over an image. 'Copy Image Location' is highlighted." 
 height="311" 
 src="images/url-copy-ff.gif" 
 width="347" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample. All logos on this site use the same long description.

Ocean Motion

Sample markup:
<img src="warmingoceans_clip_image009.png"
  longdesc="../../desc/oceancooler-desc.htm" 
  alt="upwelling diagram, read longdesc" 
  width="380" height="300">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Oriental Hospital of Daejeon University (South Korea)

Sample markup:
<a href="/longdesc/hospital/page_17_photo_02.jsp?hospitalseq=1000000053" 
 title="진료과목에 대한 설명">
 <img alt="진료과목표" 
  longdesc="/longdesc/hospital/page_17_photo_02.jsp?hospitalseq=1000000053" 
  src="/wcom/images/ko/hospital/page_17_photo_02.gif" /> 
</a>

Note: Uses longdesc and redundant invisible a href.

Paris Web

Sample markup:
<img src="http://www.paris-web.fr/actualites/2011/infoviz.jpg" 
 alt="infoviz Paris Web 2011" 
 longdesc="http://www.paris-web.fr/actualites/2011/infoviz.html"/>

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Province of Gyeongsangbuk (South Korea)

Markup:
<img 
 src="http://image.gb.go.kr/Images/Intro/chart/2010/sfic08_01.gif"    
 alt="?�???�?�??�?¾?깿죸?�???�?�?�?¡?�?�?�?¶?�?�?�???�???�?�??�?¾?�?�?�???깿죸?�?¸?�???�?�??�???�???�?�??�?¾ ?�?�?�?¿?�?�????�??�??�?�?�?±?�???�?�?"
 longdesc="2010/sfic08_01.htm">

Note: The longdesc attribute is the sole mechanism used for long description.

Parcs Canada

Markup:
<p> 
 <img src="images/fig9-fra.gif"  
  width="506" height="329" 
  alt="Résultat stratégique et architecture des activités de programmes"  
  longdesc="longdesc/fig9-fra.htm" /> 
</p>

Note: The longdesc attribute is the sole mechanism used for long description.

Parks Canada

Markup:
<p> 
 <img src="images/fig9-eng.gif"  
  width="506" height="329" 
  alt="Parks Canada Agency Strategic Outcome and Program Activity Architecture 2009/2010 chart"  
  longdesc="longdesc/fig9-eng.htm" /> 
</p>

Note: The longdesc attribute is the sole mechanism used for long description.

Rebuilding The Web

Sample markup:
<img alt="The Summary field contains a description." 
 height="308" 
 longdesc="http://objdesc.org/?H5OW" 
 src="/6DFBBAF3-D22F-4E81-805D-DDFA9338FF68/table-summary.gif" 
 width="395" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

US Department of Transportation

Markup:
<IMG SRC="images/Chart1_large.gif" 
 WIDTH="591" HEIGHT="409" 
 ALT="Figure 1. Commuter Choice Conceptual Framework" 
 LONGDESC="long_desc_figure1.htm">
<A HREF="long_desc_figure1.htm">
 <IMG 
  SRC="images/clear.gif" 
  WIDTH="5" HEIGHT="5" BORDER="0" 
  ALT="Long Description for Figure 1">
</A>

Note: Uses longdesc and redundant clear gif as an a href.

San Diego University

Markup:
<img src="images/JudicialFlowChart-2009update.jpg" 
  alt="Flow chart of the judicial process" 
  height="558" width="465" border="0" 
  longdesc="flowchart-description.html">

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Santa Barbara Public Library

Markup:
<a href="index.html">  
 <img src="images/logo.gif"    
 alt="Santa Barbara Public Library System"    
 width="152" height="168" border="0" align="middle"   
 longdesc="images/longDesc/longdesc.html" > 
</a> 
<a href="images/longDesc/longdesc.html"  
<img src="images/spacer.gif"  
  alt="d-link" width="1"   
 height="5" border="0" align="middle" > 
</a>

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. The site also uses a redundant invisible spacer .gif link. Because longdesc it is not yet supported by some web browsers, some sites provide a redundant fallback method of providing a full description.

Securian

Markup:
<img src="gif/securian_logo.gif" 
 alt="" 
 title="Securian Dental Logo" 
 longdesc="longdesc/securian_logo.txt">

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. longdesc attribute is the sole mechanism used for long description.

Sésame Province de Luxembourg (Belgium)

Markup:
<a href="longdesc/structuresesame.html">   
 <img src="Images/CarteLuxSesame.gif"      
  alt="Map of Luxembourg: Press Enter to a detailed description"
  longdesc="longdesc/structuresesame.html"     
  height="658" width="471" /> 
</a>

Note: Markup uses longdesc and a redundant invisible link. Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description.

Social Security Online

Markup:
<a href="longdesc/chart1_run172_ld.html">
 <img id="" src="Chart1_run172.gif"
  alt="graph of OASDI cost rates and income rates by year, under present
  law and provision. click on graph to view underlying data."
  longdesc="longdesc/chart1_run172_ld.html">
</a>

Note: Markup uses longdesc and a redundant <a>.

South West Institute of TAFE

Markup:
<img src="images/t32_03.gif" 
 alt="[See longdesc for full description.]" 
 longdesc="longdesc/l2.htm" 
 width="322" height="205" />

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Special Education Support Center (South Korea)

Markup:
<img src="/sub1/images/contents04_2.gif" 
 alt="화성오산교육지원청특수지원센터 조직도" 
 longdesc="/longdesc/org.html" />
<a class="d-link" href="/longdesc/org.html" 
 title="화성오산교육지원청 특수지원센터 조직도에 대한 상세한 설명">[D]
</a>

Note: Also uses an invisible D link. CSS: .d-link {position:absolute;top:0;left:-1000%;font-size:0;line-height:0;overflow:hidden;width:1px;height:1px;}

Note:

Starstream

Markup:
<div id="slider" class="royalSlider rsDefaultInv nocufon">
 <article class="rsContent">
  <h3 class="rsTmb">Sheffield Universities</h3>
   <img class="rsImg" 
    src="/media/images/slider-surf.jpg" 
    alt="Our work for Sheffield Universities Recruitment Fairs." 
    longdesc="/media/longdesc/slider_surf?page=%2F">
 </article>
 <article class="rsContent">
  <h3 class="rsTmb">Healthwatch Bradford</h3>
   <img class="rsImg" 
    src="/media/images/slider-healthwatch-bradford.jpg" 
    alt="Our work for Healthwatch Bradford and District." 
    longdesc="/media/longdesc/slider_healthwatch_bradford?page=%2F">
  </article>
  <article class="rsContent">
   <h3 class="rsTmb">Legal Websites</h3>
    <img class="rsImg"
    src="/media/images/slider-legal-websites.jpg" 
    alt="Our work on over 500 legal websites." 
    longdesc="/media/longdesc/slider_legal_websites?page=%2F">
  </article>
  <article class="rsContent">
   <h3 class="rsTmb">Oakworth Village</h3>
    <img class="rsImg" 
    src="/media/images/slider-oakworth.jpg" 
    alt="Our work for Oakworth Village." 
    longdesc="/media/longdesc/slider_oakworth?page=%2F">
  </article>
  <article class="rsContent">
   <h3 class="rsTmb">Accessify Forum</h3>
    <img class="rsImg" 
    src="/media/images/slider-accessify-forum.jpg" 
    alt="Our web accessibility discussion forum &quot;Accessify Forum&quot;" 
    longdesc="/media/longdesc/slider_accessify_forum?page=%2F">
  </article>
</div>

Note:

statedata.info

Markup:
<img src="images/rp44_graph1.gif"
 alt="Hours Worked Per Week by Individuals in Integrated Employment" 
 longdesc="longdesc/rp44_graph1.html"/>

Note:

State of California

Sample markup:
<a href="timelineld.htm">
<img 
 src="http://www.water.ca.gov/saltonsea/images/Overall-Schedule.jpg" 
 alt="Planning Process Timeline" width=540 height=490 border="0" 
 longdesc="timelineld.htm">
</a>

Note: In addition to longdesc uses a redundant invisible a href.

Talk Origins

Sample markup:
<img src="macroevolution/anagenesis.jpg" 
 longdesc="macroevolution/anagenesis.html" 
 width="271" height="219" id="Graphic1" 
 alt="time versus anagenesis and cladogenesis graph" />
<a class="invisible" 
href="macroevolution/anagenesis.html">d
</a>

Note: Also uses an invisible D link. CSS:
.invisible {padding: 0px; margin: 0px; background:white; color:white; font-size:0pt; line-height:0pt}
Although they have short comings, D links attempt to mitigate damages of user agents that do not yet have a long description feature directly built into them. With proper implementation in user agents, these could all simply be longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

tech.burningbird.net

Sample markup:
<a href="/" title="Home" rel="home" id="logo">
 <img 
  src="http://tech.burningbird.net/sites/default/files/myhtml5icon.png" 
  alt="Home" 
  longdesc="http://tech.burningbird.net/logo.html" />
</a>

Note: The longdesc attribute is the sole mechanism used for long description in this sample.

Technical University of Darmstadt (Germany)

Markup:
<img src="../images/UE/Hemm/Succinat.png" 
 alt="Reaktion der Succinase" 
 longdesc="../Videos/Transkripte/Succinat.html">

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

Telefónica (Spain)

Markup:
<img src="img/movistar.jpg" 
 usemap="#movistar" alt="Telefónica" 
 class="telefonica" 
 longdesc="descripcion_home.html" />

Note: The longdesc attribute is the sole mechanism used for the long description.

Texas State Library

Sample markup:
<img width="524" height="769"
 src="/ld/projects/ttr/2008/manual/images/mind003.jpg"
 alt="Spell it! Sample Spelling Bee Word List.  See long description for
 list."
 longdesc="/ld/projects/ttr/2008/manual/longdesc1.html#c" 
/>

Note: Images are used on separate pages and share the same long description page. longdesc is the sole mechanism used for long description in these samples.

The Geography Site (UK)

Sample markup:
<img src="images/The_Geography.gif" 
 alt="Site logo" 
 width="629" height="80" 
 longdesc="pages/longdesc/logo.html" />
<a href="pages/longdesc/logo.html" 
 title="Link To Description File" 
 class="dlinkblack">d
</a>

Note: Also uses an invisible D link. Although they have short comings, D links attempt to mitigate damages of user agents that do not yet have a long description feature directly built into them. With proper implementation in user agents, these could all simply be longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

University of Minnesota Duluth

Example Markup:
<a href="images/big/checkin.gif" rel="lightbox" title="Lightbox Image">
  <img src="images/checkin.gif" id="checkin1"
   alt="Lab Check In System Screenshot" 
   longdesc="images/ld/checkin.html#content_frame" 
   width="200"
   height="149" />
</a>

Note: The longdesc attribute is the sole mechanism used for long description in this sample. A lightbox technique is used on the a href to display a larger image.

<h1>
 <a href="http://www.d.umn.edu/itss/">
  <img src= "http://www.d.umn.edu/itss/news/umd-itss-logo.jpg"
   alt="University of Minnesota Duluth |    
   Information Technology Systems and Services"   
   longdesc="http://www.d.umn.edu/itss/news/2011/ld/emailbanner.html#ld"
   width="600" height="118">
  </a>
 </h1>

Note: This is an example of a HTML email newsletter sent to a user group. The longdesc attribute is the sole mechanism used for the long description of the h1 banner image. An a href is used to go to the department home page.

University of Victoria

Sample Markup:
<img src="assets/images/brochure.jpg" 
 alt="Another piece of your experience" 
 width="534" height="400" class="centre" 
 longdesc="brochure.html" />

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

U.S. Department of Health and Human Services

Sample markup:
<IMG title="FIGURE D.1" 
 alt="DISTRIBUTION OF FOUNDATION INTERNATIONAL SPENDING BY SECTOR IN 
 2006" 
 src="image001.gif" 
 longdesc="longdesc.htm#FIGD1">

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

W3C HTML5 Accessibility Bugs

Sample markup:
<img src="images/bar1.gif" id="chart1" 
 alt= "Bar chart: Comparison for two timeframes and six bug categories"
 width="653" height="365" 
 longdesc="ld/chart1.html">

Note: The longdesc attribute is the sole mechanism used for long description in these samples.

WebAIM

<a href="media/meetchallenge_figure1.htm">
 <img src="media/whitepaper-figure1.gif" 
  alt="The puzzle pieces of web accessibility with link to description." 
  width="657" height="522" border="0" 
  longdesc="media/meetchallenge_figure1.htm" />
</a>

Note: Markup uses longdesc and a redundant invisible a href. Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description.

Wengo.co.uk

Markup:
<img width="700" height="200" 
 longdesc="http://wengo.co.uk/longdesc/map.txt" 
 src="uploads/images/map_b.gif" 
 alt="Wengo Map of the world" /> 
<a 
 title="long description of previous image" 
 id="d" href="http://wengo.co.uk/longdesc/map.txt">d
</a>

Note: uses #d{color:#ffffff} for invisible dlink.

Yorkshire and Humberside Books

<img src="humberside.jpg" 
 alt= "Front Cover of Remembering the Old Cinemas of Humberside"
 longdesc="humbersided.html" 
 height="400" 
 width="283" />

Note: The longdesc attribute is the sole mechanism used for long description in this example.

ZEW (Germany)

<a href="/" 
 rel="start" 
 title="Zur ZEW Startseite: Zugangstaste 1">
 <img src="/images/shared/logo_zew.gif" 
  width="125" height="91" 
  alt="Logo ZEW" 
  title="Logo Zentrum für Europäische Wirtschaftsforschung"
  longdesc="/longdesc/logo.html" />
</a>
<!--googleoff: all-->
<span class="DisplayNone"> [ 
  <a href="/longdesc/logo.html" 
   title="Beschreibung für die Grafik Logo ZEW aufrufen">D
  </a>] 
</span>

Note: Logos within this site use the longdesc attribute, which provides direct access to the long description while an a href provides direct access to the link to the site's home page. The site also uses a redundant invisible D link via CSS .DisplayNone {display: none; color: #000; background: #FFF;. As implemented display:none is hidden from screen readers.

Longdesc Examples with Redundant Link Text

Redundant link text attempts to mitigate damages of user agents that do not yet have a long description feature built directly into them. Because longdesc it is not yet supported by some web browsers, some sites provide a fallback method of providing a full description via redundant link text. With proper implementation in user agents, these could all be solely longdesc. The redundant link text method is used in the following pages.

Aboriginal Affairs and Northern Development Canada

Markup:
<p class="alignCenter">
 <img width="504" height="221"
  alt="The image is a pie chart showing: Figure 1: Level of Knowledge of the Repeal of section 67 CHRA prior to 2008 amendments"
  src="/br/arp/images/fig1-eng.gif"
  longdesc="/br/arp/longdesc/fig1-eng.html" />
</p> 
<p class="alignRight">
 <a
  href="longdesc/fig1-eng.html">Detailed description of Figure 1
 </a>
</p>

Note:

Affaires autochtones et Développement du Nord Canada

Markup:

<img src="/DAM/DAM-INTER-HQ/STAGING/images-images/area_1314812148513_fra.jpg"  
 width="542" height="510" 
 title="Terres relevant de la compétence administrative du ministre des Affaires Indiennes et du Nord Canadien" 
 alt="Map of Canada's Frontier Lands" 
 longdesc="/DAM/DAM-INTER-HQ/STAGING/texte-text/lngdsc_frntlnds_1314990590323_fra.html"/>
<a href="/DAM/DAM-INTER-HQ/STAGING/texte-text/lngdsc_frntlnds_1314990590323_fra.html" 
 title="Detailed Description for Map of Canada's Frontier Lands" 
 class="alignRight fontSize70">[D]
</a>

Note:

Calderdale Council (UK)

Markup:
<a href="victoria-enlarge.html">
 <img src="images/map_victoria_small.jpg" 
  alt="Victoria Theatre profile" 
  border="0" 
  title="Victoria Theatre profile" 
  longdesc="longdesc-victoria.html" />
</a>
<p class="caption">
 <a href="longdesc-victoria.html">Description of profile
 </a>.
</p>

Note:

Capita

Capita Annual Report

Markup:
<img src="../../images/ConsistBusinessModel-copy.gif" 
 width="800" height="287" alt="Our consistent business model chart" 
 longdesc="../../accessibility/longdesc.aspx#business-model"/>
 <a class="desc-link" 
 href="../../accessibility/longdesc.aspx#business-model">View textual description
</a>

Note:

Centers for Disease Control and Prevention (CDC)

The Centers for Disease Control also uses longdesc on images in a smoking and tobacco use analysis for all fifty US States. The following are examples for just two of the fifty states - New York and California:

Sample markup:
<img class="center" 
 src="/tobacco/data_statistics/state_data/state_highlights/2010/states/new_york/images/currentsmoke.jpg"
 width="600" 
 alt="Graph shows current smoking among adults by demographic 
 characteristics" 
 longdesc="longdesc/index.htm#demographic"> 
<p class="psmall center">
 <a href="longdesc/index.htm#demographic">Text description of this graph
 </a> is available on a separate page.
</p>

Note:

Cornell University

Markup:
 <img src="/dfa/cms/kfs/images/kfstimeline.gif" 
  alt="Kuali Financial System Implementation Timeline"
  title="" longdesc="/dfa/cms/kfs/about/upload/kfstimeline-desc.html" 
  border="0" height="385" 
 hspace="0" vspace="0" width="543" /><br /> 
</p>
<p>
 <a style="" 
  href="/cms/kfs/about/upload/kfstimeline-desc.html">Long description of this image
 </a>

Note:

De Montfort University

Markup:
<p class="caption">Flow Chart 4: After the Strategy Discussion (
 <a 
 href="images/longdesc/ld_flowchart4.htm" >Link to text description of diagram
 </a>)
</p>
<p class="image">
 <a href="images/longdesc/ld_flowchart4.htm">
 <img id="image5" alt="Flow Chart 4: After the Strategy Discussion" 
 src="images/05_02_03_04_FlowChart_4.gif" 
 longdesc="images/longdesc/ld_flowchart4.htm" 
 width="500" height="684"/>
 </a>
</p>

Note:

 

Department of Sustainability, Environment, Water, Population and Communities (Australia)

Markup:
<div class="figure" style="width: 647px; padding-top:10px;"> 
  <span class="figure" style="width: 647px;padding-top:10px;">
   <img src="images/assessment-action.gif" 
   alt="Figure 1: Chart diagram of work flow from various starting points" 
   title="Figure 1: Chart diagram of work flow from various starting points" 
   width="647" height="389" 
   longdesc="fig1-text-description.html" />
</span>
 <p>Figure 1. Use the statement of significance as a reference
     point for associated work, then revise the statement and related
     work as necessary.
    <br />
<a href="fig1-text-description.html">Text description of Figure 1
</a>

Note:

ebility.com

Markup:
<p class="center">
 <img src="images/telecomm_graph1.jpg" 
  width="500" height="314" 
  class="nofloat" 
  longdesc="telecomm_fig1.php" 
  alt="Figure 1: Average performances of the 10 participants throughout the trial" />
</p>
<p class="right">
<a href="telecomm_fig1.php">Long Description: Figure 1
 </a>
</p>

Note:

Department of Transportation (Taiwan)

<p>
 <IMG
  alt="大型車高速超車時的騎乘方法說明圖片"
  src="/site/tcg/public/MMO/dot/Dra_bike/網頁5.5.jpg"
  complete="complete"
  longdesc="GIPDSD/xslGip/xslExport/11700A/DRA_交通局自行車網_AP版型/longdesc/5_5.html"
  mmoid="1209144"/>
</P>
<A href="GIPDSD/xslGip/xslExport/11700A/DRA_交通局自行車網_AP版型/longdesc/5_5.html">☆ 詳細說明
</A>

Note:

Elections Canada

June 2011 Elections Canada Reports, published June 2012

June 2011 Elections Canada Report, published August 2011

Report of the Chief Electoral Officer of Canada on the 41st general election of May 2, 2011

Markup:
<p class="alignCenter"> 
 <img src="/res/rep/est/qua2011/images/figure1_e.gif" 
 alt="Figure 1"
 longdesc="content.aspx?section=res&dir=rep/est/qua2011&document=figure1&lang=e" 
 width="565" height="304" />
</p>
<p class="small">* Annual Authorities for statutory funds reflect first quarter expenditures since statutory authorities are granted as expenditures are incurred. 
</p>
<p class="small">
 <a href="content.aspx?section=res&dir=rep/est/qua2011&document=figure1&lang=e">Click here for a textual description of Figure 1.
 </a>
</p>

Note:

Environment Canada

July 2011 Canada's Emissions Trends Report:

Markup:
<p class="alignCenter">
 <img src="img/ec-com1374-en-fig-es1.gif" 
 width="565" height="520" 
 alt="Figure ES1 shows total Canadian GHG emissions by economic sector as recorded in 2005 as expressed in megatonnes of CO2 equivalent" 
 longdesc="ec-com1374-en-fig-desc.htm#fig-es1-desc" />
</p>
<p>
 <a href="ec-com1374-en-fig-desc.htm#fig-es1-desc">Text Description for Figure&nbsp;ES1
 </a>
</p>

Note:

Giheung-Gu Yong-in City (South Korea)

Markup:
<p>
<img src="../images/en1/E1040030_img1.gif" 
  width="569" height="426" 
  alt="District Mayor" 
  longdesc="longdesc/giheung.html" />
</p>
<p class="longdesc">
 <a href="longdesc/giheung.html" title="District Mayor" >Description-Link 
 </a>
</p>

Note:

Immigration and Refugee Board of Canada

Markup:
<a href="/Eng/res/stat/PublishingImages/ia-ai_2012_eng-l-gif.gif">
 <img alt="Trends and Projections - Immigration Appeals" 
  src="/Eng/res/stat/PublishingImages/ia-ai_2012_eng-s.jpg" 
  longdesc="/Eng/LongDesc/Pages/StatsIADSAI201213_longdesc.aspx" 
  style="border-top:0px solid;border-right:0px solid;border-bottom:0px solid;border-left:0px solid" />
</a>
</p>
<div class="default-small">
 <div class="float_left">[
  <a href="/Eng/LongDesc/Pages/StatsIADSAI201213_longdesc.aspx">Text version
  </a>]
 </div>
<div class="float_right default-emphasis">(Click on image to enlarge)
</div>

Note:

 

Institute for Community Inclusion

Markup:
<p>
  <img src="images/dn18_graph.gif" 
   alt="Figure 1: Employment rates in the general population and VR Rehabilitation rates" 
   longdesc="longdesc/dn18_longdesc.html" /><br />
  <a href="longdesc/dn18_longdesc.html">View text description of chart
  </a>
</p>

Note:

Jun-seok, Park (South Korea)

Markup:
<img 
src="/images/open_content/administrative/organization/local_song/bg_01.png"
 alt="군민의 노래 악보" 
 longdesc="Song.aspx" />

Note:

Marine National Park (Taiwan)

<img src="/chinese/filesys/image/sys/app_10.jpg"
alt="申辦流程"
longdesc="filesys/applications/research/research.html"/> 
<br>
... 
<a href="/chinese/filesys/applications/research/research.html"
title="申辦流程詳細說明"
target="blank">申辦流程詳細說明</a>

Note:

National Institute on Drug Abuse

Markup:
 <a class="" 
  href="http://www.drugabuse.gov/sites/default/files/images/colorbox/rrhiv_fig03.jpg" 
  rel="gallery-all" title="">
  <img 
   alt="Graph of Diagnosis of HIV Infection Amoung Adults and Aolescents" 
   class="imagecache imagecache-content_image_landscape" 
   longdesc=/longdesc/diagnosis-hiv-infection-amoung-adults-adolescents-by-transmission-category-2010 
   src="http://www.drugabuse.gov/sites/default/files/imagecache/content_image_landscape/images/colorbox/rrhiv_fig03.jpg" 
   title="" width="472" height="254" />
</a>
<em>*These transmission categories do not distinguish infections resulting from non-injection drug use (e.g., sexual behavior resulting from drug or alcohol intoxication).
 <br />Source: Centers for Disease Control and Prevention
</em>
<br /> 
<a href=/longdesc/diagnosis-hiv-infection-amoung-adults-adolescents-by-transmission-category-2010>
 Text Alternative for Graph of Diagnosis of HIV Infection Amoung Adults and Aolescents
</a>

Note:

National Transportation Safety Board

Markup:
<a href="HAB1002-Figure-1-Long-Desc.htm">
 Full description of notations used on seatign chart
</a>)
...
<img src="/investigations/fulltext/HAB1002/seating-chart.gif" 
 width="705" height="913" 
 alt="Figure 1: Seating Chart" 
 longdesc="HAB1002-Figure-1-Long-Desc.htm" />

Note:

New Zealand Department of Labor

Markup:
<p>
 <a href="lmr-hlfs-fig1-large.asp">
  <img src="/images/lmr-hlfs-jun10-fig1-small.gif" 
   alt="Fig 1: Employment growth Source: HLFS, Statistics New Zealand" 
   width="280" height="170" border="0" 
   longdesc="lmr-hlfs-fig1-desc.asp">
 </a>
 <br>
 <em>Source: HLFS, Statistics New Zealand
 </em>
</p>
<p>
 <a href="lmr-hlfs-fig1-desc.asp">Data Table for Figure 01
 </a>
</p>

Note: img links to larger img.

Oracle

Oracle uses longdesc throughout its documentation. A few examples:

Sample markup:
<img width="816" height="204" 
 src="img/tdpii_capture.gif" 
 alt="Description of tdpii_capture.gif follows" 
 title="Description of tdpii_capture.gif follows" 
 longdesc="img_text/tdpii_capture.htm" /><br /> 
<a id="sthref312" 
 name="sthref312" 
 href="img_text/tdpii_capture.htm">Description of the illustration tdpii_capture.gif
</a>

Note:

Panel on Responsible Conduct of Research (Canada)

Sample Markup:
<img src="/_Images/org_e.jpg" alt="Organizational Structure" border="0" 
 longdesc="/_Images/longdesc/OrgStructure_eng.html" />
<p>
 <a href="/_Images/longdesc/OrgStructure_eng.html">Organizational Structure
 </a>
</p>

Note:

PC Net (Japan)

Markup:
<img 
 class="float-l" 
 src="img/ieee1394_usb_hard.gif" 
 width="136" height="89" 
 alt="USB2.0CD-R/RWとIEEE1394接続HDD"
 longdesc="longdesc/img_ieee1394_usb_hard.htm" /> [
<a href="longdesc/img_ieee1394_usb_hard.htm"
 title="外付USB2.0CD-R/RWとIEEE1394接続HDDのイメージ図の説明" 詳細1
</a>]

Note:

Resources naturelles Canada

Sample markup:
<a 
 title="Consommation d'énergie dans le secteur 
 commercial et institutionnel selon le type d'activité,2004" 
 href="annexe-a.cfm?graph=17&amp;attr=0">
<img src="images/fig4-1.jpg" 
   width="350" height="383" 
   alt="Consommation d'&eacute;nergie dans le secteur commercial et 
    institutionnel selon le type d'activit&eacute;, 2004." 
   longdesc="annexe-a.cfm?graph=17" />
</a>

Note: Uses longdesc and redundant invisible a href.

Secrétariat du Conseil du Trésor du Canada, Les rapports sur les plans et les priorités

Sample Markup:

<p> 
  <img src="images/program-architecture-fra.jpg"  
   longdesc="longdesc/paa-aap-fra.html"  
   width="595" height="190"  
   alt="Architecture d’activité  de programme de [Department Name]" /> 
  </p>
  <p class="alignCenter">[ 
   <a title="Architectured’activité   de programme"  
   href="longdesc/paa-aap-fra.html">version textuelle 
  </a>] 
</p>

Standard Chartered Leading the way in Asia, Africa, and the Middle East

Markup:
<div class="long_img">
 <img src="../images/charts/Group_Risk.png" 
  alt="Group risk committee structure" 
  width="786" height="505" 
  longdesc="longdesc_risk_review.html" />
 <a href="longdesc_risk_review.html#rev_1" 
 class="longdesc_link">See details</a>
</div>

Note:

Substance Abuse and Mental Health Services Administration (SAMHA)

Markup:
<img src="images/Adversity-Impacts-Developmental-Delay.jpg" 
 alt="Graph displaying increase in number of children with developmental delays relative to a higher number of adversity risk factors" 
 longdesc="adversitychartdesc.html" />             
<p>
 <a href="adversitychartdesc.html">Text description of this chart is available on a separate page.
 </a>
</p>

Note:

Transport Canada

Markup:
<img src="images/enviro_fig1_e.gif" 
 longdesc="longdesc/enviro_fig1_e.html"
  alt="Figure EN1: GHG Emissions (Mt CO2e) by Economic Sector, 2008" width="595" height="386" /> 
 </p> 
 <p class="align-center"> 
  <a href="longdesc/enviro_fig1_e.html" 
   title="Long Description: Figure EN1: GHG Emissions (Mt CO2e) by Economic Sector, 2008">[text version]
 </a> 
</p>

Note:

Texas Comptroller of Accounts, Susan Combs

Markup:
<img src="images/taxrev.gif" 
longdesc="taxrevenue.html" 
 width="278" height="304" 
 alt="see long description" />
<p class="sourceNote">Source: Texas Comptroller of Public Accounts
</p>
<p class="altText">
 <a href="taxrevenue.html">Text Alternative for the Tax Revenue Chart
 </a>
</p>

Note:

Treasury Board of Canada Secretariat, Office of the Comptroller General

Markup:
<img src="images/fnsc-csgf-07-eng.png" 
 alt="Figure 7 &ndash; FM-SC Linkages" 
 width="576" height="427" longdesc="longdesc/fnsc-csgf-07-eng.html#fig7" />
<p 
 id="fig7rt">
  <a href="longdesc/fnsc-csgf-07-eng.html#fig7">Figure 7 - Text version
 </a>
</p>

Note:

Universal Remote Console Consortium

Markup:
<p>
 <img src="UCHComponents.gif"
 alt="Components of the Universal Control Hub" 
 longdesc="UCHComponents-longdesc.html" /> 
</p> 
<p>
<em>Figure 
  <a href="#Ref_UCH_">[UCH]
  </a>: UCH architecture (
  <a href="UCHComponents-longdesc.html">description of image
  </a>)
 </em>
</p>

Note:

University at Buffalo

University at Buffalo uses longdesc when encoding articles for a full encyclopedia. One sample page of many:

Markup:
<p>
<img src="images/bonesci_1.jpg" 
 alt="Figure 1" 
 longdesc="images/bonesci_longdesc_1.txt" />
</p>
<p>An 
 <a href="images/bonesci_longdesc_1.txt" 
   title="explanation of figure 1">explanation of figure 1
 </a> is available.
</p>

Note:

University of Melbourne

Markup:
<img src="/media/images/science/fig_2_1.jpg" 
 alt="Apparatus setup" 
  longdesc="/science/physlog/marie_figures.php" /> Figure 1 (
<a href="/science/physlog/marie_figures.php">description and comments
 <span>for Figure 1
 </span>
</a>)

Note:

U.S. Department of Health and Human Services, Assistant Secretary for Planning and Evaluation

Markup:
<SMALL>[
 <A HREF="figure1.shtml"> Accessible version
 </A>]
</SMALL>
<P ALIGN=Center>
 IMG SRC="fig1.gif"
  ALT="Figure 1. MFS-IP Evaluation Frameword. See Longdesc file for accessible version."
  LONGDESC="figure1.shtml"
  WIDTH="722" HEIGHT="714">

U.S. Department of Transportation Federal Highway Administration

Sample markup:
<p class="imgcap" id="fig1">
 Figure 1. Overall Process for Performance Contract 
  Development<br />(
 <a href="longdesc.cfm#fig1">Click here for text 
  version</a>)
</p> 
<p class="center">
 <img src="/hfl/framework/images/fig1.gif" 
 width="500" height="613" 
 alt="Flow chart describing process for performance contract 
  development" 
 longdesc="longdesc.cfm#fig1" />
</p>

Note:

U.S. General Services Administration

Sample markup:
<p align="center">
<a href="afr_0301a_leadership2.html#StartLD">
  <img src="images/afr_0301_leadership2_a.jpg" 
   alt="GSA leadership directory as of September 30, 2009." 
   width="700" height="567" border="0" align="absbottom" 
   longdesc="afr_0301a_leadership2.html#StartLD" />
 <a href="afr_0301a_leadership2.html#StartLD">
  <br >View text description
 </a>
<a name="BackFromLD" 
id="BackFromLD"></a>

Note:

U.S. Postal Service

Sample markup:
<img src="Traditional Mailbox - Figure 1.jpg"  
 width="1000" height="750" border="0"
 title="Figure 1 - TRADITIONAL MAILBOX." 
 alt="Detailed drawing of a TRADITIONAL MAILBOX."
 longdesc="traditional_mailbox.html" />
<br />TRADITIONAL MAILBOX
<br />
a name="figure1"></a>FIGURE 1 - 
<a href="traditional_mailbox.html">Long Description</a>

Note:

Web Content Accessibility Guidelines (WCAG)

Sample markup:
<a 
 id="travel-report-longdesc"name="travel-report-longdesc" rel="Alternate"
   href="techimages/travel-report-longdesc.html">[Description of travel table]
 </a>
</p>
<p>
 <img src="techimages/table1.gif"
  alt="Travel Expense Report table as rendered by a visual user agent."
  longdesc="techimages/travel-report-longdesc.html" />
</p>

Note:

Weight-control Information Network

Sample markup:
<img src="images/BMIpie.jpg" 
 width="264" height="187" 
 longdesc="longdesc/graph1.htm" 
 alt="Estimated Percentage by BMI chart"/>
<p class="info">A 
 <a href="longdesc/graph1.htm">text description
 </a> of this image is available on a separate page.
</p>

Note:

Wrexham County Borough Council (UK)

Sample markup:
<p class="aligncentre">
 <img src="../../../../images/activ8/activ8flowchart_06.gif" 
  alt="Activ 8-2-16 flow chart" 
  width="393" height="467" 
  longdesc="activ8_longdesc.htm" />
</p>
<p>
 <img src="../../../../images/arrow_1.gif"
  alt="" width="8" height="14" />
 <a href="activ8_longdesc.htm">Text description of 
referring partners flow chart
 </a>
</p>

Note:

Yasui (Japan)

Sample markup:
<p>
<a href="imgs4/asbest05.png" target="blank">
  <img  src="imgs4/asbest05s.png" 
   alt="" 
   height="766" width="700" 
   border="0" 
   longdesc="ldc_kobe_asbest.html"></a>
</p>
<p style="margin-top:-12px;padding-left:360px; 
  font-size:0.7em;">(
   <a href="imgs4/asbest_kobe.pdf" 
   target="_blank">PDFî≈1.4MB
  </a> | 
  <a href="ldc_kobe_asbest.html">HTML Longdesc
  </a>)
</p>

Note: No value is supplied for the alt attribute.

Redundant "D" links are used in conjunction with a longdesc attribute in the following pages. Although they have short comings, they attempt to mitigate damages of user agents that do not yet have a long description feature directly built into them. With proper implementation in user agents, these could all simply be longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

algebraicthunk.net

The Debian aptitude user's manual uses the longdesc throughout. A few samples of many.

Sample Markup:
<div class="screenshot">
 <div class="mediaobject">
  <table border="0" 
   summary="manufactured viewport for HTML img" 
  cellspacing="0" cellpadding="0" width="100%">
<tr>
   <td>
    <img src="images/start-snapshot.png" 
     width="100%" 
     longdesc="ld-id2575257.html">
   </td>
 </tr>
  </table>
<div class="longdesc-link" align="right">
  <br clear="all">
  <span class="longdesc-link">[
   <a href="ld-id2575257.html" target="longdesc">D
   </a>]
  </span>
 </div>
</div>

Note: Documentation for the latest Debian version also make use of the longdesc attribute.

Canadian Space Agency

Markup:
<img src="/images/rpp_2011-s1-1_eng.jpg"
  alt="Canadian Space Agency's 2011-2012 Program Activity Architecture (PAA)"
  longdesc="/longdesc/rpp_2011-s1-1_eng.html" />
 <br />
 <p class="alignCenter">
  <a title="Canadian Space Agency's 2011-2012 Program Activity Architecture (PAA)"  
   href="/longdesc/rpp_2011-s1-1_eng.html">[D]
  </a>
 </p>

Note:

City of Florence (Italy)

Markup:
<img src="new.jpg"   
 alt="tracciato dei 4 itinerari"   
 width="375" height="277" border="0"   
 longdesc="longdescbaric.html" /> 
<a href="longdescbaric.html" 
 title="leggi la descrizione testuale 
dell´immagine">[ d ] 
</a>

Note:

Correctional Service Canada

Markup:
<p>  
 <img
  src="images/r223-eng_clip_image002.gif"
  alt="Percent Reporting a Positive HIV/HCV Test Result by Gender and Aboriginal 
   Self-Identification Among Canadian Federal Inmates Who Have Ever Been Tested"   
  title="Percent Reporting a Positive HIV/HCV Test Result by Gender and Aboriginal 
    Self-Identification Among Canadian Federal Inmates Who Have Ever Been Tested"   
  longdesc="longdesc/figure1-eng.html" 
  width="550" height="376" /> 
</p> 
<p class="alignCenter">  [  
 <a href="longdesc/figure1-eng.html"     
 title="Percent Reporting a Positive HIV/HCV Test Result by Gender and Aboriginal 
  Self-Identification Among Canadian Federal Inmates Who Have Ever Been Tested">D  
 </a>] 
</p>

Note:

Courts Administration Service (Canada)

Markup:
<p>  
 <a href="/CAS/images/org_chart.jpg">
  <img src="/CAS/images/orgchart.jpg" 
   alt="Organizational Chart" 
   title="Organizational Chart" 
   longdesc="/CAS/images/longdesc/Orgchart_eng.html" />
 </a>
<br />
 <a href="/CAS/images/org_chart.jpg">
  <img src="/CAS/images/magnifier.jpg" 
   alt="Click to enlarge image" 
   title="Click to enlarge image" 
   width="25" height="25" border="0" />
 </a>
</p>
<p class="alignCenter">
 <a title="Organizational Chart" 
 href="/CAS/images/longdesc/Orgchart_eng.html">[D]
 </a>
</p>

Note: Also uses an a href to link to a larger image.

DEMOS Project

Markup:
<div class="center">
 <a class="name" name="cartoon" 
 id="cartoon" 
 href="../../pics/course/assessment/cartoon.gif">
 <img src="../../pics/course/assessment/cartoon-small.gif" 
  width="400" height="327" 
  longdesc="cartoon.html" 
  alt="[Cartoon: Will it be fair?] " 
  border="0" />
 </a>
</div> 
<p class="d">
 <a href="cartoon.html" 
 title="Click here for a description of the cartoon.">[D]
 </a>
</p>
<p class="margsmall">[Click on cartoon for larger version.]
</p>

Note: image links to larger version.

Education Place

Markup:

<img src="graphics/bt-2_01-2q.gif" 
 alt="Table showing number of soccer games won." 
 width="237" height="271" 
 longdesc="2_01-2q-longdesc.html" />
<a href="2_01-2q-longdesc.html" 
 title="Long description of Soccer Games Won chart.">[D]
</a>

Note:

Free Technology Academy

Markup:
<img src="implantacion_m1_005.gif" 
 longdesc="ld-d30e16358.html">
<div class="longdesc-link" align="right">
 <br clear="all">
<span class="longdesc-link">[
  <a href="ld-d30e16358.html" 
   target="longdesc">D</a>]
</span>

Note:

Graphical Object Server for Non-Visual Interaction (GONVI)

Markup:
<p class="figure">
 <img width="642" height="269" 
  src="img/figure1.gif" 
  longdesc="img/figure1-longdesc.html" 
  alt="System architecture of GONVI" />[
<a href="img/figure1-longdesc.html" 
 title="long description">d
</a>]
</p>

Note:

Markup:
<img src="gardening_images/dibber.png" 
 alt="A dibber" 
 style="border:0" width="255" height="191" 
 longdesc="descriptions/dibber.html" />
<a href="descriptions/dibber.html" 
 title="Description of the dibber">[D]
</a>

Note:

Institute for Community Inclusion

Markup:
<img src="images/DN26.png" 
 longdesc="longdesc/DN26.html" />
<a 
 href="longdesc/DN26.html">d
</a>

Note: No alt attribute.

Local Government Commission

Markup:
<img src="../../images/C6157791.gif" 
 alt="Figure 1" width="382" height="217" 
 longdesc="figure_1.html" />
<a href="figure_1.html" title="Description of Figure 1">[D]
</a>

Note:

Kennedy Center

Markup:
<IMG SRC="images/albert.jpg" 
  WIDTH="200" HEIGHT="264" 
  ALT="Photo of Lyle Victor Albert, the author and performer" 
  LONGDESC="photo.html" ALIGN="right">
<SPAN CLASS="text">
 <A HREF="photo.html" 
  TITLE="View the long description of the photo of Lyle Victor Albert">D
 </A>
</SPAN>

Note:

Kilkee, County Clare, Ireland

Markup:
<a href="../images/map_large.jpg" 
accesskey="z">
 <img src="../images/map_medium250.jpg" 
  alt="Map of Clare and West of Ireland and Map of Ireland (inset)" 
  width="250" height="288" border="0" class="centre"
  longdesc="visiting_map1_desc.html" />
</a>
<div class="right">
 <a id="west-map-longdesc"
  name="west-map-longdesc" rel="Alternate"
  href="visiting_map1_desc.html" 
  title="Description of Map showing location of Kilkee ">[D]
 </a>
</div>

Note:

London Canal Museum

Sample markup:
<IMG SRC="londonmap.gif" 
 LONGDESC="longdesc-map.htm"
 ALT="Map of London's canals" 
 ALIGN="MIDDLE" WIDTH="525" 
 HEIGHT="268" BORDER="0" 
 ID="map"> 
<A HREF="longdesc-map.htm">D
</A>

Note:

Mesothelioma Center

Markup:
<img src="../imagesn/Pleura-pleural-mesothelioma.gif" 
 alt="Pleura: Pleural Mesothelioma" 
 longdesc="pleura-longdesc.php" />[
<a href="pleura-longdesc.php" 
 title="Long Description of Image (Pleura: Pleural sMesothelioma)">D
</a>]

Note:

Montana Arts Council

Markup:
 <div class="floatleftnobd">
  <img name="chart1a" 
   src="../images/econartists/chart1a.gif" 
   width="381" height="204" 
   alt="Total Labor Force 74%, Artists in 214%" 
   longdesc="econartists_longdesc.asp#ld_chart1a" />
</div>  
<a href="econartists_longdesc.asp#ld_chart1a">D
</a>

Note:

Monterey County Disabilities Icons

Markup:
<a href="mainheading.htm">
<img src="images/cod_head7.gif" 
  alt="Monterey County Commission on Disabilities" 
  border="0" align="left" longdesc="mainheading.htm" 
  width="504" height="115">[D]
</a>

Note:

National Center on Birth Defects and Developmental Disabilities, (Dlink)

Markup:
<p style="text-align:center">
 <a href="http://www.surveymonkey.com/s/6NVGMKH">
  <img src="/ncbddd/tenyears/invitation/NCBDDD_9.jpg" width="700" height="934" 
  alt="Please join us to experience an evening inspired by artful expressions, personal stories, past accomplishments, and hope for the future at a reception celebrating NCBDDD's 10 Years" 
  longdesc="/ncbddd/tenyears/invitation/longdesc-November-1-2011.html" />
 </a>
</p>
<p style="text-align:center">
 <a href="/ncbddd/tenyears/invitation/longdesc-November-1-2011.html">D
</a>
</p>

Note:

Northern Ireland Planning Service

Markup:
<div class="pl">
<img src="bmap2015-diagram1.gif" 
  width="450" height="358" 
  alt="Diagram of the seven factors that stregthen the Metropolitan Area" 
  title="Diagram of the seven factors that stregthen the Metropolitan Area"  
  longdesc="longdesc-bmap2015diagram1.htm"  />
</div>
<div class="pl">[
 <a href="longdesc-bmap2015diagram1.htm" 
  title="Read a description of this diagram...">d
 </a>]
</div>

Note:

Office of the Superintendent of Financial Institutions Canada

Markup:
<p>
 <strong>
  <img src="../images/charts/fig12_en.gif"
   longdesc="../longdesc/fig12-eng.html" 
   alt="OSFI Performance against User Fee Service Standards 2009&ndash;2010" />
</strong>
</p>
<div>
<div class="floatLeft marginTop10">
 <img  src="../images/chevron_small.gif" alt=""  />
 </div>
<div 
 class="pullquote_chevronstyle">In 2009&ndash;2010, OSFI met or exceeded all its performance standards for approvals andrelated services.
</div>
</div>
<p class="alignCenter">
 <a title="Figure 12: OSFI Performance against User Fee Service Standards " 
 href="../longdesc/fig12-eng.html">[D]
 </a>
</p>

Note:

National Institute of Standards and Technology (NIST)

Markup:
<a href="images/slide-onbit-vision.jpg">
 <img src="images/slide-onbit-vision_sm.jpg" 
  alt="A spectrum of planned test bed activities illustrating the vision" 
  name="slide_onbit_vision_sm" 
  height="281" width="519" border="0" 
  longdesc="spectrum.html"></a><a href="spectrum.html">d
</a>

Note: Each image links to larger version.

Ohlone College

Markup:
<img  src="/instr/biotech/biotechcenter/images/map-bayarearegioncolleges.png"  
 width="600" height="441"  
alt="Map showing location of 26 community colleges offering Biotechnology and Biological Sciences degrees and certificates." longdesc="longdesc-listcollegesonmap.html" />
<span style="margin-left:2px;">(<a href="/instr/biotech/biotechcenter/longdesc-listcollegesonmap.html">d
 </a>)
 <a name="returnfromlongdesc" id="returnfromlongdesc">
</a>
</span>

Note:

Parliament of Canada

Markup:
<img src="images/pie-eng.gif"  
 width="725" height="570" 
 title="Image: 2010Ã2011 Actual Spending by Service" 
 alt="Image: 2010Ã2011 Actual Spending by Service" 
 longdesc="longdesc/longdesc_14_1_e.html" />
<p class="alignCenter">
 <a href="longdesc/longdesc_14_1_e.html" 
  title="2010&ndash;2011 Actual Spending by Service (in thousands of dollars)">[D]
 </a>
</p>

Note:

Pessimistic Dot Com

Markup:
<img SRC="Implant_l.jpg" 
 ALT="Tranparent breast implant held in man's hand." 
 LONGDESC="longdesc/implant_pic1.html" 
 height="470" width="434"><font size="-2">
<A href="longdesc/implant_pic1.html" 
 title="Implant picture info">D
</A>

Note: More samples are on this site.

Public Safety Canada

Markup:
<p>
  <a href="images/ygpf-flagj-09-10-figure1_800-eng.jpg">
   <img src="images/ygpf-flagj-09-10-figure1_430-eng.jpg"
     alt="Figure 1: Potential Cost Savings Associated with Gang Exits"
     width="430" height="268"
     longdesc="longdesc/ygpf-flagj-01-eng.html" />
  <br />
 Click to enlarge image
 </a>
  <br />
 <a href="longdesc/ygpf-flagj-01-eng.html">D
 </a>
</p>

Note: More samples are on this site.

Fundación Sidar (D Links)

Markup:
<td 
 width="50%" 
 align="center">
 <img src="../graficos/home.jpg" 
  alt="Detalle de la obra &quot;Creaci&oacute;n de Ad&aacute;n&quot; de Miguel Angel" 
  width="360" height="283" longdesc="longdesc.html#creacion" />[
  <a href="longdesc.html#creacion" 
  title="Descripci&oacute;n de la imagen" 
  class="lnk-home">D
</a>]
</td>

Note:

Specific Claims Tribunal Canada

Markup:
<p>

 <img src="images/paa-aap1112-eng.jpg" 
  longdesc="longdesc/paa-aap1112-eng.html" 
  width="536" height="266" 
  alt="Strategic Outcome and Program Activities" />
</p>
<p class="alignCenter">
 <a title="Program Activity Architecture" 

  href="longdesc/paa-aap1112-eng.html">[D] 
 </a>
</p>

Note:

Trace Center

Sample markup:
<img alt="Rainbow of Services"
 src="rainbow.jpg"
 title="The Translation, Modality Transformation and Assistance Services
  laid out as a rainbow"
 longdesc="Rainbow-longdesc.html" /> [
<a
 href="Rainbow-longdesc.html">D
</a>]

Note:

Transportation Safety Board of Canada

Sample markup:
<img width="590" height="335" 
 src="images/dpr2008-2009_chart.gif"
 alt="Strategic Outcome and Program Activity Architecture" 
 longdesc="dpr2009_longdesc.asp#chart" />
<a class="dlink" href="dpr2009_longdesc.asp#chart" title="Chart">[D]
</a>

Note:

Treasury Board of Canada Secretariat, Reports on Plans and Priorities

Sample Markup:
<p>
  <img src="images/program-architecture-eng.jpg" 
  longdesc="longdesc/paa-aap-eng.html" 
  width="595" height="197" 
  alt="Program Activity Architecture" />
  </p>
<p class="alignCenter">[
 <a title="Program Activity Architecture" 
  href="longdesc/paa-aap-eng.html">text version
 </a>]
</p>

Note:

Tribunal des revendications particulières Canada

Markup:
<p>

 <img src="images/paa-aap1112-eng.jpg" 
  longdesc="longdesc/paa-aap1112-eng.html" 
  width="536" height="266" 
  alt="Strategic Outcome and Program Activities" />
</p>
<p class="alignCenter">
 <a title="Program Activity Architecture" 

  href="longdesc/paa-aap1112-eng.html">[D] 
 </a>
</p>

Note:

Universal Remote Console Prototyping of an Emerging XML Based Alternate User Interface Access Standard

Sample markup:
</OBJECT>
 <EMBED SRC="Figure1.svg" 
  TYPE="image/svg-xml" 
  PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/"
  width="100%" height="50%" 
  alt="Figure 1: Layered conceptual model of the prototypes" 
  longdesc="Figure1-longdesc.html">
 <NOEMBED> 
   <IMG SRC="Figure1.jpg" BORDER="0"
    ALT="Figure 1: Layered conceptual model of the prototypes" 
    LONGDESC="Figure1-longdesc.html" 
    WIDTH="97%"> 
 </NOEMBED> 
 </EMBED>
</OBJECT> 
<A 
HREF="Figure1-longdesc.html">[D]
</A>

Note:

UK Blind Piano Tuners

Markup:
<img src="ukpp-logo.jpg" 
 width="251" height="180" border="0" 
 alt="ukpp-logo.jpg - 6645 Bytes" 
 longdesc="site-images/longdesc/longdesc-logo.html" />
<a 
 href="site-images/longdesc/longdesc-logo.html">d
</a>

Note:

U.S. Department of Health & Human Services

Sample Markup:
<img src="fig1.gif" 
 alt="Figure 1." 
 LONGDESC="longdesc.html#fig1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="longdesc.html#fig1">D
</a>

Note:

U.S. Patent and Trademark Office

Markup:
<a href="desc_programcost1.html#MainContent">
<img src="images/pg056a_programcosts.jpg" 
 alt="Pie chart summarizing program costs for fiscal year 2007." 
 width="400" height="235" border="0"
 longdesc="desc_programcost1.html#MainContent">D
</a>

Note: Both the d link and the image are encased in the same a href.

U.S. Postal Service

Markup:
<img id="ep1008201" class="Default" 
 src="images/pub166_tech_012_1.jpg" width="352" height="199" 
 style="display: block; float: none; left: 0.0; text-align: left; top: 0.0;" 
 alt="red and black label"
 title="red and black label" longdesc="longdesc/pub166_lab33.txt" />
<a href="longdesc/pub166_lab33.txt" 
 title="Description link for red and black label">
 <span class="dlink">[D]</span>
</a>

Note:

U.S. State Department

Markup:
<a 
 href="http://www.state.gov/s/d/rm/rls/perfrpt/2009/html/135573.htm#StartLongDescription">
<img height="438" 
  alt="Image showing the Strategic Planning Framework diagram." 
  width="640" border="0" 
  longdesc="http://www.state.gov/s/d/rm/rls/perfrpt/2009/html/135573.htm#StartLongDescription"
  src="http://www.state.gov/img/10/36250/mda_02_perfhighs_01a_640_1.jpg"/>
 <br />D
</a>

Note:

University of Texas

Markup:
<img 
 src="http://dase.laits.utexas.edu/media/american_politics_collection/viewitem/cf_conamend_400.gif"
 width="660" height="456" border="0" 
 alt="The Constitutional Amendment Process" title="" 
 longdesc="ld.html">
<div class="long-d">
 <a href="ld.html" 
  title="long description of the image">D
 </a>
</div>

Note:

University of York

Markup:
<img src="upset1.gif" 
 alt="Bar chart with two bars and two error bars above them." 
 longdesc="upset1d.htm" >
<a href="upset1d.htm">d
</a>

Note:

W3C Rich Web Applications Backplane Incubator Group

Sample markup:
<tr>
 <td rowspan="1" colspan="1">
  <img longdesc="figure1.html"
    src="figure1.gif" 
   alt="Figure 1: Layers of a Rich Internet Application" /> 
 </td>
</tr>
<tr>
 <td rowspan="1" colspan="1">Figure 1: Layers of the Rich 
   Web ApplicationBackplane [
  <a href="figure1.html" 
   title="description of Figure 1: Layers of the Rich Web Application">D
   <span class="context">escription of Figure 1
   </span>
  </a>]
 </td>
</tr>

Note: Uses "modernized" [D] link as an "until browsers support..." WCAG technique, per WCAG 2.0 C7. It provides overflow so that instead of 9 links with identical hyperlink text (D), each D link is exposed to non-css enabled or speech output enabled UAs as: "Description of Figure 1". The CSS used is: a span.context { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

Longdesc Examples with On-Page Text Via Document Fragment

Bembelterror Frankfurt

Markup:
<img src="bday-2007-front" 
 alt="Flyer Vorderseite" 
 longdesc="#copy" 
 width="800" height="284" border="0">

Note:

F*ckparade (Germany)

Sample markup:
<a href="front/" 
 title="Flyer 2007: Vorderseite vergrößern" 
 class="flyer">
<img src="/2007/img/fp2007-flyer-front-small" 
  alt="Fuckparade Flyer 2007: tanzende Jugendliche, darüber 
   steht: Terrornetzwerk. §129a." 
  longdesc="#flyertext" width="600" height="305" />
</a>

Note: a href goes to larger image.

Juicy Studio

Markup:
<img src="/img/article/erd.gif" 
 alt="Entity Relationship Diagram for the tables" 
 width="367" height="338" 
 longdesc="#entitydescription">

Note:

W3C HTML5 Accessibility Task Force Consensus Procedures

Markup:
<img src="consensus-flow" 
 alt="Flowchart of the consensus procedure" 
 width="810" height="577" 
 longdesc="#steps" />

Note:

WAI-ARIA Primer 1.0

Sample Markup:
<img alt="Accessibility information mapped to a DOM 
element in the Document Object Model" 
 height="512" 
 longdesc="#ld_fig1" 
 src="accessibleelement.png" 
 width="640"/>

Note:

Use Cases

For an explanation of use case elements, please consult the Use Case Key.

1. Describing a Logo

Element Description
Number UC-01
Title Describe Logo
Goal Provide a long description of a logo
Primary Actor Web Designer
Stakeholders and Interests
Constraints
Use Scenario

Gail, a web designer, is given a logo from a company's marketing department to incorporate into their web site. The marketing department's visual style guide and branding requirements will not allow a long description on-screen or an on-screen visual indicator of a long description. The logo must be linked to the company's home page wherever it appears while at the same time a long description of the logo must be provided to blind screen reader users.

Gail once wondered, "Why on earth do we need to describe a logo?" Then she found out that majority of blind people lose their sight later in life, either progressively, or through an accident. They have understanding of vision and are able to "visualize" what things look like in their mind's eye. This is an important part of them. They appreciate descriptions. Some have described themselves by saying, "I am blind. I am a visual person. I just can’t see". Other people born blind may not be interested in what such an image looks like. If they don’t want to listen to the long description, they won’t. In either case, the company wants to provide user choice.

The blind user needs direct access to the long description while simultaneously needing direct access to the link to the company's home page. The blind user will not want to be forced to listen to the description but will want an option to do so.

Gail writes a long description of what the logo looks like. The description would be redundant to most sighted users as it describes what is visually evident. She wants a quick and easy way to hide the descriptive text from sighted viewers while providing screenreader users the option to listen to the description if so desired. She thinks about longdesc.

She knows that the longdesc attribute provides proper semantics and is natively free from a visual encumbrance. It provides screenreader users freedom of choice. The description is not forced upon them but the option to obtain it is provided.

The longdesc attribute provides needed functionality when an image also serves as a link. With longdesc it is programmatically possible to separate the activation of the longdesc for exposure from the UA's universal link activation action (which is usually activated with the ENTER key, the SpaceBar, or by mouse click), so that the linked image retains the expected behavior in response to user interaction while a discrete mechanism is used to retrieve the long description.

Providing a longdesc with the same link each time would make it programmatically determinable that the user has access to the description. When adding the logo to a new page, copy/pasting with an absolute longdesc URI (e.g. longdesc="http://example.com/logoDescription") would ensure that updating the description is as easy as updating the logo image.

After careful consideration of all of this, Gail uses a WYSIWYG editor and ties the logo's long description page to the logo image via the native longdesc attribute and links all logo images in the site to take the user to the company home page with an a href. She tests the longdesc with iCab and Jim Thatcher's Long Description Favelet. It works.
Use Case A web designer:
  1. Is provided a new logo for a company to be used throughout its web site.
  2. Creates a long description of the logo to be used throughout the site.
  3. Programmatically ties the logo's long description to the logo image.
  4. Links all logo images in the site with an a href to take a user to the company home page.
  5. Tests for functionality.
Notes

Real world example logos: AccessAbility SIG, Berrien Metal Products, Inc., Indiana University-Purdue University Indianapolis Common Core Curriculum, Santa Barbara Public Library, Securian, tech.burningbird.net, ZEW

2. Describing a Cartoon

Element Description
Number UC-02
Title Describe Cartoon
Goal Provide a long description of a cartoon
Primary Actor Cartoonist
Stakeholders and Interests
Constraints
Use Scenario

Wylie, a cartoonist, draws a weekly comic strip for his blog. All the comics are made for sighted users. But he would also like to accommodate blind users if it is easy and doesn't interfere with his visual design.

As a visual designer, Wylie objects to using a visual link to a long description. It is unacceptable to his aesthetics. Beyond this his upcoming design already has another functionality mapped to clicking the comic.

Wylie likes the simplicity of longdesc and the easy way that support tools such as XStandard and Opera allow him to author and check them . So he writes a long description for his comic on separate web page. He uses longdesc because he wants a quick and easy way to hide the descriptive text from sighted viewers while being able to tie the image to the long description which accommodates blind users.
Use Case A cartoonist:
  1. Draws a weekly comic strip for his blog.
  2. Creates a long description of the cartoon in XStandard, a WYSIWYG authoring tool.
  3. Programmatically ties the cartoon's image to the long cartoon's description.
  4. Tests longdesc functionality with Opera and Jim Thatcher's Long Description Favelet.
Notes

Real world example cartoons: A11y Bugs Project , CSS Squirrel, Conseil supérieur de la langue française, Interacciones, Grinning Planet, dizABLED, South West Institute of TAFE
Related: Long Descriptions and Political Cartoons.

3. Describing Artwork

Element Description
Number UC-03
Title Describe Artwork
Goal Provide long descriptions for artwork on a gallery web site.
Primary Actor Web Developer
Stakeholders and Interests
Constraints
Use Scenario

Toby, a web developer, is commissioned to create a gallery web site.

He is given small thumbnail images as well as large images of each piece of artwork. The gallery wants to provide visual users the option to obtain a larger image of a thumbnail.

The gallery also wants to provide blind users the option to obtain a description of each image. Toby is given long text descriptions of what each image looks like. The descriptions provide in text what is visually evident. A default visual encumbrance of the long description constantly on-screen is unacceptable due to the gallery's design requirements. Blind users will need programmatic and direct access to the long description. They will not want to be forced to listen to the description but will want an option to do so. Toby knows that when the <img> element is within the content of an <a> element, popular screen readers provide a mechanism to access the 'longdesc' resource and a separate mechanism to access an a href.

  • To accommodate blind users, Toby uses Dreamweaver and links the small and large images to the same description (since it's the same picture) e.g. at /images/descriptions/foobar.html. Using a longdesc with the same link makes it programmatically determinable that the user has seen the description. This provides blind users basic information of what the visual looks like.
  • For sighted users, Toby links each small image to the larger image via an a href. This provides sighted users further information of what the visual looks like.
Use Case A web developer:
  1. Is tasked with developing a gallery for artwork.
  2. Is provided one small thumbnail image of each piece of art.
  3. Is provided one large image of each piece of art.
  4. Is provided descriptions of each piece of art.
  5. Programmatically ties the artwork's long description to the artwork's small and large images with a WYSIWYG editor.
  6. Links each small image with an href to a larger image that takes sighted users to the larger image.
  7. Tests with firefox and its longdesc extensions.
Notes

Real world example gallery: Dhammadana, The Original Teaching of Buddha
Related example: Spotlight On Adam Moren, Spotlight on Trish Crace

4. Describing Screenshots

Element Description
Number UC-04
Title Describe Screenshots
Goal Provide long description of screenshots for user documentation.
Primary Actor Large company's documentation team.
Stakeholders and Interests
Constraints
  • Long description text provided on the same page is unacceptable as it would be redundant to most sighted users.
  • Accessing the long description cannot take the screen reader user away from their position in the document containing the image where the description was invoked as it would cause basic usability/accessibility failure.
  • The long description must programmatically tie the description to image for accessibility and provide clear, direct, proper semantics.
  • The long description should support structured markup to enable user functionality.
  • The long description must not be forced upon the blind user whether they want it or not. They must be able to control how they interact with the long description.
  • discoverability affordances are needed.
  • The solution should not be a bridging technology.
  • The solution must be backwards compatible.
Use Scenario

A company's documentation team is tasked with providing documentation of a new product.

They create a long description of each screenshot. The descriptions describe what is visually evident and would be redundant to most sighted users so the descriptions are not provided on screen.

The team considers using aria-describedby to supply long descriptions as it provides proper semantics and is programmatically determinable. They decide against it for numerous reasons. These are not problems with longdesc.

Modern screen readers have good support of the longdesc attribute. They typically announce the presence of a long description when available, and provide users with the option of reading it by executing a specified keystroke. But in an effort to mitigate damages of user agents that do not yet have a long description feature built directly into them, the team provides a separate redundant link to the long description. This link does not programmatically tie the image to the description. With proper implementation in user agents the team would gladly remove these redundant links and solely use longdesc, because longdesc does programmatically tie the image to the description. This aids accessibility.

The team makes the decision to programmatically tie each long description to each image via longdesc.
Use Case A large company's documentation team.
  1. Is tasked with providing documentation of a new product.
  2. Creates a long description of each screenshot.
  3. Programmatically ties each screenshot's long description to the screenshot image.
  4. Tests for functionality.
  5. Provides a redundant link to the long description.
Notes

Real world example screenshots: A11y Bugs Project, Object Description, Oracle,Rebuilding the Web, University of Minnesota Duluth,
Related screenshots examples: My Opera (no forced visual encumbrance)

5. Describing a Chart

Element Description
Number UC-05
Title Describe Chart
Goal Provide long description of a pie chart (data visualization) for a report.
Primary Actor Task force member
Stakeholders and Interests
Constraints
Use Scenario

Clara, a task force member, agrees to provide a weekly report. Sometimes that report includes a data table.

She creates a pie chart (data visualization) for the sighted members of the group because it makes the data comparisons easier to understand than raw numbers in a table.

She writes a long description for the blind screen reader members of the group because it makes the data comparisons easier to understand than raw numbers in a table. Her long descriptions communicate the same relationships, trends, etc that the images are intended to convey. It is tempting to allow the tables themselves to suffice as an equivalent to the pie charts but she knows they wouldn't. She recall's Joe Clark talking about this a few years ago in a WCAG comment. He said,

To use an analogy over again, diagrams and data are like a suitcase that can be unpacked but not easily repacked. If data were understandable by themselves, we wouldn't make a chart. I can assure the Working Group that giving nondisabled people a really nice chart and disabled people a table with 10,000 or more data points does not constitute equality in any sense.

WCAG revised their example after his comment to:

A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data, trends and implications comparable to those available from the chart. Where possible and practical, the actual data is provided in a table.

Clara contemplates adding the long description text in page or adding a visual link to a long description page but both of those ideas would add visual clutter for the sighted. As an author, designer, and visual artist that is an important consideration for her. For sighted users, the consequences adding a redundant visual text description is information overload which wastes time and taxes attention at the content's peril. Removing such visual clutter increases understanding and actual time-on-task. This is where visual design plays an increasingly important role for sighted users. It can communicate a concept a moment or two. A chart or graph condenses a larger body of information and conveys it quickly. It is what visual design and data visualization is about.

The longdesc's aim is to be a substitute for the data visualization. It is natively free from a visual encumbrance. It solves the problem.

Clara places the long description on a separate a web page. Using a WYSIWYG editor she programmatically ties the pie chart's long description to the pie chart's image with the longdesc attribute. Now the information is customized for both user groups.

Clara uses Opera and the Firefox longdesc extension by Patrick Lauke as tools to the check the longdesc. Yes. It works. Plus these tools also give everyone access to longdesc content if they actually need access or are simply curious. Such support tools make longdesc discoverable.

Clara's hope is that one day access to the content of longdesc attribute for the sighted will be similar to television closed captions. Closed captions are encoded or invisible to the sighted by default and must be decoded or made visible. There is a reason that closed captions (as opposed to open captions) are the default on televisions. Sighted people rarely require them. To them, they are visual noise. Clutter. Redundant. But if a sighted person wants to enable closed captions they can do so via a user preference built into the system menu. It is a user choice. Televisions do not have a default on-screen visual indicator. There is no forced visual encumbrance. This is by design.
Use Case A task force member:
  1. Is charged with creating a weekly report which occasionally includes a data table.
  2. Creates a pie chart (data visualization) from the data table.
  3. Writes a long description of the pie chart explaining what is visually evident.
  4. Programmatically ties the chart's long description to the chart image using a WYSIWYG editor.
  5. Tests to ensure that the long description is working properly.
Notes

Real world example charts: Accessibility Task Force Bug Comparisons,
Related real world example charts: Commonwealth of Massachusetts, Cornell University, Environment Canada, Kyungpook (South Korea), Michigan State University, National Institute of Information and Communications Technology, National Adult Literacy Database, National Institutes of Health, National Institutes of Health, National Institute of Standards and Technology (NIST), Parcs Canada, Parks Canada, Research and Innovative Technology Administration / US Department of Transportation, statedata.info, U.S. Department of Health and Human Services, San Diego University, State of California

6. Describing a Photograph

Element Description
Number UC -06
Title Describe Photograph
Goal Provide long description of a photograph
Primary Actor Photographer
Stakeholders and Interests
Constraints
Use Scenario

Naomi, a photographer, takes a photograph. She has a web site and uses an older WYSIWYG editor Dreamweaver (CS3).

She has blind friends as well as sighted friends who are interested in her work. Most of her blind friends lost their sight later in life, late enough to have a good memory of sight. One of these people is her first photography teacher. Most of her blind friends would appreciate more detail than what can be offered up in an alt attribute.

Naomi did some reading on web accessibility a few years ago and remembers Joe Clark's advice for writing long descriptions. So for her blind friends and for her teacher, she tries her hand at writing what she sees. She uses ordinary words to describe visually evident elements e.g. subject matter, colors, composition etc.

Naomi contemplates adding the long description text on the same page as the photo or linking to the long description with a visual link. It would add visual noise for her sighted friends most of whom are other photographers and visual artists. She recalls what Adrian Higginbotham said recently, "accessibility is something for everyone, not everything for anyone, it's the content that's important not the interface."

So Naomi decides to use longdesc because her sighted friends will receive the visual content while her blind friends will receive the long description of the visually evident content. The longdesc attribute will allow her to accommodate all of her friends each in their own way.

Naomi makes a new page in Dreamweaver (CS3) and places the long description on it. She uploads the photograph and the long description page to her website. On another new page she inserts the photo. Dreamweaver asks her to add both alternate text and a longdesc URI. She uploads this page to her website too. Then she tests the page to make sure it works as intended with Opera and the Firefox longdesc extension as well as IE8, which natively supports longdesc with the target of the attribute displayed as a tooltip.

Her friends visit her website. When they land on the page with the new photo each person is able to obtain content in the way that they prefer.
Use Case A photographer:
  1. Takes a photograph.
  2. Writes a long description of the photograph explaining what is visually evident.
  3. Makes a new page in Dreamweaver (CS3) and places the long description on it.
  4. Uploads the photograph and the long description to website.
  5. On a new photo page programmatically ties the photograph's long description to the photographic image with the longdesc attribute.
  6. Uploads new photo page.
  7. Tests to ensure that the long description is working properly.
Notes

Real world photo examples: Dhammadana, The Original Teaching of Buddha
Related photo examples: Marden Neighbourhood Plan, University of Minnesota Duluth (UMD), UMD lightbox photos.

7. Describing an Email Banner

Element Description
Number UC -07
Title Describe Email Banner
Goal Provide a long description of a banner image in a HTML weekly email newsletter.
Primary Actor Information Technology Professional
Stakeholders and Interests
  • Blind newsletter subscribers' interest is to be able to obtain the long description of banner image.
  • Sighted newsletter subscribers' interest is to be able to receive the visual content without redundancy or added visual noise.
  • Marketing department's interest is to ensure organization's design guidelines and branding requirements are met.
  • Additional people may have interest in obtaining the long description.
Constraints
  • The banner image must link to the department homepage from the email to comply with usability convention and organizational standards.
  • A forced visual encumbrance, a default visual indicator, or a long description provided in the email is unacceptable due to the organization's design guidelines and branding requirements. However, discoverability affordances are needed.
  • A long description provided in the email is unacceptable due to the fact that the email's format is a short digest.
  • A long description provided in the email is unacceptable due to the organization's design guidelines and branding requirements.
  • Accessing the long description cannot take the user away from the user's position in the email containing the image where the description was invoked as it would cause basic usability/accessibility failure.
  • The long description must programmatically tie the description to image for accessibility and provide clear, direct, proper semantics.
  • The long description should support structured markup to enable user functionality.
  • The long description must not be forced upon the blind user whether they want it or not. They must be able to control how they interact with the long description.
  • The blind user must be allowed direct access to the long description while simultaneously being allowed direct access to the link to the company home page for equal access.
  • The same banner description must be easily to reuse from issue to issue.
  • The solution must be easy to author and have supporting tools to author and test because author skill sets differ.
  • The solution should not be a bridging technology.
  • The solution must be backwards compatible.
Use Scenario

Arvid, an information technology professional, is tasked with producing a department HTML email newsletter. He is given a banner image from the marketing department for inclusion at the top of each issue.

The email is a short digest so the format does not lend itself to a long description. Even if it did, the organization's visual style guide and branding requirements will not allow a long description in the email itself or a visual indicator of a long description. The banner must be linked to the department's home page in each issue while at the same time a long description of the banner must be provided to blind screen reader users. The blind user needs direct access to the long description while simultaneously needing direct access to the link to the department's home page. The blind user will not want to be forced to listen to the description but will want an option to do so.

Arvid wants a quick and easy way to hide the descriptive text from sighted viewers and thinks about longdesc. He knows that the longdesc attribute is natively free from a visual encumbrance.

He also wants to be able to reuse the same long description text for each and every newsletter issue. He knows that the longdesc attribute would allow him to easily reuse a description with an absolute URI to separate document.

Because of these reasons Arvid decides to use longdesc.

So Arvid writes a long description of that banner image explaining what is visually evident. Using a WYSIWYG editor he places the long description of the banner on a web page and then uploads it to his department website (i.e. http://organization.org/dept/bannerdesc.html).

Using the same WYSIWYG editor he next crafts a HTML document for a new issue of the department's weekly newsletter. In that the weekly newsletter document he programmatically ties the banner's long description to the banner image with a longdesc attribute using an absolute URI (i.e. http://organization.org/dept/bannerdesc.html). He links the banner image with an absolute a href to take the email recipient to the department's home page URI (i.e. http://organization.org/dept/homepage.html).

Arvid creates a new message in Thunderbird and inserts the previously crafted HTML via Thunderbird's insert menu. He sends the email to the newsletter subscribers.

Now each week:

  • Blind newsletter subscribers are enabled to obtain the long description of of the banner.
  • Sighted newsletter subscribers are enabled to receive the visual content without redundancy or added visual noise.
  • The organization's design guidelines and branding requirements are met.
  • Arvid's workload is lightened as he is enabled to recycle the same description.
Use Case An information technology professional:
  1. Is given a banner image by the marketing department for inclusion at the top of his department's HTML monthly email newsletter.
    • Uploads the banner image to his department website (i.e. http://organization.org/dept/banner.jpg).
  3. Writes a long description of that banner image explaining what is visually evident.
    • Places the long description of the banner on a web page.
    • Uploads the banner long description web page to the department website (i.e. http://organization.org/dept/bannerdesc.html).
  5. Crafts a HTML document for a new issue of the department's weekly newsletter. In that document:
    • Programmatically ties the banner's long description to the banner image with a longdesc attribute using an absolute URI (i.e. http://organization.org/dept/bannerdesc.html).
    • Links the banner image with an absolute a href to take the email recipient to the department's home page URI (i.e. http://organization.org/dept/homepage.html).
  7. Creates a new message in Thunderbird and inserts the previously crafted HTML via Thunderbird's insert menu.
  8. Sends the email to the newsletter subscribers.
  9. Is enabled to recycle the same description (i.e. http://organization.org/dept/bannerdesc.html) in each issue of the newsletter.
Notes

Real world example HTML Newsletters: February 2011, March 2011, April 2011, May 2011, September 2011, October 2011, November 2011, December 2011, February 2012, March 2012, April 2012, May 2012, Summer 2012, all use the same long description.

8. Describing Illustrations

Element Description
Number UC -08
Title Describe Illustrations
Goal Provide long descriptions for Illustrations.
Primary Actor A group of librarians
Stakeholders and Interests
Constraints
Use Scenario

A group of librarians, is tasked with making a web site for a special library youth event. The illustrations for the web site are made for sighted users. However, they need:

  • To programmatically provide blind users long descriptions of the illustrations because not only is it accessibility law and library accessibility policy, some of the library patrons are blind well as one library staff member.
  • A quick and easy way to hide the redundant descriptive text from sighted viewers while being able to tie the image to the long description which accommodates blind users.
  • An HTML technique, as they do not have training in anything more than HTML. They do not know JavaScript, AJAX, or ARIA. They do not intend to learn it as it is not in their job description or the library's budget to learn it.
  • To be able to simultaneously use the long description text on not only "activity pages" but also on a common "materials needed for the whole event" page.

So they decide to use longdesc because it fulfills all of these requirements.

The group gets to work and creates web pages for each of the planned activities (i.e. http://library.org/event/mindgames.html, http://library.org/event/foodfights.html, http://library.org/event/whodunit.html, etcetera). They add illustrations for the various activities on each of those pages. Next they create long descriptions for the illustrations that need them to explain what is visually evident. Then they programmatically tie the illustrations to the illustrations' long description with longdesc.

Because the librarians have now written the long descriptions, those descriptions can be leveraged for reuse on the same illustrations which appear on other pages in the site. They do just that by creating a page for materials needed for the full event (e.g. http://library.org/event/allmaterials.html).

Now the library can reuse the illustrations and the long descriptions throughout this site as well as others. Blind library patrons' and staff member's interest are met as they are able to obtain the long description. Library's interest is met as state accessibility law and library accessibility policy are adhered to.
Use Case A group of librarians:
  1. Is charged with providing a website for a special youth event.
  2. Creates web pages to explain each of the planned craft and game activities (i.e. activity1.html, activity2.html, activity3.html).
    • Adds illustrations for various parts of the activities on each of those pages.
    • Creates long descriptions for each illustration that need explanation.
    • Programmatically ties the illustrations to the long illustrations' description.
  3. Creates one web page for all of the materials used in all of the activities (i.e. allmaterials.html).
    • Reuse some of the same illustrations on this page.
    • Reuse the same longdesc's on this page for each illustration that need explanation.
  4. Tests for functionality with various tools.
Notes

Real world example illustrations: Texas State Library
 The CSS Squirrel, the Lambda Theta Phi Latin Fraternity, and the University of Minnesota Duluth also use images in separate documents that share the same long description page. This technique is also used in the logo description use caseand the lightbox description use case as evidenced through examples in the wild,
Related illustration examples: Camera Obscura, Paris Web, Alienor

9a. Facilitating etext Image Descriptions

Element Description
Number UC -09a
Title Facilitate the description of e-text images
Goal Facilitate creation, storage, and retrieval of long descriptions for e-books, Digital Talking Books (DTBs) or other materials.
Primary Actor A director of an electronic-textbook repository.
Secondary Actor A trained volunteer describer.
Stakeholders and Interests
Constraints
  • The repository must allow for contribution and modification of image descriptions in a collaborative and moderated fashion, as the hosted descriptions will be living documents. Volunteers will be updating content on an on going basis.
  • The description should be in a separate document for efficiency. This allows for reuse of one long description in multiple venues. (i.e. multiple books).
  • Descriptions will be created by trained volunteers or professionals with specific subject-matter expertise.
  • The long description mechanism must be able to point to external sources that allow the full use of HTML as well as other markup languages, such as MathML or SVG because the some of the descriptions are already and will be written with these technologies. They are the most appropriate to describe the subject matter (i.e. mathematics).
  • The long description must programmatically tie the description to image for accessibility and provide clear, direct, proper semantics.
  • The long description should support structured markup to enable user functionality.
  • The description must not create a forced visual encumbrance as this would be redundant to most sighted users. However, discoverability affordances are needed.
  • Accessing the long description must not move the focus from the point on the page at which the image is visible, or where the description was invoked, as this would cause basic usability/accessibility failure.
  • The long description must not be forced upon the blind user whether they want it or not. They must be able to control how they interact with the long description.
  • Must adhere to e-text standards.
  • The solution should not be a bridging technology.
  • The solution must be backwards compatible.
Use Scenario

Bill, the director of a textbook repository, has a large collection of science and math related material. These textbooks contain vast numbers of copyright-free images, including charts, graphs, flow charts, scatter plots and complex pictures of biological and chemical processes.

Some of the books have images with long descriptions in the repository, but there are many images that do not yet have descriptions associated with them. In these cases, the books contain messages such as "No image description has been created for this image. Please contribute a description." Existing descriptions are written in plain text or in some cases make use of appropriate markup language.

Several requirements to facilitate the description of these e-text images exist.

Bill needs to ensure that the images are accessible to people with print disabilities. He is aware that following the Web Content Accessibility Guideline's (WCAG's) Technique H45: Using longdesc would provide compliance with an e-text accessibility standard that strongly recommends longdesc for long descriptions.

He doesn't have a big budget and contemplates crowdsourcing the task of writing the descriptions to trained volunteers and professional describers with specific subject-matter expertise. With this method people who know what they're doing could directly increase the accessibility of the collection. As the volunteers will not have web-developing skills, he needs a simple way for them to add descriptions.

Because it would be redundant to most sighted users, Bill needs a way to hide the descriptive text from sighted viewers while providing screenreader users the option to listen to the description if so desired. He knows that the longdesc attribute is natively free from a visual encumbrance and is recognized by major types of assistive technologies, like popular screen readers.

Reuse of a description in different situations is critical, as the same image will appear in multiple textbooks both on site and off site. He knows that the longdesc attribute would allow the efficient recycling of one description in multiple places with an absolute URI.

Current descriptions in the repository use the longdesc attribute. He does not want to waste time and effort redoing what has already been done correctly.

Because of these requirements and rationale Bill decides that longdesc is the best approach for delivering these descriptions. He arranges for a database system to be developed that programmatically ties an image with a long description via the longdesc attribute. After testing the system thoroughly, he determines that it meets the requirements of the repository.

With the new system in place, Bill asks Susan, an experienced and trained volunteer, to write long descriptions for images in a specific biology textbook. Susan writes the descriptions and when she is finished with her work, she notifies Bill.

As part of his standard quality-control process, Bill checks Susan's work by reviewing and spot-checking the descriptions with assistive technology himself, or by asking another member of his staff to do so. Bill then makes an indication in a database that the biology text contains images with long descriptions.

Now, not only are the descriptions available to users of this specific textbook, they are also available on-site and off-site for publishers, authors, educators or parents to reuse, reference, and apply remotely whenever and wherever the images are used in other materials.
Use Case

A director of an electronic-textbook repository is in charge of facilitating the creation, storage, and retrieval of image descriptions. The director:

  1. Procures a database system that:
    • Programmatically ties a single long description to an image while simultaneously allowing for reuse of that long description in multiple venues.
    • Makes long descriptions freely available to the community for modification, updating, editing, etc.
    • Is an open library so that anyone-- publishers, educators, authors, parents, students-- can reference the descriptions whenever and wherever the associated images are used and reused.
  3. Secures trained volunteers (e.g., crowdsourced) or professionals to write the long descriptions.
  4. Checks volunteers' work by reviewing and spot-checking the descriptions with assistive technology and browser extension himself, or by asking another member of his staff to do so.
Notes

Related e-mail: DIAGRAM project and image descriptions - Geoff Freed, February 25, 2011. To the HTML Co-Chairs: comments regarding longdesc - Geoff Freed, March 11, 2011.

Related initiatives: ObjectDescription, Webvisum, Fix the Web.

9b. Describing etext Images

Element Description
Number UC -09b
Title Describe etext Images
Goal

Provide long descriptions for a biology text book which is hosted in a repository for e-books, Digital Talking Books (DTBs) and other materials.
Primary Actor A volunteer describer (subject matter expert and technology novice)
Secondary Actor A director of an electronic-textbook repository.
Stakeholders and Interests
Constraints
Use Scenario

Susan, an experienced volunteer trained in writing image descriptions, is asked by Bill, a textbook-repository director to write descriptions for biology textbook images so that the book can be accessible to people with print disabilities. She is glad to help.

Susan follows the information contained in National Center for Accessible Media's "Effective Practices for Description of Science Content within Digital Talking Books" and writes a description for the first image in the book, which is a line graph. In one brief paragraph she summarizes the information conveyed in the graph; then, following the advice of the guidelines, she converts the point-by-point data into an accessible data table.

She saves the image description in the repository's library database system which automatically assigns it a URI and which associates and programmatically ties the description to the image via the longdesc attribute. Next the system automatically associates and programmatically ties the description to the image in all six books in the repository that includes that particular image. Susan is not a web developer; she doesn't need to be as the system handles all of these details.

After reviewing her work and verifying its accessibility with a screen reader, she repeats the process for all the other images in the book that require long descriptions.

Now, not only are the descriptions available to users of this specific textbook, they are also available on-site and off-site for publishers, authors, educators or parents to reuse, reference, and apply remotely whenever and wherever the images are used in other materials.
Use Case

A trained describer has been asked by the owner of a textbook repository to write image descriptions for a biology textbook. She:

  1. Carefully examines the images, researches the information that they convey.
  2. Writes descriptions using vocabulary appropriate for the textbook's audience.
  3. Saves the image description in the repository's library database system which automatically assigns it a URL and programmatically ties the description to image via the longdesc attribute.
  4. Tests for accessibility using assistive technology and with Firefox browser extension.
Notes

Related e-mail: DIAGRAM project and image descriptions - Geoff Freed, February 25, 2011.
Related references: Accessibility Crowdsourcing Initiatives.

10. Describing a Newspaper (Lightbox) Image

Element Description
Number UC-10
Title Describe Newspaper (Lightbox) Image
Goal Describe a lightbox type image of a newspaper's front page.
Primary Actor Journalist
Secondary Actor Web designer
Stakeholders and Interests
Constraints
  • Accessing the long description should not take the user away from the user's position in the document containing the image where the description was invoked, as it would cause basic usability/accessibility failure.
  • The long description must programmatically tie the description to image for accessibility and provide clear, direct, proper semantics.
  • The long description should support structured markup to enable user functionality.
  • The long description must not be forced upon the blind user whether they want it or not. They must be able to control how they interact with the long description.
  • The solution must be easy to author and have supporting tools to author and test because author skill sets differ.
Use Scenario

Bob, a journalist and Carl, a web designer are co-workers. They collaborate on a news article about a forgery. The article provides new information regarding the crime as well as information of same crime from years ago. As part of the historical information, they want to include an image of the old frontpage on the subject. It will provide a unique documentation of the scoop, which cannot be presented to sighted users by simply pointing to the old article. It will provide that demographic added value.

Bob and Carl add a rel="lightbox" link around a small image with a URL to an enlarged version of the image for a lightbox efffect, so that sighted users can read parts of old front page story and experience the look and feel of the old style newspaper page. It fills the entire screen without taking the user away from the new article. JavaScript is also added so that clicking the link simply enlarges the image instead of taking you to a new page.

However, this leads to a problem for blind users. When they activate the link, they only get a larger image, which provides no story text and no description of the unique old web page's look and feel.

Carl thinks about what Joe Clark wrote in his Access Manifesto. Joe said, "It simply is not the case that appearance is more important than accessibility. Nor is it less important. Neither is it a question of balancing the two, as if they were incompatible...appearance need not come at the wholesale expense of access, or vice-versa." Joe said that accessibility features are value-adding. Carl explains to Bob how a small amount of additional effort can make a big difference.

So they add a longdesc attribute with a URL pointing to a description page that provides the same information as the image. They make sure to let the longdesc link point to the fragment where the description starts, thereby jumping over links or other irrelevant content on that page. Of course, they also add relevant alt text.

Then they upload all of the files to the newspaper's website. They use Firefox's longdesc extension to the check the longdesc. Yes. It works.

Now Bob and Carl have added value to their work. It is not an either or proposition. Both sighted and unsighted audiences are served. Content is customized in accordance with user needs and capabilities.
Use Case

A journalist and web designer team

  1. Prepares an image of a picture of a newspaper front page in two sizes: small and full screen.
  2. Adds the small image to a new web page with a WYSIWYG editor. On that page:
    • Adds a rel="lightbox" link around the small image, with a URL to an enlarged version of the image
    • Adds JavaScript so that clicking the link simply enlarges the image instead of taking the user to a new page.
    • Adds a longdesc attribute with a URL pointing to a description page (longdesc="http://newspaper/oldarticledesc.html#startofdesc")
  3. Creates the HTML description page (oldarticledesc.html) which supplies text from the image and a description of its look and feel.
  4. Uploads to the newspaper's website the:
    • Small and large images
    • New article page
    • Description page
  5. Tests with various tools including Firefox's longdesc extension to ensure that the long description is working properly.
Notes

Example newspaper page were this technique could have been useful.

National Institute of Dental and Craniofacial Research uses longdesc and a separate invisible a href to go to a larger version of the image:

<a href="/NR/rdonlyres/5BCE4FD4-48C4-4272-BA70-E788F0F01FF4/19267/RangeFigWebsite1.jpg" 
 target=_blank>
  <img height=248 
  alt="Patterning of the neuroectoderm in sea urchin embryos - click to enlarge" 
  src="/NR/rdonlyres/5BCE4FD4-48C4-4272-BA70-E788F0F01FF4/19268/RangeFigWebsitethumb1.jpg" 
  width=400 
  longDesc=http://www.nidcr.nih.gov/Research/NIDCRLaboratories/DevelopmentalMechanisms/neuroectoderm-longdesc.html>
</a>

Additional real world images use the lightbox technique:

<a href="images/big/checkin.jpg" rel="lightbox" title="Lightbox Image">
  <img src="images/checkin.jpg" id="checkin1"
   alt="Annotated Lab Check In System Screenshot" 
   longdesc="images/ld/checkin.html#content_frame" 
   width="200"
   height="149" />
</a>

A related light box implementation is easyALBUM. It uses the following markup to provide a link to a larger image and longdesc to provide a long description of the image:

<a title="19th Century - Oil on wood"
 href="http://tjkdesign.com/articles/gallery/img/img/002.jpg">
 <img src="img/002T.jpg"
  alt="A necessary Skill"    
  longdesc="002LD.asp">  
</a>

Real world photo albums use longdesc for lightbox images.

Guidelines, Laws, Policy, and Standards

Guidelines

Laws

Policy

Standards

Tools

Browsers

Opera, Firefox, Chromium, and Internet Explorer all support longdesc DOM reflection.

Assistive Technology

The following assistive technology informs users that an image has a long description, at which point the user has the option of reading the description or skipping it.

Authoring Tools

The following authoring tools support the longdesc attribute.

Online Tutorials and Documentation

Books

Accessibility Crowdsourcing Initiatives

Accessibility Crowdsourcing Initiatives include:

Related Articles and Blog Posts

Other Studies

HTML5 Specification

HTML5 Image Description Specification

Bugs

Findings

The longdesc attribute:

Acknowledgments

Thanks to Artur Ortega, Catherine Roy, Charles McCathieNevile, Cliff Tyllick, Christophe Strobbe, Dan Conley, Daniel Glazman, Debi Orton, Denis Boudreau, Dirk Ginader, Everett Zufelt, Geoff Freed, Gregory Rosmaita, James Nurthen, Jason White, John Foliot, John Middleton, Karl Groves, Keith Parks, Leif Halvard Silli, Martin Kliehm, Michael Fields, Monika Trebo, Philip TAYLOR, Robert Burns, Roger Johansson, Sarah Bourne, Shelley Powers, Stephane Deschamps, Steve Faulkner, and Vlad Alexander.