Previous Page  |  Next Page  |  Table of Contents  |  Diagram Center Home

Sample 1: Heart and Lung Diagram

the heart and lungs

Click or select image to zoom

This image of the heart and lungs is taken from a middle school health textbook. The full page where it appears can be seen below.

full page for heart and lungs image

Click or select image to zoom

Making This Image Accessible

This image can be made accessible with an image description or by using a tactile graphic. The choice of modality varies depending on factors such as the information to be conveyed, grade level, student knowledge and experience, and the image itself.

Written image descriptions are widely used for images that illustrate a process or simple concept. Tactile images are used for images or diagrams where the physical relationships between elements of the image are important.

How the image description is displayed depends on the reading tool being used. In most mainstream reading tools, the description will not be displayed at all, but in tools designed for accessibility (or mainstream tools with accessibility features enabled) the description could be displayed below the image, voiced as part of the content, or both.

This is an example of an image in which text is embedded in the image and is not accessible. The content needs to be extracted from the image and included in the description.

Text or Audio Description

Systems in Sync. The circulatory and respiratory systems work together to transport oxygen-rich blood through the body.

A diagram shows a cross-section of a heart between two lungs. Red arrows show the path of oxygen-rich blood cells. Blue arrows show the path of oxygen-poor blood.
  1. Oxygen-rich blood cells travel to the heart from the lungs.
  2. The heart pumps enriched blood cells. They travel through the arteries to the body.
  3. Throughout the body, red blood cells deliver oxygen to cells and remove carbon dioxide.
  4. Veins carry oxygen-poor blood back to the heart.
  5. The heart pumps blood back to the lungs to eliminate carbon dioxide and absorb oxygen.
  6. Red blood cells move through the lungs, taking in oxygen and exchanging it for carbon dioxide.

EPUB 3

Image description implemented in epub3

Click or select image to zoom

The image above shows how the image description would look when implemented in an EPUB 3 file. The code used to create it is:


   <figure>
      <div><img src="images/images/ex1.jpg" alt="A cross-section view of oxygen-rich blood flows between the heart and lungs."/></div>
      <figcaption id="fig-01">
         <p>The heart and lungs</p> <a epub:type="noteref" role="doc-noteref" href="#heart-and-lungs-desc">Description</a>
      </figcaption>
   </figure>
...     
   <aside epub:type="footnote" role="doc-footnote" id="heart-and-lungs-desc">
       <p><a epub:type="backlink" role="doc-backlink" href="#fig-01">Figure 1.</a>Systems in Sync. The circulatory and respiratory systems work together to transport oxygen-rich blood through the body.</p>
       <p>A diagram shows a cross-section of a heart between two lungs. Red arrows show the path of oxygen-rich blood cells. Blue arrows show the path of oxygen-poor blood.</p>
       <ol>
          <li>Oxygen-rich blood cells travel to the heart from the lungs.</li>
          <li>The heart pumps enriched blood cells. They travel through the arteries to the body.</li>
          <li>Throughout the body, red blood cells deliver oxygen to cells and remove carbon dioxide.</li>
          <li>Veins carry oxygen-poor blood back to the heart.</li>
          <li>The heart pumps blood back to the lungs to eliminate carbon dioxide and absorb oxygen.</li>
          <li>Red blood cells move through the lungs, taking in oxygen and exchanging it for carbon dioxide.</li>
       </ol>
   </aside>

DAISY

image description implemented in DAISYClick or select image to zoom

The image above shows how the image description would look when implemented in a DAISY file. The code used to create it is:

<imggroup>
	<p><img id="ex_1" src="images/ex1.jpg" alt="the heart and lungs" /></p>
	<prodnote id="prodnote_000001">
		<p smilref="examplar1.smil#p_000001">Systems in Sync. The circulatory and respiratory systems work together to transport oxygen-rich blood through the body.</p>
		<p>A diagram shows a cross-section of a heart between two lungs. Red arrows show the path of oxygen-rich blood cells. Blue arrows show the path of oxygen-poor blood.</p>
		<list type="ol">
			<li>Oxygen-rich blood cells travel to the heart from the lungs.</li>
			<li>The heart pumps enriched blood cells. They travel through the arteries to the body.</li>
			<li>Throughout the body, red blood cells deliver oxygen to cells and remove carbon dioxide.</li>
			<li>Veins carry oxygen-poor blood back to the heart.</li>
			<li>The heart pumps blood back to the lungs to eliminate carbon dioxide and absorb oxygen.</li>
			<li>Red blood cells move through the lungs, taking in oxygen and exchanging it for carbon dioxide.</li>
		</list>
	</prodnote>
</imggroup>

Tactile Graphic

A tactile graphic allows the image to be interpreted manually. This graphic was developed for microcapsule paper production.

picture of tactile graphic example

Click or select image to zoom

second page of tactile graphic example

Click or select image to zoom

The first image contains the diagram and the key. The second image includes all of the numbered text that is part of the original image.

Previous Page  |  Next Page  |  Table of Contents  |  Diagram Center Home

Ideas that work.The DIAGRAM Center is a Benetech initiative supported by the U.S. Department of Education, Office of Special Education Programs (Cooperative Agreement #H327B100001). Opinions expressed herein are those of the authors and do not necessarily represent the position of the U.S. Department of Education.

HOME | BACK TO TOP

  Copyright 2019 I Benetech

Log in with your credentials

Forgot your details?