techniques/aria/ARIA15.html

<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-describedby to provide descriptions of images</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-describedby to provide descriptions of images</h1><section class="meta"><p class="id">ID: ARIA15</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
      <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
   </section><section id="description"><h2>Description</h2>
      <p>The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object. 
</p>
      <p>A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the <code class="prop">aria-describedby</code> property. This is similar to the <code class="att">longdesc</code> attribute in that both are useful for providing additional information to help users understand complex images. Like <code class="att">longdesc</code>, descriptive text provided using <code class="att">aria-describedby</code> is separate from the short name provided using the <code class="att">alt</code> attribute in HTML. Unlike <code class="att">longdesc</code>, <code class="att">aria-describedby</code> cannot reference descriptions outside of the page containing the image. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology. It is worth noting that as of the time of writing (October 2013) some assistive technologies read <code class="att">aria-describedby</code> content immediately after an image's alt attribute information without user activation - whereas most implementations of <code class="att">longdesc</code> require the user to take explicit action to read the additional description.
</p>
      <p>Like <code class="att">aria-labelledby</code>, <code class="att">aria-describedby</code> can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
</p>
   </section><section id="examples"><h2>Examples</h2>
      <section class="example">
         <h3>Describing an image</h3>
         
            <p>The following example shows how <code class="att">aria-describedby</code> can be applied to an image to provide a long description, where that text description is on the same page as the image. 
</p>
            <pre xml:space="preserve">&lt;img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1"&gt;
&lt;p id="p1"&gt;This painting dates back to 1730 and is oil on canvas. It was created by 
Jean-Guy Millome, and represents ...&lt;/p&gt;</pre>
         
      </section>
   </section><section id="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
         <ol>
            <li>Examine each image element where a <code class="att">aria-describedby</code> attribute is present.
</li>
            <li>Examine whether the <code class="att">aria-describedby</code> attribute  programatically associates an element with its text description, via the <code class="att">id</code> attribute on the element where the text to be used as the description is found. 
</li>
            <li>Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.
</li>
         </ol>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>#1, #2, and #3 are true.</li>
         </ul>
      </section>
   </section><section id="related"><h2>Related Techniques</h2><ul>
      <li><a href="../aria/ARIA6">ARIA6</a></li>
      <li><a href="../aria/ARIA16">ARIA16</a></li>
      <li><a href="../general/G92">G92</a></li>
      <li><a href="../html/H45">H45</a></li>
   </ul></section><section id="resources"><h2>Resources</h2>
      
         <ul>
            <li> 
                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
               </li>
            <li> 
                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
               </li>
         </ul>
      
   </section></body></html>