Description

An illustratration of a key concept of the work, such as a code listing, case study or problem.

Examples

Example 1 — Figure example
<figure role="doc-example" aria-labelledby="ex01-hd">
   <figcaption>
      <p class="hd" id="ex01-hd">Example 1 — Glucose Molecule</p>
      
      <details>
         <summary>Description</summary>
         <p>The 6 carbon atoms are ordered …</p>
       </details>
   </figcaption>
   
   <img src="glucose.jpeg" alt="C6H1206" aria-describedby="glucose-desc"/>
</figure>
Example 2 — Code example
<p>The most basic hello world example:</p>
   <pre role="doc-example">print "Hello World!";</pre>
<p>can be executed after compiling …</p>

Relation to ARIA

doc-example inherits its semantics from the section role (i.e., it represents a container of related content, but is not a landmark).

Usage

doc-example is typically used on figure and pre elements.

For a simplified list of all the elements the role is allowed on, refer to the mapping table in the EPUB Type to ARIA Role Authoring Guide. For the official list of allowed elements, refer to ARIA in HTML.

Related Links