Sample 3: Charts and Graphs (Part 1)

Institutional Discrimination Bar Chart

This bar chart about institutional discrimination is taken from a postsecondary sociology textbook. The full page where it appears can be seen below.

Making This Image Accessible

This image can be made accessible with image descriptions or by creating a tactile graphic that would support different learning styles and braille readers. 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. In this example, it is necessary to provide both a short description and a long description. Since there are several equally effective ways to describe the image, we have provided two short descriptions and two long descriptions.

How an 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 accessible 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.

Short Text or Audio Description

Option 1:

Figure 9.2, based on a national sample, displays three bar graphs that illustrate institutional discrimination and predatory lending for house loans.

Option 2:

A bar graph shows that Latino and African American applicants both below and above median income levels are more likely to be denied mortgages or charged higher interest rates.

EPUB 3

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

<figure>
	<div><img src="images/images/soc.jpg" alt="bar chart of institutional discrimination"/></div>
	<figcaption>
		<p>Figure 9.2 Buying a House: Institutional Discrimination and Predatory Lending</p>
		<aside id="soc-desc">
			<p> Figure 9.2, based on a national sample, displays three bar graphs that illustrate institutional discrimination and predatory lending for house loans.</p>
		</aside>
	</figcaption>
</figure>

DAISY

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

<imggroup>
	<p><img id="soc1" src="images/soc.jpg" alt="bar chart of institutional discrimination" /></p>
	<caption>Figure 9.2 Buying a House: Institutional Discrimination and Predatory Lending</caption>
	<prodnote id="prodnote_000001">
		<p smilref="soc.smil#p_000001">Figure 9.2, based on a national sample, displays three bar graphs that illustrate institutional discrimination and predatory lending.</p><p>
	</prodnote>
</imggroup>

Long Text or Audio Description

There are several ways to provide an extended description of the data from the bar chart. Two possibilities are shown below, a list and a table.

Option 1:

Group 1: Applicants whose income was below the median income and were denied mortgages:

• 15% of Whites
• 25% of Latinos
• 30% of African Americans

Group 2: Applicants whose income was above the median income and were denied mortgages:

• 11% of Whites
• 26% of Latinos
• 30% of African Americans

Group 3: Applicants whose income was 100% to 120% of the median income. These applicants’ mortgage applications were approved, but they were charged higher interest or given subprime loans.

• 14% of Whites
• 36% of Latinos
• 43% of African Americans

Option 2:

EPUB 3

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

<figure>
	<div><img src="images/images/soc.jpg" alt="bar chart of institutional discrimination"/></div>
	<figcaption>
		<figcaption id="fig-9-2">Figure 9.2 Buying a House: Institutional Discrimination and Predatory Lending<a epub:type="noteref" role="doc-noteref" href="#soc-desc">Description</a>
 	</figcaption>		
  	</figure>		
       
...

The below detailed description can be placed anywhere in this document. It is not recommended to visibly hide this description making it only available to certain assistive technologies as others who do not use those technologies will not have access to this information.

...
<aside id="soc-desc" epub:type="footnote" role="doc-footnote" id="soc-desc">			
    <p><a epub:type="backlink" role="doc-backlink" href="#fig-9-2">Figure 3.</a></p>
        <table>
		<thead>
			<tr>
		                <th>Ethnicity</th>
				<th>Applicants denied a mortgage (applicant income below median income)</th>
				<th>Applicants denied a mortgage (applicant income above median income)</th>
				<th>Applicants charged higher interest/given subprime loans (applicant income 100% to 120% of median income)</th>
		        </tr>
		</thead>
		<tbody>
			<tr>
				<th>Whites</th>
				<td>15%</td>
				<td>11%</td>
				<td>14%</td>
			</tr>
			<tr>
				<th>Latinos</th>
				<td>25%</td>
				<td>26%</td>
				<td>36%</td>
			</tr>
			<tr>
				<th>African Americans</th>
				<td>30%</td>
				<td>30%</td>
				<td>43%</td>
			</tr>
		</tbody>
	</table>
</aside>

DAISY

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

<imggroup>
	<p><img id="soc1" src="images/soc.jpg" alt="bar chart of institutional discrimination" /></p>
	<caption imgref="soc1">Figure 9.2 Buying a House: Institutional Discrimination and Predatory Lending</caption>
	<prodnote id="prodnote_000001">
		<table>
			<thead>
				<tr>
					<th>Ethnicity</th>
					<th>Applicants denied a mortgage (applicant income below median income)</th>
					<th>Applicants denied a mortgage (applicant income above median income)</th>
					<th>Applicants charged higher interest/given subprime loans (applicant income 100% to 120% of median income)</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Whites</th>
					<td>15%</td>
					<td>11%</td>
					<td>14%</td>
				</tr>
				<tr>
					<th>Latinos</th>
					<td>25%</td>
					<td>26%</td>
					<td>36%</td>
				</tr>
				<tr>
					<th>African Americans</th>
					<td>30%</td>
					<td>30%</td>
					<td>43%</td>
				</tr>
			</tbody>
		</table>
       </prodnote>
</imggroup>

Tactile Graphic

A tactile graphic allows the images to be interpreted manually. This graphic was developed for a high resolution graphics embosser.