index.html 113 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html lang="en" dir="ltr">
<head><title>HTML5: Techniques for providing useful text alternatives</title>


<style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 1.5em 0 1em 0; }
   h3 { margin: 1em 0 1em 0; }
   h4 { margin: 1em 0 0.75em 0; }
   h5, h6 { margin: 1em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   dt dfn { font-style: italic; }
   pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
   pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
   pre em { font-weight: bolder; font-style: normal; }

   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table tbody th { text-align: left; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }

   table {

	border-collapse: collapse;

	border: 1px solid #630;

font: normal 90% arial, Verdana, helvetica, sans-serif;
width:100%;
}


th, td

{

	text-align: left;

	vertical-align: top;

	padding: 0.3em;

	border: 1px solid #630;

}

td h1 {font-size:85%;margin:0 0 0 0;}
td p {margin:0 0 0 0;}
thead th, thead td

{

	font-weight: bold;

	text-align: center;

}

  caption {text-align:left;
  font-size:small;
  font-family:Arial, Helvetica, sans-serif;
  }

   h2 { page-break-before: always; }
   h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
   h1 + h2, hr + h2.no-toc { page-break-before: auto; }


   .note { color: green; background: transparent; font-family: sans-serif; }
   .warning { color: red; background: transparent; }
   .note, .warning {
	font-weight: bolder;
	font-style: italic;
	color: #900;
	font-size: large;
}
   p.note, div.note { padding: 0.5em 2em; }
   span.note { padding: 0 2em; }
   .note p:first-child, .warning p:first-child { margin-top: 0; }

   .warning:before { font-style: normal; }
   p.note:before { content: 'Note: '; }
   p.warning:before { content: '\26A0 Warning! '; }


   h4 { position: relative; z-index: 3; }
   h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
   .element {
     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;

     z-index: 1;
   }
   .element:before {
     position: absolute;
     z-index: 2;
     top: 0;
     left: -1.15em;
     height: 2em;
     width: 0.9em;
     background: #EEEEFF;
     content: ' ';
     border-style: none none solid solid;
     border-color: #9999FF;
     border-width: 0.25em;
   }

   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }


    /*added styles*/

	 .example img {border: 1px}
	h6 { text-transform: none; }
	.element {width:400px;}

	.warning1 {font-weight: bolder; font-style: italic; }


.element1 {     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;

     z-index: 1;
}
.element1 {width:400px;}
.warning2 {color: red; background: transparent; }
.figure {
	border: 1px solid #000;
	padding-left: 1em;
}

p.figure {
	border: 1px solid #000;
	padding: 1em;
}


 .inline {
	font-size: x-large;

}

.inline img {
	border:none;

}

 .warning3 {	font-weight: bolder;
	font-style: italic;
	color: #900;
	font-size: x-large;
}
 .warning4 {	font-weight: bolder;
	font-style: italic;
	color: #900;
	font-size: large;
}
 .warning {
	font-size: x-large;
	font-weight: normal;
	color: #900;
}

.ed_mailto::before {
  content: "\3c";
}

.ed_mailto::after {
  content: ">";
}
 </style>


<style type="text/css">
/*****************************************************************
 * ReSpec CSS
 * Robin Berjon (robin at berjon dot com)
 * v0.05 - 2009-07-31
 *****************************************************************/


/* --- INLINES --- */
em.rfc2119 {
    text-transform:     lowercase;
    font-variant:       small-caps;
    font-style:         normal;
    color:              #900;
}

h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
    border: none;
}

dfn {
    font-weight:    bold;
}

a.internalDFN {
    color:  inherit;
    border-bottom:  1px solid #99c;
    text-decoration:    none;
}

a.externalDFN {
    color:  inherit;
    border-bottom:  medium dotted #ccc;
    text-decoration:    none;
}

a.bibref {
    text-decoration:    none;
}

code {
    color:  #ff4500;
}


/* --- WEB IDL --- */
pre.idl {
    border-top: 1px solid #90b8de;
    border-bottom: 1px solid #90b8de;
    padding:    1em;
    line-height:    120%;
}

pre.idl::before {
    content:    "WebIDL";
    display:    block;
    width:      150px;
    background: #90b8de;
    color:  #fff;
    font-family:    initial;
    padding:    3px;
    font-weight:    bold;
    margin: -1em 0 1em -1em;
}

.idlType {
    color:  #ff4500;
    font-weight:    bold;
    text-decoration:    none;
}

/*.idlModule*/
/*.idlModuleID*/
/*.idlInterface*/
.idlInterfaceID {
    font-weight:    bold;
    color:  #005a9c;
}

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

/*.idlAttribute*/
.idlAttrType, .idlFieldType {
    color:  #005a9c;
}
.idlAttrName, .idlFieldName {
    color:  #ff4500;
}
.idlAttrName a, .idlFieldName a {
    color:  #ff4500;
    border-bottom:  1px dotted #ff4500;
    text-decoration: none;
}

/*.idlMethod*/
.idlMethType {
    color:  #005a9c;
}
.idlMethName {
    color:  #ff4500;
}
.idlMethName a {
    color:  #ff4500;
    border-bottom:  1px dotted #ff4500;
    text-decoration: none;
}

/*.idlParam*/
.idlParamType {
    color:  #005a9c;
}
.idlParamName {
    font-style: italic;
}

.extAttr {
    color:  #666;
}

/*.idlConst*/
.idlConstType {
    color:  #005a9c;
}
.idlConstName {
    color:  #ff4500;
}
.idlConstName a {
    color:  #ff4500;
    border-bottom:  1px dotted #ff4500;
    text-decoration: none;
}

/*.idlException*/
.idlExceptionID {
    font-weight:    bold;
    color:  #c00;
}

.idlTypedefID, .idlTypedefType {
    color:  #005a9c;
}

.idlRaises, .idlRaises a.idlType, .idlRaises a.idlType code, .excName a, .excName a code {
    color:  #c00;
    font-weight:    normal;
}

.excName a {
    font-family:    monospace;
}

.idlRaises a.idlType, .excName a.idlType {
    border-bottom:  1px dotted #c00;
}

.excGetSetTrue, .excGetSetFalse, .prmNullTrue, .prmNullFalse, .prmOptTrue, .prmOptFalse {
    width:  45px;
    text-align: center;
}
.excGetSetTrue, .prmNullTrue, .prmOptTrue { color:  #0c0; }
.excGetSetFalse, .prmNullFalse, .prmOptFalse { color:  #c00; }

.idlImplements a {
    font-weight:    bold;
}

dl.attributes, dl.methods, dl.constants, dl.fields {
    margin-left:    2em;
}

.attributes dt, .methods dt, .constants dt, .fields dt {
    font-weight:    normal;
}

.attributes dt code, .methods dt code, .constants dt code, .fields dt code {
    font-weight:    bold;
    color:  #000;
    font-family:    monospace;
}

.attributes dt code, .fields dt code {
    background:  #ffffd2;
}

.attributes dt .idlAttrType code, .fields dt .idlFieldType code {
    color:  #005a9c;
    background:  transparent;
    font-family:    inherit;
    font-weight:    normal;
    font-style: italic;
}

.methods dt code {
    background:  #d9e6f8;
}

.constants dt code {
    background:  #ddffd2;
}

.attributes dd, .methods dd, .constants dd, .fields dd {
    margin-bottom:  1em;
}

table.parameters, table.exceptions {
    border-spacing: 0;
    border-collapse:    collapse;
    margin: 0.5em 0;
    width:  100%;
}
table.parameters { border-bottom:  1px solid #90b8de; }
table.exceptions { border-bottom:  1px solid #deb890; }

.parameters th, .exceptions th {
    color:  #fff;
    padding:    3px 5px;
    text-align: left;
    font-family:    initial;
    font-weight:    normal;
    text-shadow:    #666 1px 1px 0;
}
.parameters th { background: #90b8de; }
.exceptions th { background: #deb890; }

.parameters td, .exceptions td {
    padding:    3px 10px;
    border-top: 1px solid #ddd;
    vertical-align: top;
}

.parameters tr:first-child td, .exceptions tr:first-child td {
    border-top: none;
}

.parameters td.prmName, .exceptions td.excName, .exceptions td.excCodeName {
    width:  100px;
}

.parameters td.prmType {
    width:  120px;
}

table.exceptions table {
    border-spacing: 0;
    border-collapse:    collapse;
    width:  100%;
}

/* --- TOC --- */
.toc a {
    text-decoration:    none;
}

a .secno {
    color:  #000;
}

/* --- TABLE --- */
table.simple {
    border-spacing: 0;
    border-collapse:    collapse;
    border-bottom:  3px solid #005a9c;
}

.simple th {
    background: #005a9c;
    color:  #fff;
    padding:    3px 5px;
    text-align: left;
}

.simple th[scope="row"] {
    background: inherit;
    color:  inherit;
    border-top: 1px solid #ddd;
}

.simple td {
    padding:    3px 10px;
    border-top: 1px solid #ddd;
}

.simple tr:nth-child(even) {
    background: #f0f6ff;
}

/* --- DL --- */
.section dd > p:first-child {
    margin-top: 0;
}

.section dd > p:last-child {
    margin-bottom: 0;
}

.section dd {
    margin-bottom:  1em;
}

.section dl.attrs dd, .section dl.eldef dd {
    margin-bottom:  0;
}

/* --- EXAMPLES --- */
pre.example {
    border-top: 1px solid #ff4500;
    border-bottom: 1px solid #ff4500;
    padding:    1em;
    margin-top: 1em;
}

pre.example::before {
    content:    "Example";
    display:    block;
    width:      150px;
    background: #ff4500;
    color:  #fff;
    font-family:    initial;
    padding:    3px;
    font-weight:    bold;
    margin: -1em 0 1em -1em;
}

/* --- EDITORIAL NOTES --- */
.issue {
    padding:    1em;
    margin: 1em 0em 0em;
    border: 1px solid #f00;
    background: #ffc;
}

.issue::before {
    content:    "Issue";
    display:    block;
    width:  150px;
    margin: -1.5em 0 0.5em 0;
    font-weight:    bold;
    border: 1px solid #f00;
    background: #fff;
    padding:    3px 1em;
}

.note {
    margin: 1em 0em 0em;
    padding:    1em;
    border: 2px solid #cff6d9;
    background: #e2fff0;
}

.note::before {
    content:    "Note";
    display:    block;
    width:  150px;
    margin: -1.5em 0 0.5em 0;
    font-weight:    bold;
    border: 1px solid #cff6d9;
    background: #fff;
    padding:    3px 1em;
}

/* --- Best Practices --- */
div.practice {
    border: solid #bebebe 1px;
    margin: 2em 1em 1em 2em;
}

span.practicelab {
    margin: 1.5em 0.5em 1em 1em;
    font-weight: bold;
    font-style: italic;
}

span.practicelab   { background: #dfffff; }

span.practicelab {
    position: relative;
    padding: 0 0.5em;
    top: -1.5em;
}

p.practicedesc {
    margin: 1.5em 0.5em 1em 1em;
}

@media screen {
    p.practicedesc {
        position: relative;
        top: -2em;
        padding: 0;
        margin: 1.5em 0.5em -1em 1em;
}

/* --- SYNTAX HIGHLIGHTING --- */
pre.sh_sourceCode {
  background-color: white;
  color: black;
  font-style: normal;
  font-weight: normal;
}

pre.sh_sourceCode .sh_keyword { color: #005a9c; font-weight: bold; }           /* language keywords */
pre.sh_sourceCode .sh_type { color: #666; }                            /* basic types */
pre.sh_sourceCode .sh_usertype { color: teal; }                             /* user defined types */
pre.sh_sourceCode .sh_string { color: red; font-family: monospace; }        /* strings and chars */
pre.sh_sourceCode .sh_regexp { color: orange; font-family: monospace; }     /* regular expressions */
pre.sh_sourceCode .sh_specialchar { color: 	#ffc0cb; font-family: monospace; }  /* e.g., \n, \t, \\ */
pre.sh_sourceCode .sh_comment { color: #A52A2A; font-style: italic; }         /* comments */
pre.sh_sourceCode .sh_number { color: purple; }                             /* literal numbers */
pre.sh_sourceCode .sh_preproc { color: #00008B; font-weight: bold; }       /* e.g., #include, import */
pre.sh_sourceCode .sh_symbol { color: blue; }                            /* e.g., *, + */
pre.sh_sourceCode .sh_function { color: black; font-weight: bold; }         /* function calls and declarations */
pre.sh_sourceCode .sh_cbracket { color: red; }                              /* block brackets (e.g., {, }) */
pre.sh_sourceCode .sh_todo { font-weight: bold; background-color: #00FFFF; }   /* TODO and FIXME */

/* Predefined variables and functions (for instance glsl) */
pre.sh_sourceCode .sh_predef_var { color: #00008B; }
pre.sh_sourceCode .sh_predef_func { color: #00008B; font-weight: bold; }

/* for OOP */
pre.sh_sourceCode .sh_classname { color: teal; }

/* line numbers (not yet implemented) */
pre.sh_sourceCode .sh_linenum { display: none; }

/* Internet related */
pre.sh_sourceCode .sh_url { color: blue; text-decoration: underline; font-family: monospace; }

/* for ChangeLog and Log files */
pre.sh_sourceCode .sh_date { color: blue; font-weight: bold; }
pre.sh_sourceCode .sh_time, pre.sh_sourceCode .sh_file { color: #00008B; font-weight: bold; }
pre.sh_sourceCode .sh_ip, pre.sh_sourceCode .sh_name { color: #006400; }

/* for Prolog, Perl... */
pre.sh_sourceCode .sh_variable { color: #006400; }

/* for LaTeX */
pre.sh_sourceCode .sh_italics { color: #006400; font-style: italic; }
pre.sh_sourceCode .sh_bold { color: #006400; font-weight: bold; }
pre.sh_sourceCode .sh_underline { color: #006400; text-decoration: underline; }
pre.sh_sourceCode .sh_fixed { color: green; font-family: monospace; }
pre.sh_sourceCode .sh_argument { color: #006400; }
pre.sh_sourceCode .sh_optionalargument { color: purple; }
pre.sh_sourceCode .sh_math { color: orange; }
pre.sh_sourceCode .sh_bibtex { color: blue; }

/* for diffs */
pre.sh_sourceCode .sh_oldfile { color: orange; }
pre.sh_sourceCode .sh_newfile { color: #006400; }
pre.sh_sourceCode .sh_difflines { color: blue; }

/* for css */
pre.sh_sourceCode .sh_selector { color: purple; }
pre.sh_sourceCode .sh_property { color: blue; }
pre.sh_sourceCode .sh_value { color: #006400; font-style: italic; }

/* other */
pre.sh_sourceCode .sh_section { color: black; font-weight: bold; }
pre.sh_sourceCode .sh_paren { color: red; }
pre.sh_sourceCode .sh_attribute { color: #006400; }

</style><link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD"></head>
<body style="display: inherit;"><div class="head"><p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p><h1 class="title" id="title">HTML5: Techniques for providing useful text alternatives</h1><h2 id="w3c-working-draft-25-may-2011">W3C Working Draft 25 May 2011</h2>
<dl>
<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2011/WD-html-alt-techniques-20110525/">http://www.w3.org/TR/2011/WD-html-alt-techniques-20110525/</a></dd>
<dt>Latest published version:</dt>
<dd><a href="http://www.w3.org/TR/html-alt-techniques/">http://www.w3.org/TR/html-alt-techniques/</a></dd>
<dt>Latest editor's draft:</dt>
<dd><a href="http://dev.w3.org/html5/alt-techniques/Overview.html">http://dev.w3.org/html5/alt-techniques/Overview.html</a></dd>
<dt>Previous version:</dt>
<dd><a href="http://www.w3.org/TR/2011/WD-html-alt-techniques-20110405/">http://www.w3.org/TR/2011/WD-html-alt-techniques-20110405/</a></dd>
<dd><a href="http://www.w3.org/TR/2011/WD-html-alt-techniques-20110113/">http://www.w3.org/TR/2011/WD-html-alt-techniques-20110113/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20101019/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20101019/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/</a></dd>
<dt>Editor:</dt><dd><span>Steve Faulkner</span>, The Paciello Group <span class="ed_mailto"><a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a></span> </dd>
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>


    <div id="abstract" class="introductory section"><!--OddPage--><h2>Abstract</h2>

<p>This document contains author conformance requirements for use of the alt attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
 <p>This specification is an extension to the HTML5 specification [<cite><a href="#bib-HTML5" rel="biblioentry" class="bibref">HTML5</a></cite>]. All normative
    content in the HTML5 specification, unless specifically overridden by this
    specification, is intended to be the basis for this specification.</p>

 <p>This specification is a replacement for the sections <A href="http://dev.w3.org/html5/spec/Overview.html#alt">4.8.1.1 Requirements for providing text to act as an alternative for images</A> up to and including <A href="http://dev.w3.org/html5/spec/embedded-content-1.html#an-image-not-intended-for-the-user">4.8.1.1.11 An image not intended for the user</A> of the HTML5 specification and all of the normative and non normative content of the sections there-in.</p>

</div><div id="sotd" class="introductory section"><h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
  <p class="warning"><strong>This document is subject to change without notice.</strong></p>
<p>This document was published by the <a href="http://www.w3.org/html/wg/">HTML Working Group</a> as a Last Call Working Draft. This document is intended to become a W3C Recommendation.
 If you wish to make a comment regarding this document, please
 either submit it using
 <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&amp;component=alt%20techniques%20(editor:%20Steven%20Faulkner)">our public bug database</a>,
 or send it as an e-mail message to
 <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a>
 (<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</a>,
 <a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>).
 The Last Call period ends 03 August 2011. All feedback is welcome.</p>
<p>Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>

<p>Two formal objections are open against this document:</p>
<ol>
<li><a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=12726">bug 12726 (Document should be on the Note-track)</a> +
<a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=12727">bug 12727 (Contradicts HTML5)</a></li>
<li><a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=12728">bug 12728 (This is not the proper WG for this document)</a></li>
</ol>

<p>W3C anticipates that there will be changes to this specification as a
result of the resolution of Last Call issues. Per the usual W3C Process,
any significant changes to the specification will trigger a subsequent Last
Call.</p>

<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004
W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/40318/status"
rel="disclosure">public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p></div><div class="section" id="toc"><h2
class="introductory">Table of Contents</h2><ul class="toc"><li
class="tocline"><a class="tocxref" href="#abstract"><span class="secno">1.
</span>Abstract</a></li><li class="tocline"><a class="tocxref"
href="#intro_alt"><span class="secno">2. </span>Introduction</a><ul
class="toc"><li class="tocline"><a class="tocxref"
href="#conformance"><span class="secno">2.1
</span>Conformance</a></li></ul></li><li class="tocline"><a class="tocxref"
href="#recommendations"><span class="secno">3. </span>Requirements and
Recommendations:</a><ul class="toc"><li class="tocline"><a class="tocxref"
href="#sec1"><span class="secno">3.1 </span>A link or button containing
only an image</a></li><li class="tocline"><a class="tocxref"
href="#sec2"><span class="secno">3.2 </span>Graphical representations:
charts, diagrams, graphs, maps, illustrations</a></li><li
class="tocline"><a class="tocxref" href="#sec3"><span class="secno">3.3
</span>Images of text</a></li><li class="tocline"><a class="tocxref"
href="#sec4"><span class="secno">3.4 </span>Images that include
text</a></li><li class="tocline"><a class="tocxref" href="#sec5"><span
class="secno">3.5 </span>A purely decorative image that doesn't add any
information</a></li><li class="tocline"><a class="tocxref"
href="#sec6"><span class="secno">3.6 </span>Images that enhance the themes
or subject matter of the page content</a></li><li class="tocline"><a
class="tocxref" href="#sec7"><span class="secno">3.7 </span>An image not
intended for the user</a></li><li class="tocline"><a class="tocxref"
href="#sec8"><span class="secno">3.8 </span>Icons</a></li><li
class="tocline"><a class="tocxref" href="#sec9"><span class="secno">3.9
</span>Images of Pictures</a></li><li class="tocline"><a class="tocxref"
href="#sec10"><span class="secno">3.10 </span>Webcam images</a></li><li
class="tocline"><a class="tocxref" href="#sec11"><span class="secno">3.11
</span>A group of images that form a single larger picture with and without
links</a></li><li class="tocline"><a class="tocxref" href="#sec12"><span
class="secno">3.12 </span> When a text alternative is unknown at the time
of publication</a></li><li class="tocline"><a class="tocxref"
href="#sec13"><span class="secno">3.13 </span>CAPTCHA Images </a></li><li
class="tocline"><a class="tocxref" href="#sec14"><span class="secno">3.14
</span>Logos, insignia, flags, or emblems</a></li><li class="tocline"><a
class="tocxref" href="#sec15"><span class="secno">3.15 </span>Inline
images</a></li></ul></li><li class="tocline"><a class="tocxref"
href="#methods"><span class="secno">4. </span>Methods for Providing Text
Alternatives</a><ul class="toc"><li class="tocline"><a class="tocxref"
href="#secm1"><span class="secno">4.1 </span>The <code>img</code> element
<code>alt</code> attribute</a><ul class="toc"><li class="tocline"><a
class="tocxref" href="#secm2"><span class="secno">4.1.1 </span>Is alt
attribute content a replacement for an image?</a></li><li
class="tocline"><a class="tocxref" href="#secm3"><span class="secno">4.1.2
</span>Using an empty <code>alt</code> attribute
<code>alt=""</code></a></li><li class="tocline"><a class="tocxref"
href="#m5"><span class="secno">4.1.3 </span>How long should a  text
alternative be?</a></li></ul></li><li class="tocline"><a class="tocxref"
href="#m6"><span class="secno">4.2 </span>The <code>figure</code> and
<code>figcaption</code> elements</a></li><li class="tocline"><a
class="tocxref" href="#secm7"><span class="secno">4.3 </span>The
<code>img</code> element <code>title</code> attribute</a></li></ul></li><li
class="tocline"><a class="tocxref" href="#gloss"><span class="secno">5.
</span>Glossary</a></li><li class="tocline"><a class="tocxref"
href="#ack"><span class="secno">6. </span>Acknowledgements</a></li><li
class="tocline"><a class="tocxref" href="#references"><span
class="secno">A. </span>References</a><ul class="toc"><li
class="tocline"><a class="tocxref" href="#normative-references"><span
class="secno">A.1 </span>Normative references</a></li><li
class="tocline"><a class="tocxref" href="#informative-references"><span
class="secno">A.2 </span>Informative
references</a></li></ul></li></ul></div>

<hr>
<div class="section" id="intro_alt">
<!--OddPage--><h2 id="intro"><span class="secno">2. </span>Introduction</h2>
<h3 id="text-alt">Text Alternatives</h3>
<p><a href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</a> are   a primary way of making visual information accessible, because they can be rendered   through any sensory modality (for example, visual, auditory or tactile) to match   the needs of the user. Providing text alternatives allows the information to be   rendered in a variety of ways by a variety of user agents. For example, a person   who cannot see a picture can have the text alternative read aloud using   synthesized speech.</p>
<p>To determine appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> it is   important to think about why an image is being included in a document. What is   its purpose? Thinking like this will help you to understand what is important   about the image for the page's intended audience. Every image has a reason for   being on a page, because it  provides useful information, performs a   function, or enhances aesthetics. Therefore, knowing what the image is for,   makes writing appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> easier.</p>
<h3 id="example-benefits">Examples of scenarios where users benefit from text alternatives for images</h3>
<ul>
  <li>They have a very slow connection and are browsing with images disabled.</li>
  <li>They have a vision impairment and use  text to speech software. </li>
  <li>They have a cognitive impairment and use  text to speech software. </li>
  <li>They
    are using a text-only browser. </li>
  <li> They are listening to
    the page being read out by a  voice Web
    browser.</li>
  <li>They have images disabled to save on download costs.</li>
</ul>
<h3 id="good-practices">General Text Alternative Good Practices</h3>
<ul>
  <li>Provide the same informational <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a> as the image.
  </li><li>Where an image performs a specific function, such as a graphical link,   provide information about its <a href="http://www.w3.org/TR/WCAG20/#functiondef">functionality</a>.
  </li><li>Be succinct as possible while still conveying equivalent values. Short text   that describes its purpose or gives an overview will often suffice.
  </li><li>Write suitable alt text according to context. The same image in a different   situation may need very different alt text.
  </li><li>Avoid redundant alt text. An example of this would be repeating the same   text in your document, as well as in the alt attribute, and is unnecessary. </li>
</ul>
<div class="section" id="conformance"><h3><span class="secno">2.1 </span>Conformance</h3><p>As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.</p>
<p>The key words <em title="must" class="rfc2119">must</em>, <em title="must not" class="rfc2119">must not</em>, <em title="required" class="rfc2119">required</em>, <em title="should" class="rfc2119">should</em>, <em title="should not" class="rfc2119">should not</em>, <em title="recommended" class="rfc2119">recommended</em>, <em title="may" class="rfc2119">may</em>, and <em title="optional" class="rfc2119">optional</em> in this specification are to be interpreted as described in [<cite><a href="#bib-RFC2119" rel="biblioentry" class="bibref">RFC2119</a></cite>].</p>
</div>
</div>
<hr>
<div class="section" id="recommendations">
<!--OddPage--><h2><span class="secno">3. </span>Requirements and Recommendations:</h2>
<p>The requirements and recommendations for the <code><a href="http://dev.w3.org/html5/markup/img.html#img.attrs.alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.</p>
<div class="section" id="sec1"><h3 id="button-image-only"><span class="secno">3.1 </span>A link or button containing only an image</h3>
<p>When an <a href="http://dev.w3.org/html5/markup/a.html#a">a</a> element that is a hyperlink, or a <code><a href="http://dev.w3.org/html5/markup/button.html#button">button</a></code> element, has no text content but contains one or more images, the <code>alt</code> attributes <em title="must" class="rfc2119">must</em> contain text that together convey the purpose of the link or button.</p>
<h4 id="hab">Example 1.1</h4>
<div class="example">
  <p>In this example, a user is asked to pick her preferred color
    from a list of three. Each color is given by an image, but for
    users who cannot view the images,
    the color names are included within the alt attributes of the images:</p>
  <p><strong>Example Rendering:</strong></p>
  <p><img src="images/buttons.gif" alt="The example HTML code as displayed in a browser. 3 links each containing a rectangular image:  1 is blue with the text 'blue', 2 red with the text 'red' and 3 is green with the text 'green'." width="274" height="45"></p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;ul&gt;
&lt;li&gt;&lt;a href="red.html"&gt;&lt;img src="red.jpeg" <strong>alt="Red"</strong>&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="green.html"&gt;&lt;img src="green.jpeg" <strong>alt="Green"</strong>&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="blue.html"&gt;&lt;img src="blue.jpeg" <strong>alt="Blue"</strong>&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
<h4 id="hac">Example 1.2</h4>
<div class="example">
  <p>In this example, a button has a set of images to indicate the
    kind of color output desired by the user. The first image is used to give the text alternative.</p>
  <p><strong>Example Rendering:</strong></p>
  <p><img src="images/rgbbutton1.gif" alt="A button with the letters R G B." width="88" height="49"></p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;abbr title="red, green and blue."&gt;&lt;button name="rgb"&gt;
&lt;img src="red.jpg" <strong>alt="RGB"</strong>&gt;&lt;img src="green.jpg" <strong>alt=""</strong>&gt;&lt;img src="blue.jpg" <strong>alt=""</strong>&gt;&lt;/button&gt;
&lt;/abbr&gt;</pre>
  <p>Since each image represents one part of the text, it could also
    be written like this:</p>
  <pre>&lt;abbr title="red, green and blue."&gt;
&lt;button name="rgb"&gt;&lt;img src="red.jpg" <strong>alt="R"</strong>&gt;&lt;img src="green.jpg" <strong>alt="G"</strong>&gt;
&lt;img src="blue.jpg" <strong>alt="B"</strong>&gt;&lt;/button&gt;&lt;/abbr&gt;
</pre>
  <p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
</div>
<h4 id="hac3">Example 1.3</h4>
<div class="example">
  <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
  <p><strong>Example Rendering:</strong></p>
  <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;abbr title="World Wide Web Consortium"&gt;
&lt;a href="http://w3.org"&gt;
&lt;img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>&gt;
&lt;/a&gt;
&lt;/abbr&gt;
</pre>

</div>

<h4 id="had">Related techniques and resources</h4>
<ul>
  <li><a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G196">Using a text alternative on one item within a group of images that   describes all items in the group</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html">Providing link text that describes the purpose of a link for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://universalusability.com/access_by_design/links/alt-text.html">Use alt-text for image links</a></li>
  <li><a href="http://www.cs.tut.fi/%7Ejkorpela/www/links.html">Links want to be Links</a></li>
</ul>
</div>
<div class="section" id="sec2">
<h3 id="graphical-representations"><span class="secno">3.2 </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
<p>The full text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute, or a shorter text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
<p>It is important to understand that a  text alternative provided in the alt attribute is a <em>replacement</em> for the image, while a short text alternative in the alt attribute, accompanied by a programmatically associated longer text alternative, can be a description of the
  image or a link target if the image is the sole content of a link.</p>
<p>While all the examples below can be considered for use, each method has advantages and disadvantages.</p>
<h4 id="hae">Example 2.1</h4>
<div class="example">
  <p>In the following example we have an image of a <a href="#flowchart">flowchart</a> , with text in the <code>alt</code> attribute describes the process shown in the flowchart:</p>
  <p><strong>Example Image:</strong></p>
  <img src="images/flowchart.gif" alt="flowchart" id="flowchart" width="221" height="299">
  <p> <strong>Example Code:</strong><br>
  </p>
  <pre>&lt;p&gt;A flowchart representing a process for dealing with a non-functioning lamp:&lt;/p&gt;
&lt;p&gt;&lt;img src="flowchart.gif" <strong>alt="If the lamp doesn't work; check if it's plugged in.
If not, plug it in. If it's plugged in and still doesn't work; check if the bulb is burned out.
If it is, replace the bulb. If it still does not work; buy a new lamp."</strong>&gt;&lt;/p&gt;</pre>
</div>
<h4 id="ex22">Example 2.2</h4>
<div class="example">
  <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
  <p><strong>Example Code:</strong><br>
  </p>
  <pre>&lt;p&gt;<strong>&lt;a href="#d1" title="Flowchart description."&gt;</strong>&lt;img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>&gt;<strong>&lt;/a&gt;</strong>&lt;/p&gt;
...

&lt;div <strong>id="d1"</strong>&gt;
&lt;h2&gt;Broken lamp flowchart description&lt;/h2&gt;

&lt;p&gt;If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
<h4 id="haee">Example 2.3</h4>
<div class="example">
  <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
  <p><strong>Example Code:</strong><br>
  </p>
  <pre>&lt;p&gt;&lt;img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong>
<strong>aria-describedby="d1"</strong>&gt;&lt;/p&gt;


&lt;p <strong>id="d1"</strong>&gt;If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.&lt;/p&gt;
</pre>
  <h5 id="haf">&nbsp;</h5>
</div>
<h4 id="hag">Example 2.4</h4>
<div class="example">
  <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute. <strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
  <p><strong>Example Image in context:</strong></p>
  <div class="element1">
    <p><img src="images/flowchart.gif" alt="A flowchart process for dealing with a non-functioning lamp." width="221" height="299"></p>
    <div id="d1"> <strong>If the lamp doesn't work:</strong>
        <ol>
          <li>Check if it's plugged in, if not, plug it in.</li>
          <li>If it still doesn't work; check if the bulb is burned out.
            If it is, replace the bulb.</li>
          <li>If it still doesn't work; buy a new lamp.</li>
        </ol>
    </div>
  </div>
  <p><strong>Example Code:</strong><br>
  </p>
  <pre>&lt;p&gt;&lt;img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>
<strong>aria-describedby="d1"</strong>&gt;&lt;/p&gt;


&lt;div <strong>id="d1"</strong>&gt;
&lt;strong&gt;If the lamp doesn't work:&lt;/strong&gt;<br><strong>&lt;ol&gt;</strong><br>	<strong>&lt;li&gt;</strong>Check if it's plugged in, if not, plug it in.<strong>&lt;/li&gt;</strong><br>	<strong>&lt;li&gt;</strong>If it still doesn't work; check if the bulb is burned out.<br>	If it is, replace the bulb.<strong>&lt;/li&gt;</strong><br>	<strong>&lt;li&gt;</strong>If it still doesn't work; buy a new lamp.<strong>&lt;/li&gt;</strong><br><strong>&lt;/ol&gt;</strong>
&lt;/div&gt; </pre>
</div>
<h4 id="hag21">Example 2.5</h4>
<div class="example">
  <p>In this example, there is an image of a chart, It would be inappropriate to provide the information depicted in the chart as a prose text alternative as the information is a data set. Instead a structured text alternative alternative <em title="should" class="rfc2119">should</em> be provided. in this case in the form of a data table using the data that is represented in the chart image. Note that indications of the highest and lowest rainfall for each season has been included in the table, so that an indication of trends easily identified in the chart are also available in the data table.</p>
  <p><strong>Example Image in context:</strong></p>
  <div class="element1">
    <p><img src="images/table.gif" alt="Bar Chart showing rainfall in millimetres by Country and Season." width="407" height="341"></p>

  <table border="1">
<caption>
Average rainfall in millimetres  by country and season.
</caption>
<tbody><tr>
	<td></td>
	<th scope="col">UK</th>
	<th scope="col">Japan</th>
	<th scope="col">Australia</th>
</tr>
<tr>
	<th scope="row">Spring</th>
	<td>5.5 (highest)</td>
	<td>2.4</td>
	<td>2 (lowest)</td>
</tr>
<tr>
	<th scope="row">Summer</th>
	<td>4.5 (highest)</td>
	<td>3.4</td>
	<td>2 (lowest)</td>
</tr>
<tr>
	<th scope="row">Autumn</th>
	<td>3.5 (highest)</td>
	<td>1.8</td>
	<td>1.5 (lowest)</td>
</tr>
<tr>
	<th scope="row">Winter</th>
	<td>1.5 (highest)</td>
	<td>1.2</td>
	<td>1 (lowest)</td>
</tr>
</tbody></table>


  </div>
  <p><strong>Example Code:</strong><br>
  </p>
  <pre>&lt;p&gt;&lt;img src="rainchart.gif" <strong>alt="Bar Chart showing average rainfall in millimetres by country and season."</strong><strong></strong>&gt;&lt;/p&gt;

&lt;table&gt;<br>&lt;caption&gt;<br>Rainfall in millimetres by Country and Season.<br>&lt;/caption&gt;<br>&lt;tr&gt;<br> &lt;td&gt;&lt;/td&gt;&lt;th scope="col"&gt;UK&lt;/th&gt;&lt;th scope="col"&gt;Japan&lt;/th&gt;&lt;th scope="col"&gt;Australia&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope="row"&gt;Spring&lt;/th&gt;&lt;td&gt;5.5 (highest)&lt;/td&gt;&lt;td&gt;2.4&lt;/td&gt;&lt;td&gt;2 (lowest)&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope="row"&gt;Summer&lt;/th&gt;&lt;td&gt;4.5 (highest)&lt;/td&gt;&lt;td&gt;3.4&lt;/td&gt;&lt;td&gt;2 (lowest)&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope="row"&gt;Autumn&lt;/th&gt;&lt;td&gt;3.5 (highest)&lt;/td&gt;&lt;td&gt;1.8&lt;/td&gt;&lt;td&gt;1.5 (lowest)&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope="row"&gt;Winter&lt;/th&gt;&lt;td&gt;1.5 (highest)&lt;/td&gt;&lt;td&gt;1.2&lt;/td&gt;&lt;td&gt;1 lowest&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;</pre>
</div>
<h4 id="hah">Related  techniques and resources</h4>
<ul>
  <li><a href="http://www.w3.org/TR/WCAG-TECHS/G92.html">Providing long description for non-text content that serves the   same                      purpose and presents the same information</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/WCAG-TECHS/G94.html">Providing short text alternative for non-text content that   serves the same purpose and presents the same information as the   non-text content </a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
</ul>
</div>
<div class="section" id="sec3">
<h3 id="img-of-text"><span class="secno">3.3 </span>Images of text</h3>
<p>Sometimes, an image only contains  text, and the purpose of the image is to display text  using visual effects and /or fonts.  It is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt">alt</code> attribute <em title="should" class="rfc2119">should</em> consist of the same text as written in the image itself. </p>
<h4 id="hai">Example 3.1</h4>
<div class="example">
  <!-- <p>Consider this <a href="images/text.gif">image</a>  containing the text "Get Happy!" it uses a non standard font and uses multiple colors. The text is
    merely being used as a heading, to spice up the page for graphical
    users, then the correct alternative text is just the same text
  "Get Happy!", and no mention need be made of the text style:
   </p>-->
  <p>This example shows an image of the text "Get Happy!"
    written in a fancy multi colored freehand style.
    The image makes up the content of a heading. In this case the text alternative for the image should be "Get Happy!".</p>
  <p><strong>Example Image:</strong></p>
  <p> <img src="images/text.gif" alt="Get Happy!" width="275" height="77"> </p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;h1&gt;&lt;img src="gethappy.gif" <strong>alt="Get Happy!"</strong>&gt;&lt;/h1&gt;</pre>

</div>
<h4 id="haj">Example 3.2</h4>
<div class="example">
  <!-- <p>Consider this <a href="images/text.gif">image</a>  containing the text "Get Happy!" it uses a non standard font and uses multiple colors. The text is
    merely being used as a heading, to spice up the page for graphical
    users, then the correct alternative text is just the same text
  "Get Happy!", and no mention need be made of the text style:
 -->
  <p>In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends Friday" In this case it is recommended that the image's text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and may be confusing.</p>
  <p><strong>Example Image:</strong></p>
  <p><img src="images/sale.gif" alt="The big sale ends Friday." width="400" height="190"></p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="sale.gif" <strong>alt="The BIG sale ...ends Friday."</strong>&gt;&lt;/p&gt;</pre>
  <h5 id="hak">Advantages:</h5>
  <ul>
    <li>Text alternative is explicitly associated with the image.</li>
  </ul>
  <h5 id="hal">Disadvantages:</h5>
  <ul>
    <li>When text is represented in an image the text cannot be restyled to suit users needs.</li>
  </ul>
</div>
<h4 id="ham">Related  techniques and resources</h4>
<ul>
  <li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html">Images of text</a> explanation from WCAG 2.0 of why it is better to use text rather than images of text</li>
</ul>
</div>
<div class="section" id="sec4">
<h3 id="images-include-text"><span class="secno">3.4 </span>Images that include text</h3>
<p>Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in text alternative. </p>
<h4 id="han">Example 4.1</h4>
<div class="example">
  <p>Consider an image containing  a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative.</p>
  <p><strong>Example Image:</strong></p>
  <p><img src="images/figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%." id="piechart" width="500" height="300"></p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="figure1.gif" <strong>alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%."</strong>&gt;&lt;/p&gt;</pre>
</div>
<h4 id="hao">Example 4.2</h4>
<div class="example">
  <p>Here's another example of the same <a href="#piechart">pie chart</a>
  image, showing a short text alternative included in the alt attribute and
  a longer text alternative in text, programmatically associated using the
  <a
  href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a>
  attribute:</p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="figure1.gif" <strong>alt="Figure 1"</strong> <strong>aria-describedby="d2"</strong>&gt;&lt;/p&gt;

&lt;p <strong>id="d2"</strong>&gt;Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.&lt;/p&gt;</pre>
</div>
<h4 id="haq">Related  techniques and resources</h4>
<p><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html"></a></p>
</div>
<div class="section" id="sec5">
<h3 id="decorative"><span class="secno">3.5 </span>A purely decorative image that doesn't add any information</h3>
<p><a href="http://www.w3.org/TR/WCAG20/#puredecdef">Purely decorative</a> images are visual enhancements, decorations or embellishments that provide no   function or information beyond aesthetics to users who can view the images. They   have no meaning in themselves and do not provide page <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a>.</p>
<p>Purely decorative images <em title="must" class="rfc2119">must</em> be marked up so they can be ignored by <a href="http://www.w3.org/TR/WCAG20/#atdef">assistive technology</a> with a null   alt attribute (alt="") or preferably use CSS techniques. If the image isn't   providing the user any informative <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a> or enhancing greater   understanding of the <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a>, then the alt attribute <em title="must" class="rfc2119">must</em> be empty.</p>
<h4 id="har">Example 5.1</h4>
<div class="example">
  <p>Here's an example of an image being used as a decorative banner for a persons blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using  CSS.</p>
  <p><strong>Example image in context:</strong></p>
  <div class="element1">
    <p><img src="images/border.gif" alt="" width="400" height="30"></p>
    <p><strong>Clara's Blog</strong></p>
    <p>Welcome to my blog...</p>
  </div>

  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="border.gif" <strong>alt=""</strong> width="400" height="30"&gt;&lt;/p&gt;

&lt;h1<strong></strong>&gt;Clara's Blog&lt;/h1&gt;
&lt;p&gt;Welcome to my blog...&lt;/p&gt;</pre>
</div>
<h4 id="has">Related  techniques and resources</h4>
<ul>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using   null alt text and no title attribute on img elements for images that AT should   ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using   CSS to include decorative images (CSS)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Omitting the alt-attribute for non-text content used for decorative purposes only in   HTML</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F39.html">Providing   a text alternative that is not null. (e.g., alt="spacer" or alt="image") for   images that should be ignored by assistive technology</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec6">
<h3 id="images-enhance"><span class="secno">3.6 </span>Images that enhance the themes or subject matter of the page content</h3>
<p>An image that isn't discussed directly by the
  surrounding text but still has some relevance can be included in a page
  using the <code>img</code> element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so
  still form part of the content. In these cases, the <code title="attr-img-alt">alt</code> attribute <em title="must" class="rfc2119">must</em> be present but its
  value <em title="may" class="rfc2119">may</em> be null. In cases where the image is closely related to the subject matter of the page content, the text alternative <em title="must" class="rfc2119">must</em> include a description of the content of the image or a description of the target of a linked page, if it is the content of a link. </p>
<h4 id="hat">Example 6.1</h4>
<div class="example">
  <p>Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An
    image of a painting inspired by a poem, on a page reciting that
    poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the <code title="attr-img-alt">alt</code> attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a <a href="http://bit.ly/5HJvVZ">link to further information</a> about the painting.</p>
  <p><strong>Example Image </strong></p>
  <p><img src="images/shalott.jpg" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott" width="338" height="234"> </p>
  <p><strong>Example code: </strong></p>
  <pre>&lt;hgroup&gt;&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
&lt;h2&gt;A poem by Alfred Lord Tennyson&lt;/h2&gt;&lt;/hgroup&gt;
&lt;figure&gt;
&lt;img src="shalott.jpeg" <strong>alt="Painting of a  young woman with long hair, sitting in a wooden boat. "</strong>&gt;
&lt;p&gt;&lt;a href="#des"&gt;Description of the painting&lt;/a&gt;.&lt;/p&gt;
&lt;/figure&gt;

&lt;!-- Full Recitation of Alfred, Lord Tennyson's Poem.  --&gt;

...
...
...
&lt;p id="des"&gt;<strong>The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.</strong>
<strong>&lt;a href="http://bit.ly/5HJvVZ"&gt;Further information about the painting&lt;/a&gt;.</strong>&lt;/p&gt;</pre>
</div>
<h4 id="hau">Example 6.2</h4>
<div class="example">
  <p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
  <p>In this example of  the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&amp;workid=15984">information about the painting</a>. Note a <code>title</code> has been included on the link for sighted mouse users, the <code>title</code> provides information about the link target.</p>
  <p><strong>Example image in context: </strong></p>
  <div class="element1">
    <p><strong>The Lady of Shalott</strong><br>
        <small>A poem by Alfred Lord Tennyson.</small></p>
    <p class="figure"><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem." width="271" height="171"></a></p>
    <p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
  </div>
  <p><strong>Example code: </strong></p>
  <pre>&lt;hgroup&gt;&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
&lt;h2&gt;A poem by Alfred Lord Tennyson&lt;/h2&gt;&lt;/hgroup&gt;
&lt;figure&gt;&lt;a href="http://bit.ly/5HJvVZ" title="Information about this painting inspired by the poem."&gt;
&lt;img src="shalott.jpeg" <strong>alt="Information about this painting inspired by the poem."</strong>&gt;&lt;/a&gt;&lt;/figure&gt;

&lt;!-- Full Recitation of Alfred, Lord Tennyson's Poem.  --&gt;</pre>

</div>

  <!-- <h4>Example 6.3</h4>
  <div class="example">
    <p>In this example of  the same image a visible text caption is provided using the &lt;figure&gt; and &lt;figcaption&gt; elements.</p>
    <p>In this example of  the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
    <p><strong>Example code: </strong></p>
    <pre>
&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
&lt;h2&gt;A poem by Alfred Lord Tennyson&lt;/h2&gt;
&lt;figure&gt;
&lt;img src="shalott.jpeg" <strong>alt="A painting of a  young women with long hair sitting in a wooden boat,
she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix
lying in front of her. Beside it are three candles. Two have blown out."</strong>&gt;
&lt;figcaption&gt;Painting by John William Waterhouse&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>
</div> -->
 <h4 id="hav"> Example 6.3</h4>
<p>This example is similar to the previous example as it also contains a link pointing to an external source of information about the painting. The difference being that  text  is included after the image as content of the link. </p>
<p><strong>Note:</strong> In HTML5 unlike HTML 4 <a href="http://html5doctor.com/block-level-links-in-html-5/">links can contain 'block level' elements</a> such as the <code>p</code> element. The example below makes use of this change.</p>
<div class="example">
  <p><strong>Example image in context: </strong></p>
  <div class="element1">
    <p><strong>The Lady of Shalott</strong><br>
        <small>A poem by Alfred Lord Tennyson.</small></p>
    <div class="figure">
      <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="302" height="212"></a></p>
      <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>  </div>
      <p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>

  </div>
  <p><strong>Example code: </strong></p>
  <pre>&lt;hgroup&gt;&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
&lt;h2&gt;A poem by Alfred Lord Tennyson&lt;/h2&gt;&lt;/hgroup&gt;
&lt;figure&gt;&lt;a href="http://bit.ly/5HJvVZ"&gt;
&lt;img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>&gt;
&lt;p&gt;<strong>About this painting.</strong>&lt;/p&gt;&lt;/a&gt;&lt;/figure&gt;

&lt;!-- Full Recitation of Alfred, Lord Tennyson's Poem.  --&gt;</pre>
</div>
<h4 id="haw">Example 6.4</h4>
<div class="example">
  <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming HTML5.</p>
  <p><strong>Example 1 Image in context: </strong></p>
  <div class="element1">
    <p><b>Medieval Nights</b></p>
    <p><img src="images/shalott.jpg" alt="" width="188" height="129"></p>
    <p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon  Thames.</p>
  </div>
  <p><strong>Example code 1: </strong></p>
  <pre>&lt;h1&gt;Medieval Nights&lt;/h1&gt;

&lt;p&gt;&lt;img src="shalott.jpeg" <strong>alt=""</strong>&gt;&lt;/p&gt;
&lt;p&gt;Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.&lt;/p&gt;
</pre>
  <p><strong>Example 2 Image in context: </strong></p>
  <div class="element1">
    <p><b>Medieval Night</b></p>
    <p><img src="images/shalott.jpg" alt="" width="188" height="129"></p>
    <p>Members and friends of the blind and low vision users group are invited to a medieval theme night on Friday at Boaters Bar, on the riverside, Kingston upon  Thames.</p>
  </div>
  <p><strong>Example code 2: </strong></p>
  <pre>&lt;h1&gt;Medieval Nights&lt;/h1&gt;

&lt;figure&gt;&lt;img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>&gt;&lt;/figure&gt;
&lt;p&gt;Members and friends of the blind and low vision users group are invited to a medieval
theme night on Friday at Boaters Bar, on the riverside, Kingston upon Thames.&lt;/p&gt;</pre>
</div>
<h4 id="hax">Related  techniques and resources</h4>
<ul>
  <li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
  <li><a href="http://www.rnib.org.uk/LIVINGWITHSIGHTLOSS/LEISURECULTURE/ARTSCRAFTS/PAINTING/Pages/audio_description_painting.aspx">Try audio describing a painting</a></li>
  <li><a href="http://www.vsarts.org/x6020.xml">Blind Imagination: Pictures into Word</a></li>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H30.html">Providing link text that describes the purpose of a link   for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Providing a text alternative that identifies the purpose   of the non-text content</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec7">
<h3 id="img-not-for-user"><span class="secno">3.7 </span>An image not intended for the user</h3>
<p>Generally authors should avoid using <code>img</code> elements
  for purposes other than showing images.</p>
<p>If an <code>img</code> element is being used for purposes other
  than showing an image, e.g. as part of a service to count page
  views, then an empty <code title="attr-img-alt">alt</code> attribute <em title="must" class="rfc2119">must</em> be included. In such cases, the <code title="attr-dim-width">width</code> and <code title="attr-dim-height">height</code> attributes should both
  be set to zero.</p>
<h4 id="hay">Example 7.1</h4>
<div class="example">
  <p>An example of an img element used to collect web page statistics. The alt attribute is empty.</p>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="http://server3.web-stat.com/count.pl?octafish.com"
width="0" height="0" <strong>alt=""</strong>&gt;&lt;/p&gt;

</pre>
</div>
<h4 id="haz">Related  techniques and resources</h4>
<ul>
  <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using   null alt text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec8">
<h3 id="icons"><span class="secno">3.8 </span>Icons</h3>
<p>An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to   help users of visual browsers to recognize features at a glance.</p>
<p>In some cases, the icon is supplemental to a text label conveying the same   meaning. In those cases, an empty <code>alt</code> attribute <em title="must" class="rfc2119">must</em> provided. </p>
<p>In other cases the icon adds emphasis to text content that needs to be conveyed textually, In such cases a text alternative <em title="must" class="rfc2119">must</em> be provided.</p>
<h4 id="hba">Example 8.1</h4>
<div class="example">
  <p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
  <p><strong>Example Image in context: </strong></p>
  <div class="element">
    <p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
  </div>

  <p><strong>Example code 1 - inline image:</strong></p>
  <pre>&lt;a href="home.html"&gt;
&lt;img src="icon.gif" width="15" height="15" <strong>alt=""</strong>&gt;Home&lt;/a&gt;


</pre>
  <p><strong>Example code 2 - CSS image:</strong></p>
  <pre>  #home:before
 {
  content: url(home.png);
 }


 &lt;a href="home.html" id="home"&gt;Home&lt;/a&gt;</pre>
</div>
<h4 id="hbb">Example 8.2</h4>
<div class="example">
  <p>In this example, we have a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content. Where images are used in this way, it is not appropriate to add the image using CSS. </p>
  <p><strong>Example Image in context: </strong></p>
  <div class="element1">
    <p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Your session is about to expire.</strong></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;strong&gt;&lt;img src="warning.gif" width="15" height="15" <strong>alt="Warning!"</strong>&gt;
Your session is about to expire&lt;/strong&gt;&lt;/p&gt;

</pre>
</div>
<h4 id="hbc">Example 8.3</h4>
<div class="example">
  <p>In this example, we have a warning message, with a warning icon. The word "Warning!" is in emphasized text next the the icon. In this case the icon is redundant and therefore the <code>img </code>element <em title="must" class="rfc2119">must</em> have an empty <code>alt</code> attribute. It would also be appropriate to add the icon using CSS.</p>
  <p><strong>Example Image in context: </strong></p>
  <div class="element1">
    <p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Warning!</strong> Your session is about to expire.</p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="warning.gif" width="15" height="15" <strong>alt=""</strong>&gt;
&lt;strong&gt;Warning!&lt;/strong&gt;
Your session is about to expire&lt;/p&gt;

</pre>
</div>
</div>
<div class="section" id="sec9">
<h3 id="pictures"><span class="secno">3.9 </span>Images of Pictures</h3>
<p>Images of pictures or graphics include visual      representations of objects, people, scenes, abstractions, etc.      This <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text      content</a> can convey a significant amount of information      visually or provide a <a href="http://www.w3.org/TR/WCAG20/#sensoryexpdef">specific      sensory experience</a> to a sighted person. Examples include photographs, paintings, drawings and artwork.</p>
<p>An appropriate text alternative for a picture is a brief description, or <a href="http://www.w3.org/TR/WCAG20/#namedef">name</a>. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In  addition to providing a short <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternative</a> that gives a brief description of the <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, also providing <a href="http://www.w3.org/TR/WCAG20/#suppcontentdef">supplemental content</a> through another means when appropriate may be useful.</p>
<h4 id="hbe">Example 9.1</h4>
<p>This example shows an image uploaded to a photo-sharing site. The photo is of a cat,      sitting in the bath. The image has a text alternative provided using the <code>img</code> elements <code>alt</code> attribute. It also has an  caption provided by including the <code>img</code> element in a <code>figure</code> element and using a <code>figcaption</code> element to identify the caption text. The text alternative in  Example code 2 includes information  "photo" about the type of image, although this is not generally recommended, authors <em title="may" class="rfc2119">may</em> include such information in the <code>alt</code> attribute content.</p>
<div class="example">
  <p><strong>Example image in context:</strong></p>
  <div class="element1">
    <p><img src="images/lola.jpg" alt="Lola the cat sitting under an umbrella in the bath tub." width="300" height="242"></p>
    <p>Lola prefers a bath to a shower.</p>
  </div>
  <p><strong>Example code 1:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="1100670787_6a7c664aef.jpg" <strong>alt="Lola the cat sitting under an umbrella in the bath tub."</strong>&gt;
 &lt;figcaption&gt;Lola prefers a bath to a shower.&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>
  <p><strong>Example code 2:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="1100670787_6a7c664aef.jpg" <strong>alt="Photo of Lola the cat sitting under an umbrella in the bath tub."</strong>&gt;
 &lt;figcaption&gt;Lola prefers a bath to a shower.&lt;/figcaption&gt;
&lt;/figure&gt;  </pre>
</div>
<h4 id="hbf">Example 9.2</h4>
<p>Context: An image on a page explaining in general terms      Rorschach inkblot personality tests. The image is an abstract      free form which is subjective to individual interpretation.</p>
<div class="example">
  <p><strong>Image example in context:</strong></p>
  <div class="element1">
    <blockquote cite="http://en.wikipedia.org/wiki/Rorschach_test#History">Using interpretation of "ambiguous designs" to assess an individual's   personality is an idea that goes back to Leonardo da Vinci and Botticelli. Interpretation of   inkblots was central to a game from the late 19th century. Rorschach's, however,   was the first systematic approach of this kind.</blockquote>
    <p><img src="images/inkblot1.jpg" alt="An abstract, freeform inkblot." width="300" height="197"></p>
    <p>The first of the ten cards in the Rorschach test.</p>
  </div>
  <p><strong>Code Example:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="Rorschach1.jpg" <strong>alt="An abstract, free form inkblot."</strong>&gt;
&lt;figcaption&gt;The first of the ten cards in the Rorschach test.&lt;/figcaption&gt;
&lt;/figure&gt;  </pre>
</div>
<h4 id="hbg">Related  techniques and resources</h4>
<ul>
  <li><a href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 <code>figure</code> element</a></li>
  <li><a href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 <code>figcaption</code> element</a></li>
</ul>
</div>
<div class="section" id="sec10">
<h3 id="webcam"><span class="secno">3.10 </span>Webcam images</h3>
<p>Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include  traffic and weather cameras.</p>
<h4 id="hbgg">Example 10.1</h4>
<p>This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, it is required that it is provided as a text alternative. A caption is also provided using the <code>figure</code> and <code>figcaption</code> elements.  As the image is provided to give a visual indication of the current weather near Sopwith House, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative. </p>
<p>The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software.  The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. </p>
<p><strong>Note: </strong></p>
<ul>
  <li><code>aria-describedby</code> is used to explicitly associate the caption with the image as the <code>figure</code> and <code>figcaption</code> elements are not currently supported.</li>
  <li>The timestamp information in the text alternative will need to be updated each time the image is updated, this can be easily be achieved using scripting on the server or  client side.</li>
</ul>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith House, looking north.</p>
<div class="example">
  <p><strong>Image example in context:</strong></p>
  <div class="element1">
    <p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
In the foreground are the safety rails on the flat part of the roof. Nearby ther are low rise industrial buildings, beyond those are block of flats.
In the distance there's a church steeple." width="296" height="225"></p>
    <p>View from the top of Sopwith house, looking towards North Kingston.</p>
    <p>This image is updated every hour.</p>
    <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
  </div>
  <p><strong>Code Example:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
beyond are blocks of flats. In the distance there's a church steeple."</strong> aria-describedby="s1"&gt;
&lt;figcaption id="s1"&gt;View from the top of Sopwith house, looking towards north Kingston.&lt;/figcaption&gt;
&lt;p&gt;This image is updated every hour.&lt;/p&gt;
&lt;p&gt;View the &lt;a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston"&gt;
latest weather details&lt;/a&gt; for Kingston upon Thames.&lt;/p&gt;
&lt;/figure&gt;  </pre>
</div>
<h4 id="hbh">Example 10.2</h4>
<p>This example is the same as Example 10.1 except  the descriptive part of the text alternative is not in the alt attribute, it is in a paragraph associated with the image using <code>aria-describedby</code>. </p>
<p><strong>Note: </strong>the <code>aria-describedby</code> attribute on the <code>img</code> element contains 2 <code>id</code> values. That of the image caption and the images longer text alternative. For browsers that support <code>aria-describedby</code> this will result in the text content of the referenced elements be joined together as the content of the images accessible description:</p>
<p>"View from the top of Sopwith house, looking towards north Kingston. In the foreground of the image are the safety rails on the flat part of the roof.
  Nearby there are low rise industrial buildings, beyond are blocks of flats.
  In the distance there's a church steeple."</p>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
<div class="example">
  <p><strong>Image example in context:</strong></p>
  <div class="element1">
    <p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds." width="296" height="225"></p>
    <p>View from the top of Sopwith house, looking towards North Kingston.</p>
    <p>This image is updated every hour.</p>
    <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
    <p><strong>Sopwith House Weather cam image description:</strong></p>
    <p>In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
      beyond are blocks of flats. In the distance there's a church steeple.</p>
  </div>
  <p><strong>Code Example:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds."</strong> <strong>aria-describedby="s1 s2"</strong>&gt;
&lt;figcaption id="s1"&gt;View from the top of Sopwith house, looking towards north Kingston.&lt;/figcaption&gt;
&lt;p&gt;This image is updated every hour.&lt;/p&gt;
&lt;p&gt;View the &lt;a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston"&gt;
latest weather details&lt;/a&gt; for Kingston upon Thames.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Sopwith House Weather cam image description:&lt;/strong&gt;&lt;/p&gt;
<strong>&lt;p id="s2"&gt;In the foreground of the image are the safety rails on the flat part of the roof.
Nearby there are low rise industrial buildings, beyond are blocks of flats.
In the distance there's a church steeple.&lt;/p&gt;</strong>
&lt;/figure&gt;
</pre>
</div>
<h4 id="hbi">Example 10.3</h4>
<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use include the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
<div class="example">
  <p><strong>Image example in context:</strong></p>
  <div class="element1">
    <p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken." width="296" height="225"></p>
    <p>View from the top of Sopwith house, looking towards North Kingston.</p>
    <p>This image is updated every hour.</p>
    <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
    <p><strong>Sopwith House Weather cam image description:</strong></p>
    <p>In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
      beyond are blocks of flats. In the distance there's a church steeple.</p>
  </div>
  <p><strong>Code Example 1:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken."</strong> <strong>aria-describedby="s1 s2"</strong>&gt;
&lt;figcaption id="s1"&gt;View from the top of Sopwith house, looking towards north Kingston.&lt;/figcaption&gt;
&lt;p&gt;This image is updated every hour.&lt;/p&gt;
&lt;p&gt;View the &lt;a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston"&gt;
latest weather details&lt;/a&gt; for Kingston upon Thames.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Sopwith House Weather cam image description:&lt;/strong&gt;&lt;/p&gt;
<strong>&lt;p id="s2"&gt;In the foreground of the image are the safety rails on the flat part of the roof.
Nearby there are low rise industrial buildings, beyond are blocks of flats.
In the distance there's a church steeple.&lt;/p&gt;</strong>
&lt;/figure&gt; </pre>
  <p><strong>Code Example 2:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="webcam1.jpg" <strong>alt="Sopwith house weather cam."</strong> <strong>aria-describedby="s1 s2"</strong>&gt;
&lt;figcaption id="s1"&gt;View from the top of Sopwith house, looking towards north Kingston.&lt;/figcaption&gt;
&lt;p&gt;This image is updated every hour.&lt;/p&gt;
&lt;p&gt;View the &lt;a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston"&gt;
latest weather details&lt;/a&gt; for Kingston upon Thames.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Sopwith House Weather cam image description:&lt;/strong&gt;&lt;/p&gt;
<strong>&lt;p id="s2"&gt;</strong>In the foreground of the image are the safety rails on the flat part of the roof.
Nearby there are low rise industrial buildings, beyond are blocks of flats.
In the distance there's a church steeple.<strong>
 Across the top of the image is date and time information indicating when it was taken.&lt;/p&gt;</strong>
&lt;/figure&gt; </pre>
</div>

<h4 id="hbj">Related  techniques and resources</h4>
<ul>
  <li> <a href="http://www.w3.org/WAI/PF/aria-practices/#Descriptions"><abbr
  title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring
  Practices 1.0, 4.1.2 Describing</a> [<cite><a
  href="#bib-WAI-ARIA-PRACTICES" rel="biblioentry"
  class="bibref">WAI-ARIA-PRACTICES</a></cite>]</li>
  <li><a href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5   figure element</a></li>
  <li><a href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5   figcaption element</a></li>
</ul>
</div>
<div class="section" id="sec11">
<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture with and without links</h3>
<p>When a picture has been sliced into smaller image files that are then displayed   together to form the complete picture again, one of the images <em title="must" class="rfc2119">must</em> have its alt attribute set as   per the relevant rules that would be appropriate for the picture as a whole, and   then all the remaining images <em title="must" class="rfc2119">must</em> have an empty alt attribute.</p>
<h4 id="hbii">Example 11.1</h4>
<div class="example">
  <p>In this example, a picture representing a company logo for the <span title="">PIP Corporation</span> has been split into two pieces, the first containing   the letters "PIP" and the second with the word "CO". The alternative text   ("PIP CO") is all in the first image.</p>
  <p><strong>Example Image:</strong></p>
  <div class="element1">
    <p><img src="images/pip.gif" alt="PIPCO" style="border:none" width="99" height="64"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;h1&gt;&lt;img src="pip.gif" <strong>alt="PIP CO"</strong>&gt;&lt;img src="co.gif" <strong>alt=""</strong>&gt;&lt;/h1&gt;

</pre>
</div>
<h4 id="hbk">Example 11.2</h4>
<div class="example">
  <p>In this example, a picture representing a company logo for the <span title="">PIP Corporation</span> has been split into two pieces, the first containing   the word "PIP" and the second with the abbreviated word "CO". The images are the sole content of a link to the PIPCO home page. In this case the text alternative <em title="must" class="rfc2119">must</em> be a description of the link target. The alternative text   ("PIP CO home") is all in the first image. </p>
  <p><strong>Example Image:</strong></p>
  <div class="element1">
    <p><a href="#"><img src="images/pip.gif" alt="PIP CO" style="border:none" width="99" height="64"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></a></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;h1&gt;&lt;a href="pipco-home.html"&gt;
&lt;img src="pip.gif" <strong>alt="PIP CO home"</strong>&gt;&lt;img src="co.gif" <strong>alt=""</strong>&gt;&lt;/a&gt;&lt;/h1&gt;

</pre>
</div>
</div>
<div class="section" id="sec12">
<h3 id="unknown"><span class="secno">3.12 </span> When a text alternative is unknown at the time of publication</h3>
<p>In some cases an image may be included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum conformance requirement is to provide a caption for the image. The caption <em title="must" class="rfc2119">must</em> be provided using   the <code>figcaption</code> element and the <code>alt</code> attribute. The use of <code>figcaption</code> is recommended over the use of the <code>alt</code> attribute as the <code>figcaption</code> element is designed as a container for caption text, while the alt attribute is designed as a container for a text alternative. In practice the <code>alt</code> attribute has and will continue to provide a more generic method for providing information about an image until such times that the <code>figcaption</code> element is well supported in browsers and assistive technologies.</p>
<h4 id="hbii2">Example 12.1</h4>
<div class="example">
  <p>In  example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide for text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative.</p>
  <p><strong>Examples of an image in context:</strong></p>
  <h5 id="example-a">Example A:</h5>
  <p class="warning">The caption text in Example A is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. <span>[<cite><a href="#bib-WCAG20" rel="biblioentry" class="bibref">WCAG20</a></cite>]</span></p>
  <div class="element1">
  <p><strong>My Photos &gt; Photos of Clara</strong></p>
<p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
  <p><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="clara.jpg" <strong>alt="Photo 1."</strong>&gt;
&lt;figcaption&gt;<strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong>&lt;/figcaption&gt;<br>&lt;/figure&gt;
</pre>
  <h5 id="example-b">Example B:  </h5>
  <div class="element1">
    <p><strong>My Photos &gt; Photos of Clara</strong></p>
    <p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
    <p><strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
She looks like a real 'Rock &amp; Roll' girl.</strong><strong></strong></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;figure&gt;
&lt;img src="clara.jpg" <strong>alt="Photo 1."</strong>&gt;
&lt;figcaption&gt;<strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
She looks like a real 'Rock &amp; Roll' girl.</strong>&lt;/figcaption&gt;<br>&lt;/figure&gt;</pre></div>

</div>
<div class="section" id="sec13">
<h3 id="captcha"><span class="secno">3.13 </span>CAPTCHA Images </h3>
<p><a title="http://www.w3.org/TR/WCAG20/#atdef" href="http://www.w3.org/TR/WCAG20/#CAPTCHAdef">CAPTCHA</a> stands for   "Completely Automated Public Turing test to tell Computers and Humans Apart".   CAPTCHA images are used for security purposes to confirm that <a title="http://www.w3.org/TR/WCAG20/#contentdef" href="http://www.w3.org/TR/WCAG20/#contentdef">content</a> is being accessed by   a person rather than a computer. This authentication is done through visual   verification of an image. CAPTCHA typically presents an image with characters or   words in it that the user is to re-type. The image is usually distorted and has   some noise applied to it to make the characters difficult to read. </p>
<p>Provide <a title="http://www.w3.org/TR/WCAG20/#text-altdef" href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> that   identify and describe the purpose of the <a title="http://www.w3.org/TR/WCAG20/#non-text-contentdef" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>,   and provide alternative forms of the CAPTCHA using output modes for different   types of sensory perception. For instance provide an audio alternative along   with the visual image. Locate the audio option right next to the visual one.   This helps but is still problematic for people without sound cards, the   deaf-blind, and some low hearing people. Another method is to include a form   that asks a question along with the visual image. This helps but is can be   problematic for people with cognitive impairments. </p>
<p><span class="warning">It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's <a href="http://www.w3.org/TR/turingtest/">Inaccessibility of CAPTCHA</a>.</span></p>
<h4 id="hbl">Example 13.1</h4>
<p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
<div class="example">
  <p><strong>Example Image:</strong></p>
  <div class="element">
    <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p>
  </div>
  <p><strong>Example code:</strong> </p>
  <pre>&lt;img src="captcha.png" <strong>alt="An audio challenge follows if you cannot view this image."</strong>&gt;
&lt;!-- audio CAPTCHA option that allows the user to listen and type the word --&gt;
&lt;!-- form that asks a question --&gt;</pre>
</div>
<h4 id="hbm">Further Techniques </h4>
<ul>
  <li><a title="http://www.w3.org/TR/WCAG20-TECHS/G143.html" href="http://www.w3.org/TR/WCAG20-TECHS/G143.html">Providing a text alternative   that describes the purpose of the CAPTCHA</a> W3C Note. </li>
  <li><a title="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html" href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html">Ensuring   that the Web Page contains another CAPTCHA serving the same purpose using a   different modality</a> W3C  Note. </li>
</ul>
</div>
<div class="section" id="sec14">
<h3 id="logos"><span class="secno">3.14 </span>Logos, insignia, flags, or emblems</h3>
<p>Many pages include logos, insignia, flags, or emblems, which    stand for  a company, organization,    project, band, software package, country, or other entity.</p>
<p>If the logo is the sole content of a link, the <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em>    contain a brief description of the link target.</p>
<h4 id="ex141">Example 14.1</h4>
<div class="example">
  <p><strong>Example:</strong></p>
  <div class="element">
    <p><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" alt="HTML5 specification" width="128" height="128"></a></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;a href="http://dev.w3.org/html5/spec/spec.html"&gt;
&lt;img src="HTML5_Logo.png" <strong>alt="HTML5 specification"</strong>&gt;&lt;/a&gt;</pre>
</div>
<h4 id="ex142">Example 14.2</h4>
<p>If the logo is being used to represent the entity, e.g. as a page    heading, the <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em>    contain the name of the entity being represented by the logo. The <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="should not" class="rfc2119">should not</em> contain text like the word "logo", as it is not the fact that it is    a logo that is being conveyed, it's the entity itself. </p>
<div class="example">
  <p><strong>Example:</strong></p>
  <div class="element">
    <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;abbr title="World Wide Web Consortium"&gt;
&lt;img src="images/w3c_home.png" <strong>alt="W3C"</strong>&gt;
&lt;/abbr&gt;
</pre>
</div>

<h4 id="ex143">Example 14.3</h4>
<p>If the logo is being used next to the name of the what that    it represents, then the logo is supplemental, and its <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> instead be    empty.</p>
<div class="example">
  <p><strong>Example:</strong></p>
  <div class="element">
    <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr>  W3C (World Wide Web Consortium)</p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>&lt;p&gt;&lt;img src="images/w3c_home.png" <strong>alt=""</strong>&gt;
 W3C (World Wide Web Consortium)&lt;/p&gt;</pre></div>
<h4 id="ex144">Example 14.4</h4>
<p>If the logo is  used alongside text discussing the subject or entity the logo represents, then <!--If the logo is actually being    discussed, then it is being used as a phrase or paragraph (the    description of the logo) with an alternative graphical    representation (the logo itself), and the first entry above    applies.-->the logo should have a text alternative, its identification as a logo may be included in the text alternative.</p>
<div class="example">
  <p><strong>Example:</strong></p>
  <div class="element1">
    <p style="float:left"><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128"></a></p>

    <p>excerpt from Wikipedia</p>
    <blockquote cite="http://en.wikipedia.org/wiki/HTML5">
      <p><strong>HTML5</strong> is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).
    </p></blockquote>
  </div>
  <p><strong>Example code:</strong></p>
  <pre style="clear:both">&lt;p&gt;&lt;img src="HTML5_Logo.png"
<strong>alt="HTML5 logo: It looks like a shield with the text 'HTML' above  and the numeral '5' prominent on the face of the shield."</strong>&gt;&lt;/p&gt;

&lt;p&gt;excerpt from Wikipedia...&lt;/p&gt;</pre>
</div>
</div>
<div class="section" id="sec15">
<h3 id="inline"><span class="secno">3.15 </span>Inline images</h3>
<p>When images are used inline as part of the flow of text in a sentence, the text alternative <em title="must" class="rfc2119">must</em> be a word or phrase that makes sense in the context of the sentence it is contained in.</p>
<div class="example">
  <p><strong>Example Image:</strong></p>
  <div class="element1">
    <p><span class="inline">I <img src="images/heart.png" alt="love" width="27" height="24"> you.</span></p>
  </div>
  <p><strong>Example code:</strong> </p>
  <pre>I &lt;img src="heart.png" <strong>alt="love"</strong>&gt; you.
</pre>

  <p><strong>Example Image:</strong></p>
  <div class="element1">
    <p><span class="inline">My <img src="images/heart.png" alt="heart" width="27" height="24"> breaks.</span></p>
  </div>
  <p><strong>Example code:</strong></p>
  <pre>My &lt;img src="heart.png" <strong>alt="heart"</strong>&gt; breaks.</pre>
</div></div>
</div>
<hr>
<div class="section" id="methods">
<!--OddPage--><h2 id="methods2"><span class="secno">4. </span>Methods for Providing Text Alternatives</h2>
<h3 id="native">Native HTML methods</h3>

<div class="section" id="secm1">
<h3 id="altmethod"><span class="secno">4.1 </span>The <code>img</code> element <code>alt</code> attribute</h3>
<p>The primary method for providing text alternatives for images is by including text in the <code>img</code> element <code>alt</code> attribute.  In graphical   browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers  may display the alt attribute content  in brackets or in  different colored text or as the content of a link to the image or as text without any indication of the image or  prefixed with an indication of the image.</p>
<p><strong>Example:</strong></p>
<pre>&lt;img src="example.jpg" <strong>alt="Alternative text."</strong>&gt;</pre>
<h5 id="hd">Advantages:</h5>
<ul>
  <li>Robust support in most graphical &amp; non graphical web browsers and assistive technologies.</li>
  <li>Text alternative is explicitly associated with the image.</li>
  <li>Inclusion of text alternatives as alt attribute content does not impact upon the default visual display of content.</li>
</ul>
<h5 id="hdd">Disadvantages:</h5>
<ul>
  <li>Content of the alt attribute is not available to some users who may find it useful.</li>
  <li>If the alt attribute content is too long it may cause display issues in some browsers.</li>
  <li>If the alt attribute content is too long it may cause reading issues in some assistive technologies.</li>
  <li>Semantic structure cannot be added to alt attribute content.</li>
</ul>

<div class="section" id="secm2">
<h4 id="replacement"><span class="secno">4.1.1 </span>Is alt attribute content a replacement for an image?</h4>
<p>The answer to this question depends on the content of the image and the context the image is being used in:</p>
<ul>
  <li>When an image contains too much information to use the alt attribute as a container for a text alternative  the alt attribute content can be a label for the image. This label <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> be accompanied by a more complete text alternative that is programmatically associated with the image. Refer to <a href="#haee">Example 2.3</a>.</li>
  <li>When an image contains structured information that cannot be conveyed using the alt attribute as a container for a text alternative  the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> be a label for the image. This label <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> be accompanied by a structured text alternative that is programmatically associated with the image. Refer to <a href="#hag21">Example 2.5</a>.</li>
  <li>When an image is used to represent text and it is the authors intent the purpose of the using an image of text is to achieve a visual style, the alt attribute content <em title="should" class="rfc2119">should</em> be considered as a replacement for the image. Refer to <a href="#img-of-text">Section 3</a>.</li>
  <li>When an image is decorative and it is the authors intent that it not convey any information, an empty alt attribute <em title="should" class="rfc2119">should</em> be considered as an indication that the image can be safely ignored. Refer to <a href="#decorative">Section 5</a>.</li>
  <li>When it is the authors intent that image is not to be seen by users, an empty alt attribute <em title="should" class="rfc2119">should</em> be considered as an indication that the image can be safely ignored. Refer to <a href="#img-not-for-user">Section 7</a>.</li>
  <li>When an image is immediately proceeded or preceded by a text alternative and the image and the text alternative are not complex in nature, an empty alt attribute <em title="should" class="rfc2119">should</em> be considered as an indication that the image can be safely ignored.</li>
  <li>When an image is the sole content of a link, the alt attribute content <em title="should" class="rfc2119">should</em> be a brief description of the link target. Refer to <a href="#hba">Example 1.1</a>.</li>
  <li>When an image is the  content of a link and is immediately proceeded or preceded by a brief description of the link target, the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> be empty. Refer to <a href="#hba">Example 8.1</a>.</li>
  <li>When an image is the  content of a link that also contains structured text content, if the text content is a description of the link target, the <code>alt</code> attribute content <em title="may" class="rfc2119">may</em> be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content <em title="should" class="rfc2119">should</em> be a brief description of the link target. <a href="#hav">Refer to Example 6.3</a>.</li>
</ul>
</div>
<div class="section" id="secm3">
<h4 id="empty"><span class="secno">4.1.2 </span>Using an empty <code>alt</code> attribute <code>alt=""</code></h4>
<p>Circumstances in which <strong>it is</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
<ul>
  <li>An image is purely <a href="#decorative">decorative</a>.</li>
  <li>An image is not meant to be <a href="#img-not-for-user">visible to any user</a>.</li>
  <li>An image consists of text that is repeated as text or a <a href="#icons">graphical symbol</a> whose meaning is conveyed as text, immediately before or after the image.</li>
  <li>The image is part of a <a href="#imgslices">group of images</a> that  form a single larger picture and one of the other images in the group has a text alternative which serves as the text alternative for the single larger picture.</li>
  <li>The image is included as the content of a link and there is <a href="#hba">other content included</a> that clearly describes the link target.</li>
</ul>
<p>Circumstances in which <strong>it is not</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
<ul>
  <li>An image is contained within a <code>figure</code> element and has an associated caption provided using the <code>figcaption</code> element. Using an empty alt attribute hides an image from some users. If an image has a caption the image needs to be discoverable by users, otherwise a caption is present that refers to nothing for some users.</li>
  <li>An image contains relevant information not available in the same document as text. Using an empty alt attribute hides an image from some users, in order to have the possibility of interrogating the image, the image must be discoverable.</li>
  <li>An image contains relevant information,  an alternative interpretation of which is available in the same document as structured text. Using an empty alt attribute hides an image from some users, which is incorrect, the image is not meaningless, it  contains information which a range of users could interpret with the  aid of the short text alternative and longer description. It also provides a text  alternative for users who have images turned off in their browsers, so  they can, if they wish, load and view the image. If an empty <code>alt</code> attribute is present  there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a <a href="#hpa">programmatic association</a> between the image and the descriptive text is required, using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.</li>
</ul>
</div>
<div class="section" id="m5">
<h4 id="he"><span class="secno">4.1.3 </span>How long should a  text alternative be?</h4>
<p>The answer to this question very much depends on the context an image is being used in. While there are no definitive right or wrong lengths for text alternatives provided using the <code>img</code> elements <code>alt</code> attribute, the general consensus is that if the text alternative is longer than  75-100 characters (1 to 2 sentences), it should not be considered a short text alternative and should not be presented using the <code>alt</code> attribute.</p>
</div>
</div>
<div class="section" id="m6">
<h3 id="hf"><span class="secno">4.2 </span>The <code>figure</code> and <code>figcaption</code> elements</h3>
<p>The <code>figure</code> and <code>figcaption</code> elements provide a method to explicitly associate a caption with with a variety of content including images. Any content inside the <code>figure</code> element that is not contained within the <code>figcaption</code> element is labelled by the content of the <code>figcaption</code> element. The <code>figcaption</code> content may be an adjunct to the text alternative provided using the alt attribute:</p>
<div class="example">
  <p>The <code>figcaption</code> content may be a text alternative for the image, obviating the need for a text alternative provided using the <code>alt</code> attribute. This would only be the case if the <code>figcaption</code> content provides an adequate text alternative for the visual content in the image:</p>
  <p><strong>Example A:</strong></p>
  <div class="element">
    <p><img src="images/shadows.jpg" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp." width="400" height="310"></p>
  </div>
  <p><strong>Code example:</strong>:</p>
<pre>&lt;img src="example.jpg" <strong>alt="Shadow like figures and a graffiti tag drawn on the walls of a partially
demolished building, illuminated by the light from a street lamp."</strong>&gt;</pre>
<p><strong>Example B: </strong></p>
<div class="element1">
  <p><img src="images/shadows.jpg" width="400" height="310" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp."></p>
  <p><strong>Shadow like figures and a graffiti tag drawn on the walls of a
 partially demolished building, illuminated by the light from a street lamp. </strong></p>


</div>  <p><strong>Code example:</strong></p>
<pre>&lt;figure&gt;   <br>&lt;img src="shadows.jpg"&gt;   <br>&lt;figcaption&gt;<strong> Shadow like figures and a graffiti tag drawn on the walls of a
 partially demolished building, illuminated by the light from a street lamp. </strong>&lt;/figcaption&gt;   <br>&lt;/figure&gt;</pre>
</div>
<h5 id="hg">Advantages:</h5>
<ul>
  <li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image.</li>
</ul>
<h5 id="hi">Disadvantages:</h5>
<ul>
  <li>The <code>figure</code> and <code>figcaption</code> elements are not currently accessibility supported by browsers or assistive technology. </li>
</ul>
</div>
<div class="section" id="secm7">
<h3 id="hv"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</h3>
<p>The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a text alternative for an image. The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a caption for an image, use the <code>figure</code> and <code>figcaption</code> elements to provide a caption, as described above.</p>
</div>
</div>
<hr>
<div class="section" id="gloss">
<!--OddPage--><h2 id="glossary"><span class="secno">5. </span>Glossary</h2>

<h3 id="api">Accessibility <abbr title="Application Programming Interface">API</abbr></h3>
 <p>Operating systems and other platforms provide a set of interfaces that expose information about <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_object">objects</a> and <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_event">events</a> to <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_at">assistive technologies</a>. Assistive technologies use these interfaces to get information about and interact with those <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_widget">widgets</a>. Examples of this are the <a href="http://java.sun.com/javase/technologies/accessibility/index.jsp">Java Accessibility <abbr title="Application Programming Interface">API</abbr></a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_JAPI">JAPI</a>], <a href="http://msdn.microsoft.com/en-us/library/ms697270%28VS.85%29.aspx">Microsoft Active Accessibility</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_MSAA">MSAA</a>], <a href="http://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/Accessibility/cocoaAXIntro/cocoaAXintro.html">the Mac <acronym title="OS Ten">OS X</acronym> Accessibility Protocol</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_AXAPI">AXAPI</a>], the <a href="http://library.gnome.org/devel/atk/">Gnome Accessibility Toolkit (ATK)</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_ATK">ATK</a>], and <a href="http://www.linuxfoundation.org/collaborate/workgroups/accessibility/iaccessible2">IAccessible2</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_IA2">IA2</a>].
</p>
<h3 id="acc_name">Accessible name</h3>
<p>The accessible name is the name of a user interface element. Each platform <a href="#api">accessibility API</a> provides the accessible name property. The value of the accessible name   may be derived from a visible (e.g., the visible text on a button) or   invisible (e.g., the text alternative that describes an icon) property   of the user interface element.</p>
<h3 id="hbp">alt text </h3>
<p>Colloquial term for a text alternative provided  using the <code>alt</code> attribute of an <code>img</code> element.</p>
<h3 id="hbq">assistive technology</h3>
<p>Hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more <a href="http://www.w3.org/TR/WCAG20/#atdef">detailed explanation of assistive technology</a> is provided in the WCAG 2.0 glossary.</p>
<h3 id="hbr">content (Web content) </h3>
<p>Information and sensory experience to be communicated to the user by means of a user agent such as a web browser, including code or markup that defines the content's structure, presentation, and interactions. </p>
<h3 id="hpa">programmatic association</h3>
<p>It must  be possible for people using assistive technologies to find   the text alternative for an image when they encounter the image that they cannot   use. To accomplish this,  the text must be "programmatically   associated" with the image. This means that the user must be able to   use their assistive technology to find the alternative text (that they can use)   when they land on the image (that they can't use).</p>
<h3 id="hbs">non-text content </h3>
<p>Any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language </p>
<p>Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text. </p>
<h3 id="hbt">Empty alt attribute or null alt attribute.</h3>
<p>An alt attribute with no content:</p>
<pre class="example">&lt;img src="null.gif" <strong>alt=""</strong>&gt;</pre>
<h3 id="hbu">Text alternative</h3>
<p><a title="definition: text" href="http://www.w3.org/TR/WCAG20/#textdef">Text</a> that is   programmatically associated with <a title="definition: non-text content" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text   content</a> or referred to from text that is programmatically associated with   non-text content. Programmatically associated text is text whose location can be <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-programmatically-determined-head">programmatically determined</a> from the non-text content.</p>
</div>
<!--<section id="refer">
<h2 id="references">References</h2>
<dl>
  <dt>[<A href="#ref-html5">HTML5</A>] </dt>
  <dd><a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a>, I. Hickson</dd>
  <dt>[<a href="http://www.apps.ietf.org/rfc/rfc2119.html">RFC2119</a>]</dt>
  <dd><a href="http://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>, S. Bradner. IETF.</dd>
  <dt>[<a href="http://www.w3.org/TR/WCAG20/">WCAG</a>]</dt>
  <dd>(Non-normative) <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a>, B. Caldwell, M. Cooper, L. Reid, G. Vanderheiden. W3C.</dd>
</dl>
</section>-->
<div class="section" id="ack">
<!--OddPage--><h2 id="acknowledgements"><span class="secno">6. </span>Acknowledgements</h2>
<p class="note">In no particular order and incomplete.</p>
<p>Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith,  Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark</p>
</div>
<div class="appendix section" id="references"><!--OddPage--><h2><span class="secno">A. </span>References</h2><div class="section" id="normative-references"><h3><span class="secno">A.1 </span>Normative references</h3><dl class="bibliography">
<dt id="bib-HTML5">[HTML5]</dt>
<dd>Ian Hickson.
 <a href="http://www.w3.org/TR/html5/"><cite>HTML 5.</cite></a> 05 April 2011. W3C Working Draft. (Work in progress.)
 URL: <a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a>
</dd><dt id="bib-RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119.  URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
</dd></dl></div><div class="section" id="informative-references"><h3><span class="secno">A.2 </span>Informative references</h3><dl class="bibliography"><dt id="bib-WAI-ARIA-PRACTICES">[WAI-ARIA-PRACTICES]</dt><dd>Michael Cooper; Richard Schwerdtfeger; Lisa Pappas. <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224"><cite>WAI-ARIA Best Practices.</cite></a> 24 February 2009. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224">http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224</a>
</dd><dt id="bib-WCAG20">[WCAG20]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211"><cite>Web Content Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211">http://www.w3.org/TR/2008/REC-WCAG20-20081211</a>
</dd><dt id="bib-WCAG20-TECHS">[WCAG20-TECHS]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211"><cite>Techniques for WCAG 2.0.</cite></a> 11 December 2008. W3C Note. URL: <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211">http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211</a>
</dd></dl></div></div></body></html>