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: The longdesc attribute is the sole mechanism used for long description in this sample. On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page.

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.

Accessibilité du Web (Canada)

Markup:
<img 
 longdesc="longdesc.html" 
 src="ui/incapacites-selon-age.gif" 
 width="550" 
 alt="Graphique presentant les taux d'incapacitZ selon les groupes dages
 et le sexe, Canada, en 2001 et 2006." />

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

Alpen (Germany)

Markup:

<img 
src="/c12572b9002fb9c9/files/logo.gif/$file/logo.gif?openelement"  
 alt="Alpen - einfach einzigartig"
 longdesc="/C12572B9002FB9C9/longdesc/logo.gif?opendocument" 
 class="fit" />
<span class="hideme"> . 
 <a href="/C12572B9002FB9C9/longdesc/logo.gif?opendocument"   
  title="Ergänzende Beschreibung zum Logo">d
 </a>
</span>

Note: Also uses an invisible D link. CSS: position:absolute;top:-1000em;left:-1000em;height:1px;width:1px. 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 be simply longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

Anblik

Markup:
<a href="http://www.anblik.com/" title="Anblik Logo" 
 class="border_none">
  <img src="http://www.anblik.com/media/anblik/general/logo.png" 
   alt="Anblik Logo"
   longdesc="http://www.anblik.com/page/logo-long-description.html" />
</a>

Note: The longdesc attribute is the sole mechanism used for long description in this sample. On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page.

Axel Schäfer, SPD Abgeordneter im Deutschen Bundestag für Bochum

Markup:
<img src="/img/485x323/2024.jpg" 
 height="323" width="485"
 alt="Euro-MŸnze" 
 longdesc="/img/longdesc/2024.html" />

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

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

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.

Center for the Study of Religion and American Culture

Markup:
<img src="Images/homepage/header.gif"   
 width="250" height="250"   
 alt="R &amp; A C - Religion and American Culture"  
 longdesc="longdesc.html#header">  

<a href="longdesc.html#header">   
 <img src="Images/dlink.gif"    
  width="1" height="1" border="0"    
  alt="D" 
  longdesc="">  
</a>

Note: Uses an invisible redundant gif image link. Logo images on second level pages use an a href go to the home page throughout the site.

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

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.

Dayton Art Institute

The Dayton Art Institute uses/used longdesc throughout thier gallery tours.

Note: Dayton Art Institute's accessart site uses/used the longdesc for the long description and an a href to go to a different "dialogue with the director" page. The longdesc attribute was used for all images in the tours. (Site seems to be down. Museum Highlights From the WayBack Machine and Long Description: Joy of Waters 1917 from the Wayback Machine).

Sample markup:
<A 
 HREF="object.cfm?TT=gt&TN=mh&ID=50&COM=dd" 
 TITLE="JOY OF THE WATERS">
  <IMG SRC="thumbs/50.jpg" ALT = "JOY OF THE WATERS" WIDTH = "120"
   HEIGHT="240" BORDER="2" HSPACE="10"
   LONGDESC="object.cfm?TT=gt&TN=mh&ID=50&COM=IM">
</A>

 

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

Digital Inspiration

Sample markup:
<img alt="Comic strip depicting how a browser works."
 src="http://img.labnol.org/files/how_internet_works.jpg"
 width="960" 
 longdesc="http://img.labnol.org/files/comic_description.html"
 height="604"/>

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

Division of Cancer Epidemiology & Genetics, National Cancer Institute

Sample markup:
<img src="images/thyroidcancer_figure.jpg"
 longdesc="710_figthyroidcancer.shtml"
 alt="Figure 1" 
 width="519" height="542" />

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

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.

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 Motor Carrier Safety Administration

Markup:
<IMG height=864 src="../images/flowchart.gif" 
 width=538 border=1 
 longDesc=longdesc.htm>
<A class=white 
href="longdesc.htm">D</A>

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

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.

Fundación Sidar - Acceso Universal (Spain)

Markup:
<a href="galeria/index.php">
 <img src="galeria/lyc/lyc_01.jpg" 
   alt="Lleva a Galer&iacute;a Virtual de la Fundaci&oacute;n Sidar." 
   width="219" height="300" 
   class="galery" 
   longdesc="galeria/index.php" 
   title="Galer&iacute;a de arte de la Fundaci&oacute;n Sidar" /></a>

<a href="http://www.sidar.org/index.php" 
 accesskey="1" title="Sidar">
 <img src="http://www.sidar.org/graf/logo.gif" 
  width="118" height="65" 
  alt="Logotipo de SIDAR, lleva a su p&aacute;gina principal" 
  title="Sidar, principal." 
  longdesc="../acces/descrip.php#logo" />
</a>

Note: For the logo on pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page. The gallery photos on the home page rotate.

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.

Griffith University

Markup:
<img class="center"  
 alt="annual water consumption and cost" 
 src="http://www.griffith.edu.au/__data/assets/image/0006/171861/annual-water-consumption.jpg"
 longdesc="http://www.griffith.edu.au/sustainability/sustainability-in-action/annual-water-consumption" />

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

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.

haecceitas (UK)

Markup:
<a accesskey="h" 
 href="index.jsp">
 <img height="67" width="180" border="0" 
  alt="haecceitas" 
  longdesc="longdesc.jsp" 
  src="images/pdaHaecceitas.gif">
</a>

Note: The longdesc attribute is the sole mechanism used for long description in this sample. On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page.

Hawaii Public Schools

Markup:
<a 
href="06appendix_a_asthmaflowchartlongdesc.htm">
 <img src="images/appendixa_asthmaflowchart.png" 
  alt="Asthma/Wheezing/Difficulty Breathing flowchart" width="554" 
  height="617" border="0"
   longdesc="06appendix_a_flowchart.htm">
</a>

Note: Uses longdesc and 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.

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.

IBM Corporation

Sample Markup:
<img src="rzahh505.gif"   
  longdesc="rzahh505.htm"   
  alt="Standard and proxy connections" />

Note: Redundant non-programmatic determinable link text for the long descriptions are "below the fold" in the endnotes.

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: Uses an invisible redundant gif image link. On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page.

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 }

Korea Employment Information Service (South Korea)

Markup:

<img src="/images/text/int/ind/e_lostPayProcess02.gif" 
 longdesc="HPINT2440L_longdesc.jsp" 
 alt="실업급여
 지급 
 ì ˆì°¨ 
 프로세스"
 />

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

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.

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:

Lexdis (UK)

Markup:
<img src="/images/home/lexdis.jpg" 
 alt="Lexdis Sitemap" 
 longdesc="http://lexdis.ecs.soton.ac.uk/sitemapdesc" />

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

Mecanizados EKIMEN

Markup:
<img id="img_mapaContacto" 
  src="http://maps.google.com/staticmap?center=43.280033,   
-2.248678&amp;zoom=14&amp;size=480x480&amp;markers=43.280033,-2.248678,red&amp;   
key=ABQIAAAAu5ZmRsj_Rg5TWQ-bz7zk8hRij1H_DkKKQjiZP1Vr0bqiR6P1-xSRAT2T712n9i0ThQn4_CEgmRH0ew" 
  width="480" height="480" 
  alt="Mapa de situaci&oacute;n" 
  longdesc="ctrl_contacto.php?accion=longdesc" />

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 Institutes of Health (United States)

The United States National Institutes of Health uses longdesc attribute throughout their Curriculum Supplement Series of teacher guides. A few samples of many:

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.

Natural Resources Canada

Sample markup:
<img  
 src="http://atlas.nrcan.gc.ca/site/english/maps/climatechange/figure_1.jpg"
 alt="Line Graphs of Temperature and Atmospheric CO2 Concentration Over 
  the Past 400 000 Years (from the Vostok ice core)" 
 title="Line Graphs of Temperature and Atmospheric CO2 Concentration 
   Over the Past 400 000 Years (from the Vostok ice core)" 
 height="507" width="640" 
 longdesc="http://atlas.nrcan.gc.ca/site/english/maps/climatechange/figure_1.jpg/image_longdesc_view"
 />

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

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 src="IMG/jpg/nuages.jpg" width="800" 
 height="600" alt="Des nuages"
 longdesc="/longdesc.php?id_document=205" />

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.

Public Service Commission of Canada

Sample markup:
<a href="long-desc/chart-eng.htm">
 <img 
  src="img/flow-eng.gif"
  alt="The Structured Interview Process" 
  width="498" height="658" 
  longdesc="long-desc/chart-eng.htm" />
</a>

Note: Uses longdesc and redundant invisible a href.

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.

Research and Innovative Technology Administration (RITA) 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: All of the logos in this site link to the same longdesc. Markup uses longdesc and a redundant invisible spacer .gif link. Because longdesc it is not yet supported by some web browsers, some sites provide a 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: All of the logos in this site link to the same longdesc. longdesc attribute is the sole mechanism used for long description in this sample. On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page.

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

Snowdon Award Scheme (UK)

Markup:
<img id="logo" src="../images/logo.gif" 
 alt="The Snowdon Award Scheme"  title="The Snowdon Award Scheme" 
 longdesc="longdesc.asp#logo" 
 width="166" height="86" />
<a href="longdesc.asp#logo" class="hidden">D
</a>

Note: Also uses an invisible D link via CSS .hidden {display:none;}. 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 be simply longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

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

Statistics Canada

Sample Markup:
<img src="c110718c.gif" 
 alt="Foreign portfolio investment in Canadian securities" 
 title="Foreign portfolio investment in Canadian securities" 
 longdesc="longdesc-c110718c.htm" />
<p class="navaid">
 <a 
 href="longdesc-c110718c.htm">Chart description: Foreign portfolio investment in Canadian securities
 </a>
</p>

Note: This site also uses invisible link text: CSS:
.navaid {height:0; width: 0; overflow: hidden; float: right; font-size: 0; position: absolute; top: -100px;}.
Sole text link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

Statistique Canada

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 be simply 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.

Telsa Gwynne

"Note that the pictures no longer exist. (You can get an idea of them from the file containing the long descriptions, which does still exist!)" - Telsa Gwynne: Iceland photographs

Sample markup:
<img src="Pics/ugly-duck-small.jpg" 
height="151" width="200" 
alt=" [pic of Telsa outside the Ugly Duckling] " 
longdesc="ld-iceland-pics.html#ld-ugly-duck">

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

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 be simply longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

The Organisation Development Company (New Zealand)

Markup:
<img width="155" height="209" class="left" 
 longdesc="longdesc.html" title="Diana Jones" 
 alt="Diana Jones" src="../images/3diana.jpg">

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

University of Texas at Austin

Markup:
<img src="images/hwymap.jpg" 
 alt="interstates on a map of the US. longdesc available"
 longdesc="interstate.html" />

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

University of Minnesota Duluth

Markup:
<a title="Select for larger image" class="photo" 
 href="http://www.d.umn.edu/itss/news/2011/images/adam_detailed.jpg">
 <img class="shadow staff"
  src="http://www.d.umn.edu/itss/news/2011/images/adam/adam_smaller.jpg"
  width="283" height="368" 
  alt="Adam Moren"
  longdesc="http://www.d.umn.edu/itss/news/2011/ld/adam.html#content_frame"/>
</a>

Note: The longdesc attribute is the sole mechanism used for long description in this sample. Uses an invisible a href to go to 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.

Virginia Department of Environmental Quality

Markup:
<img src="/vanaturally/guide/images/minrlpro.gif" 
 width="386" height="265" 
 alt="Chart: Total value of Mineral Production in Virginia, 1970-1997" 
 longdesc="mineral.chart.description.html">

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

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.

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&uuml;r Europ&auml;ische 
  Wirtschaftsforschung"
  longdesc="/longdesc/logo.html" />
</a>
<!--googleoff: all-->
<span class="DisplayNone"> [ 
  <a href="/longdesc/logo.html" title="Beschreibung 
  f&uuml;r die Grafik Logo ZEW aufrufen">D
  </a>] 

</span>

Note: On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access to the link to the site's home page. Also uses an invisible D link via CSS .DisplayNone {display: none; color: #000; background: #FFF;. 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 be simply longdesc. Sole "d" link approaches don't semantically or programmatically tie the description to image, whereas a longdesc does.

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:

Austrialian Government: Disability Services Census

Markup:
<p>
 <a 
  href="longdesc/3_2.htm">Description of Figure 3.2
 </a>
</p>

<p>
 <img src="images/ch3/fig3_2.gif" 
  alt="Figure 3.2: State distribution of disability service outlet type 
   across Australia, 2006&ndash;07" 
  width="500" height="405"
  longdesc="longdesc/3_2.htm" />
</p>

Note:

Austrialian Government: Volunteering in Australia

Sample markup:
<p>
 <img src="images/wa01.gif" 
  alt="Graph 1" 
  width="442" height="150" 
  longdesc="longdesc/wa01.htm">
 <br>
 <a href="longdesc/wa01.htm" class="small">Description of WA Graph 1
 </a>
</p>

Note:

Canada's Department of Justice

Markup:
<img src="images/paa-aap-eng.jpg"
 longdesc="longdesc/paa-aap.html" 
 alt="Department of Justice Program Activity Architecture" />
<p class="alignCenter">
 <a title="Department of Justice Program Activity Architecture" 
  href="longdesc/paa-aap.html">[Description]
 </a>

Note:

Centers for Disease Control and Prevention (CDC)

The Centers for Disease Control use longdesc on images in a smoking and tobacco use analyisis 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:

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="ëÂå^é‘çÇë¨í¥é‘éûìIãRò©ï‹ñ@ê‡ñæö§ï–"
 src="/site/tcg/public/MMO/dot/Dra_bike/ñ‘ï≈5.5.jpg"
 complete="complete"
longdesc="GIPDSD/xslGip/xslExport/11700A/DRA_å?í
ã«é©çsé‘ñ‘_APî≈å^/longdesc/5_5.html"
  mmoid="1209144"/>
</P>
<A href="GIPDSD/xslGip/xslExport/11700A/DRA_å?í
ã«é©çsé‘ñ‘_APî≈å^/longdesc/5_5.html">Åô
è⁄ç◊ê‡ñæ
</A>

Note:

Elections Canada

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:

Financial Transactions and Reports Analysis Centre of Canada

Sample Markup:
<img src="images/2010-07/fig1-eng.gif" 
 alt="The following chart illustrates the suspected money laundering scheme." 
 width="590" height="405" 
 longdesc="longdesc/2010-07-longdesc-eng.asp?figure=1" 
 id="fig1" />

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:

IDCnet: Inclusive Design Curriculum Network

Sample markup:
<p>

 <a id="FigureUsabilityPyramid" 
name="FigureUsabilityPyramid">
  <img 
   alt="The usability pyramid" height="275" 
   longdesc="IDCnet_D2.1_longdesc.html#Figure1" 
   src="/images/d2.1_image1.gif" width="477" />
 </a>
</p>
<p>
 <a href="IDCnet_D2.1_longdesc.html#Figure1" 
  title="The usability pyramid: long description">Figure 1: The 
  usability pyramid</a></p>

<p>

Note:

Indian and Northern Affairs Canada

Markup:
<a href="s2map1-eng.html"> 
 <img src="./images/s2map1-eng.gif" 
  width="560" height="424" 
  alt="Modern Treaties"  
  title="Modern Treaties" 
  longdesc="s2map1-eng.html" />

</a>  
<span class="mrCap">
 <a href="s2map1-eng.html#map" 
  title="Text description of the Modern Treaties Map">Text description of this chart
 </a> is available on a separate page.
</span>

Note:

Industry Canada

Markup:
<a href="03077.html#fig1"> 
 <img src="../vwimages/Language_Industry_Initiative-Fig1-eng.jpg/$file/Language_Industry_Initiative-Fig1-eng.jpg" 
  alt="Figure 1" title="Figure 1" 
  longdesc="03077.html#fig1" />
<br />Long description  for figure 1
</a>

Note: Also includes an invisible a link.

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" />
<!-- other markup --> 
<a href="Song.aspx"   
 title="군민ì˜ë…¸ëž˜ í…스트 화면" 
 tabindex="97">   
 <img 
 src="/images/open_content/administrative/organization/local_song/text.png"
  alt="êµ°ë¯¼ì˜ ë…¸ëž˜ í…스트 화면"/> 

</a>

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 Property Administration Office in Central Taiwan

Markup:
<img 
 alt="ä½ç½®åœ–"
 longdesc="http://www.npbmto.gov.tw/NPBO_C/Web/LongDesc.php?Text=LocateMapC"
 src="Introduct.php_files/office.jpg" width="550">
<a 
 href="http://www.npbmto.gov.tw/NPBO_C/Web/LongDesc.php?Text=LocateMapC" 
 target="_blank">本處ä½ç½®åœ–詳細說明
</a>

Note:

National Gang Center

Markup:
<img 
 src="/Content/Images/Graphics/Graphs/gangChart_estnumbergangs.jpg"    
 width="498" height="344"    
 alt="Estimated Number of Gangs, 1996-2007 Bar Chart" 
 longdesc="/Content/HTML/Survey-Analysis/longdesc/gangChart_estnumbergangs.htm" /> 
<a 
 href="/Content/HTML/Survey-Analysis/longdesc/gangChart_estnumbergangs.htm" 
 title="Text Description of Estimated Number of Gangs, 1996-2007 Bar Chart"
 target="_blank">[Text Description] 
</a>

Note:

New Zealand Department of Labor

Markup:
<p>
 <a 
  href="/actreview/recommendations/imm-bill/chart1-large.asp">
  <img src="/actreview/recommendations/imm-bill/chart1-small.gif"
   alt="Chart one Ð the proposed process for streamlining refugee, protection, 
    and humanitarian appeals"
   width="506"
   height="333"
   border="0"
   longdesc="/actreview/recommendations/imm-bill/chart1-desc.asp">

 </a> 
</p>
<p>
 <a href="chart1-desc.asp">Long description of Chart One
 </a> 
</p>

Note:

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&Ccedil;&fnof;&cent;IEEE1394&ecirc;&frasl;&euml;&plusmn;HDD"

 longdesc="longdesc/img_ieee1394_usb_hard.htm" /> [

<a href="longdesc/img_ieee1394_usb_hard.htm"
 title="&auml;O&iuml;tUSB2.0CD-R/RW&Ccedil;&fnof;&cent;IEEE1394&ecirc;&frasl;&euml;&plusmn;HDD&Ccedil;&Atilde;&Eacute;C&Eacute;&Aring;&Aring;[&Eacute;W&ecirc;}&Ccedil;&Atilde;&ecirc;&Dagger;&ntilde;&aelig;"&gt;&egrave;&frasl;&ccedil;&loz;1

</a>]

Note:

Psychosocial Impact of Assistive Devices Scale (PIADS)

Markup:
<img src="../canfreqcounts/ns-freq-counts.gif" 
 alt="A image of Nova Scotia Frequency Counts" 
 width="491" height="296"
 longdesc="../112/descriptions/ns_freq_count_longdesc.html">
<p align="center" class="style20">
 <a href="../112/descriptions/ns_freq_count_longdesc1.2.html" 
  title="Link To Description File">Click for long description of above image
 </a> 
</p>

Note:

Public Works and Government Services Canada

Markup:
<img src="../images/can-info-b.JPG" 
 alt="Image of Part B of the Direct Deposit Enrollment Request in Canada" 
 longdesc="/recgen/txt/can-info-ld-eng.html">
<br />
<a href="/recgen/txt/can-info-ld-eng.html" 
  title="Long description of Part B Image - 
  Program Identification of the Direct Deposit Enrollment Request in Canada">
  [Long description of Part B Image - Program Identification]
</a>

Note:

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:

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:

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.

York University (Canada)

Sample markup:
<p>

 <img src="images/active-learning.gif" 
  alt="A holistic view of active learning"
  longdesc="firstclass-gainmost-longdesc.html" 
  width="355" height="212" />
</p>
<p>
 <a href="firstclass-gainmost-longdesc.html">Long 
description of this diagram 
 </a>
</p>

Note:

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 be simply 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.

A-Prompt

Markup:
<a href="http://aprompt.snow.utoronto.ca" title="Link
 to A-Prompt site"> 
 <img src="images/aprompt.gif" 
  alt="A-Prompt Version 1.0.5 checked. WAI level 'A'"
  longdesc="http://aprompt.snow.utoronto.ca/Icon-LONGDESC.html"
  width="102" height="32" border="0" />
</a>
<a 
href="http://aprompt.snow.utoronto.ca/Icon-LONGDESC.html">d 
</a>

Note: On pages within this site the longdesc attribute provides direct access to the long description while the a href provides direct access via the link to the site's home page.

Canadian Grain Commission

Markup:
<img src="images/diagram02-e.gif"
  alt="A bar chart shows time and temperature effects in relation to 
   insect growth activity or death."
  width="300" height="162"    
  longdesc="chart-diagramme-eng.htm" /> 
<a href="chart-diagramme-eng.htm" title="Table representation of 
the bar chart.">[D] 
</a>

Note:

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

Dibbling.org

Markup:
<img id="top-pic" 
 src="main-images/cyclamen.png" 
 alt="" width="150" height="175"  
 longdesc="descriptions/quote-image.html" />
<a href="descriptions/quote-image.html" 
 title="Description of the cyclamen">[D]
</a>

Note:

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:

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:

Hamilton College

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:

Escola de Todos (Portuguese)

Markup:
<h2 id="logo">
 <img src="images/edt_logo2.jpg" 
  width="770" height="228" 
  alt="Escola de Todos." title="Escola de Todos." 
  longdesc="pt/descr-logo.php" />
</h2>
<p class="descr-logo">[
 <a href="pt/descr-logo.php"
 title="Descrição detalhada da logomarca.">
 D 
</a>]
</p>

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:

Lusophone countries - Convention on the Rights of Persons with Disabilities (Portuguese)

Markup:
<div id="logo">
 <img src="img/topo.jpg" 
  width="770" 
  height="200" 
  alt="Encontro dos Pa&iacute;ses Lus&oacute;fonos" 
  title="Encontro dos Pa&iacute;ses Lus&oacute;fonos" 
  longdesc="descricao.php" />

 <span id="d-link">[ 
  <a href="descricao.php" 
  title="Descri&ccedil;&atilde;o da Imagem para pessoas 
  com defici&ecirc;ncia visual.">D
  </a> ]
 </span> 
</div>

Note:

Memphis Center for Independent Living

Markup:
<img ALIGN="center" 
 SRC="../graph/1bfms98.gif" 
 longdesc="../longdesc.htm#bfm98-1" 
 ALT="Bargraph: Making reservations and customer service" 
 width="523" height="365">
<a 
 href="../longdesc.htm#bfm98-1">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:

Ministère de la Culture et de la Communication

The Ministere de la Culture et de la Communication site has many more longdesc attributes used throughout.

Sample markup:
<img 
 src="../photos/papeteriehebert/MHR54_991600717ZA_P.JPG" 
 alt="Atelier (photo CRMH)"  
 width="400" height="263" 
 longdesc="longdesc.php?img_id=1" />

<a 
 href="longdesc.php?img_id=1">[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 for the Dissemination of Disability Research

The National Center for the Dissemination of Disability Research site has many more longdesc attributes used throughout.

Sample markup:
<span style="font-size:x-small">
 <a href="figure1.html">D1
 </a> [Select image to enlarge / return]
</span>
<br>
<a href="images/fig1_800x673.jpg" 
  title="Figure 1 - Click to enlarge/close" 
  class="thickbox">

  <img src="images/fig1_sm500x421.jpg" 
    alt="Figure 1: Effectiveness of Interventions to Reduce Teenage 
     Pregnancy in Canada and the United States " 
    longdesc="figure1.html">
</a>

Note:

National Center on Birth Defects and Developmental Disabilities, (Branch of CDC)

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: The invitation image links to the invitation form.

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:

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.

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:

Treasury Board of Canada Secretariat, Reports on Plans and Priorities

Sample markup:
<p>
 <img src="images/mandate-mandat-eng.jpg" 
  alt="Chart 1 Performance management framework"  
  longdesc="longdesc/graphic-graphique1-eng.html" />
</p> 
<p class="alignCenter">
 <a href="longdesc/graphic-graphique1-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. 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; }

U.S. Social Security Administration

Markup:
<a href="longdesc/chart1_run593_ld.html">
 <img id="" src="Chart1_run593.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_run593_ld.html">
</a>

Note:

Longdesc Examples with On-Page Text Via Anchor

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.

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 infomation 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
  • Blind user's interest is to be able to obtain the long description.
  • Marketing department's interest is to ensure company design guidelines and branding requirements are met.
Constraints
  • The logo image must link to the homepage from all pages due to standard usability convention. Users expect a logo to be a link to a site's home page.
  • A forced visual encumbrance, a default visual indicator, or a long description 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 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 proper semantics.
  • 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.
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 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 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 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.
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.
Notes

Real world example logos: AccessAbility SIG, Alpen, anblik, Center for the Study of Religion and American Culture, Fundacion Sidar, haecceitas, Indiana University-Purdue University Indianapolis Common Core Curriculum, Santa Barbara Public Library, Securian, tech.burningbird.net, ZEW

Rebuttal to logo use case comments

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 Blind user's interest is to be able to obtain the long description.
Constraints
  • A default visual indicator of the long description on-screen is unacceptable due to the author's aesthetic principles.
  • A forced visual encumbrance of the long description on-screen is unacceptable due to the author's aesthetic principles.
  • Accessing the long description cannot 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 proper semantics.
  • The long description must 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.
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. 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.
  3. Programmatically ties the cartoon's image to the long cartoon's description.
Notes

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

Rebuttal to cartoon use case comments

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
  • Blind user's interest is to be able to obtain the long description.
  • The gallery's marketing department's interest is to ensure gallery design guidelines and branding requirements are met.
Constraints
  • Direct, dual, programmatic access to both a long description and to the larger version of an image from a thumbnail image, in order to accommodate both blind and sighted users needs.
  • A default visual encumbrance of the long description on-screen is unacceptable due to artistic requirements.
  • The long description must programmatically tie the description to image for accessibility and provide proper semantics.
  • The small thumbnail image must link to larger image for sighted users to see more detail.
  • Accessing the long description cannot 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 not be forced upon the blind user whether they want it or not.
  • Ability to reuse to the same text for both the large and thumbnail image for authoring efficiency.
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 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.
  6. Links each small image with an href to a larger image that takes sighted users to the larger image.
Notes

Real world example gallery: Dhammadana, The Original Teaching of Buddha
Related example: Spotlight On, Dayton Art Institute (The Dayton site seems to be down. Last retrived: Summer 2011. It used the longdesc for the long description and an a href to go to a different "dialogue with the director " page. The longdesc attribute was used for all images in the tours.)

Rebuttal to artwork use case comments

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 Blind user's interest is to be able to obtain the long description.
Constraints
  • Long description text provided on the same page is unacceptable as it would be redundant to 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 proper semantics.
  • 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.
Use Scenario

A large 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 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 because:

  • Aria-describedby is read aloud without any user intervention, forcing the screen reader user to listen to it each time they encounter the image whether they want to or not. The user would not able to control how they interact with the long description.
  • As aria-describedby is limited to text that appears in the same document as the image being described, its use would add page weight inhibiting performance and slowing pages.

These are not problems with longdesc.It provides user choice and leaner code overall - as http transport is on demand, resulting in smaller, faster pages, and reduced bandwidth consumption.

The team makes the decision to programmatically tie each long description to each image via 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.
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. Provides a redundant link to the long description.
Notes

Real world example screenshots: A11y Bugs Project, Object Description, Oracle, Rebuilding The Web
Related screenshots examples: IBM Corporation [IBM note], My Opera (no forced visual encumbrance)

Rebuttal to Screenshots use case comments

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
  • Blind users' interest is to be able to obtain the long description of the image.
  • Sighted Users' interest is to avoid information overload of redundant information.
Constraints
  • Accessing the long description cannot 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 proper semantics.
  • 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.
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. 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 are curious.

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.
  5. Tests to ensure that the long description is working properly.
Notes

Real world example chart: Accessibility Task Force Bug Comparisons
Related real world example charts: Accessibilité du Web, Commonwealth of Massachusetts, Federal Motor Carrier Safety Administration, Environment Canada, Financial Transactions and Reports Analysis Centre of Canada, Griffith University, Hawaii Public Schools, Korea Employment Information Service, 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, Natural Resources Canada, Public Service Commission of Canada, Research and Innovative Technology Administration / US Department of Transportation, Statistics Canada, Statistique Canada, U.S. Department of Health and Human Services, San Diego University

Rebuttal to Chart use case comments

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
  • Blind user's interest is to be able to obtain the long description of photograph.
  • Sighted user's interest is to be able to receive the visual content without redundancy or added visual noise.
Constraints
  • Customization of content in accordance with user needs and capabilities.
  • Accessing the long description cannot 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 proper semantics.
  • 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.
Use Scenario

Naomi, a photographer, takes a photograph. She has a web site and uses a WYSIWYG editor usually Dreamweaver.

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

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 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: Axel Schäfer, SPD Abgeordneter im Deutschen Bundestag für Bochum, nota-ben, Snowdon Award Scheme, The Organisation Development Company, University of Minnesota Duluth

Rebuttal to Photograph use case comments

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.
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.
  • 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 proper semantics.
  • 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.
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 easily reuse his long description text for each newsletter issue. He knows that the longdesc attribute would allow him to reuse a description with an absolute URI.

Because of these reasons Arvid decides to use longdesc.

So Arvid writes a long description of that banner image explaining what is visually evident. 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).

Next he 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, November 2011, December 2011, February 2012, all use the same long description.

Rebuttal to Email Banner use case comments

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
  • Blind patrons' and staff member's interest is to be able to obtain the long description.
  • Library's interest is to adhere to State accessibility law and library accessibility policy.
Constraints
  • Must use a basic HTML technique as that is the employees' skill set. Author skill sets differ. Library's budget does not have money for employees to be trained in other techniques (ARIA, CSS, JavaScript etc).
  • Ability for an image to appear on two pages in the site while at the same time linking to one longdesc page for efficiency.
  • A forced visual encumbrance of the long descriptions on-screen is unacceptable as it would be redundant to sighted users.
  • State law and library policy must be complied with.
  • Accessing the long description cannot 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 proper semantics.
  • 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.
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.

Rebuttal to Illustrations use case comments
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.
Notes

Real world example illustrations: Texas State Library
CSS Squirrel also uses images in separate documents that share the same long description page.
Related illustration examples: Camera Obscura, Paris Web

Rebuttal to Illustrations use case comments

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
  • Blind person's interest is to obtain long image descriptions.
  • Describer's interest is to provide long image descriptions.
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.
  • 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.
  • The long description mechanism must programmatically tie a single long description to an image while simultaneously allowing for reuse of that one long description in multiple venues. (i.e. multiple books).
  • The description must not create a forced visual encumbrance as this would be redundant to sighted users.
  • The long description mechanism must allow maintaining and updating existing descriptions that utilize the longdesc attribute.
  • 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 user. The user must be able to choose to hear the description or otherwise interact with it, or to ignore the description.
  • Must adhere to e-text standards.
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 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 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, Social Accessibility Project, a utility that enables volunteers to make Web pages accessible to the visually impaired.

Comments on Accessibility of Google Print and Google's Library Project (PDF) / Comments on Accessibility of Google Print and Google's Library Project (Doc) by Jim Fruchterman.

Rebuttal to etext Image Descriptions use case comments

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 trained volunteer describer.
Secondary Actor A director of an electronic-textbook repository.
Stakeholders and Interests
  • Blind person's interest is to obtain long image descriptions.
  • Publisher/author/educator/parent interest is to have access to a hosted library of accessible image descriptions.
Constraints
  • Volunteers possess specific subject-matter expertise. ARIA, CSS, JavaScript, etc., are not in their skill set.
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.
Notes

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

Rebuttal to etext Image Descriptions use case comments

10. Describing a Newspaper Image

Element Description
Number UC-10
Title Describe Newspaper Image
Goal Describe a lightbox type image of a newspaper's front page.
Primary Actor Journalist
Secondary Actor Web designer
Stakeholders and Interests
  • Blind person's interest is to access to the image's content while not being disturbed by a link which only links to a larger version of it.
  • Sighted user's interest is full access to image content in the form of larger image (but may also be interested in access to a textual version and/or identification of the image, if the browser supports longdesc)
Constraints
  • Customization of content in accordance with user needs and capabilities.
  • 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 proper semantics.
  • The long description must not be forced upon the user. The user must be able to choose to hear the description or otherwise interact with it, or to ignore the description.
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.

Bob and Carl add a 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 the old front page story in it's entirety from an 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 Opera and Firefox's longdesc and longdesk extension tools to the check the longdesc. They also test with the new TellMeMore Opera extension. Yes. It works. Plus these tools also give everyone access to longdesc content if they actually are curious.

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. On that page:
    • Adds a 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 the 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 to ensure that the long description is working properly.
Notes

A related 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>

Example newspaper page were this technique could have been useful.

Rebuttal to Newspaper Image Descriptions use case comments

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.

Other Tools Supporting Longdesc

Online Tutorials and Documentation

Books

Accessibility Crowdsourcing Initiatives

Accessibility Crowdsourcing Initiatives include:

Related Articles and Blog Posts

Other Studies

HTML5 ISSUE

Tracker Issue

ISSUE 30: Should HTML 5 include a longdesc attribute for images

Bugs

Requirements

Recommendations

Proposals

Initial Working Group Poll and Chairs' Decisions

Meeting Minutes

Formal Objections

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.