What is Accessibility?
- Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should
Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features
| Applets & Scripts | |
| Blinking, Moving, or Flickering Content | |
| Color | |
| CSS | |
| Forms | |
| Frames | |
| Graphs |
A chart or graph is essentially an image with detailed information. Some charts
or graphs have more information and data in them than others. Text browsers
and screen readers cannot convey images to their users, so an equivalent alternative
to the essential information that is visually available from the chart or graph
must be provided. The amount of alternative information to provide depends on
the contextual use of the chart or graph, but generally it should include all
the information available to the sighted user.
All charts and graphs should have alternative text as described in Checkpoint
1 of the Must Have Checkpoints. A summary of
the content is usually appropriate for the ALT attribute of the image. The additional
detail data from the chart or graph is not intended to be included in the ALT
attribute. Instead, use one of the following three techniques:
When to use each technique depends on the contextual use of the chart or graph, the importance of the data, visual design considerations, and support in the browsers.
One of the following techniques is the minimum required. All three techniques are illustrated with the same pie chart used in different contextual situations to distinguish among the techniques.
Include a description of the information in the graph or chart as text surrounding the image.
For example:
This pie chart shows the percentage of cars and trucks passing through a toll booth in one hour:
75% of the vehicles were cars; 25% of the vehicles were trucks.
<img src="assets/piechart.jpg" width="158" height="160" alt="75% cars and 25% trucks">
This technique is used when it is not desirable to include all the detail about
data from the graph in the surrounding text. However, until most browsers support
the long description attribute, it is necessary to use the D-link (description
link) technique with the longdesc attribute. Most browsers do not support the
LONGDESC attribute.
Use the LONGDESC attribute to point to a URL that contains
a detailed description and data. For example, because the information about
the colors of the pie chart is only available from the visual image, a separate
description is provided that includes the information about the colors of the
pie chart. A blind math student, or a student using a text-only browser, would
be able to answer the question using the separate description.
Math student:
From the chart determine which vehicle type is represented by the smaller blue wedge:
<img src="assets/piechart.jpg" longdesc="piechart_desc.html" width="158" height="160" alt="75% cars and 25% trucks">
The LONGDESC points to the separate description file that includes the following
sample HTML:
<p>Pie Chart Description</p>
<p>This pie chart shows the percentage of cars and trucks out of the total
vehicles passing through a toll booth in one hour. Cars are represented by the
larger red wedge and trucks are represented by the smaller blue wedge. 75% of
the vehicles were cars; 25% of the vehicles were trucks. The total number of
cars and trucks is not displayed on the pie chart.</p>
This technique is used when it is not desirable to include all the detail about
the graph or chart in the surrounding text. Use the description link or D-link
to access a URL containing the detailed description of the graph or chart. The
current convention to minimize the affect on the visual appearance of the page
is to use the letter D as the link text.
In the following example, information about the size and shape of the wedges
that make up the pie chart are only available from the visual image. A detailed
description needs to be included so a blind math student (or a student using
a text-only browser) will understand the visual concept and be better able to
answer the question.
Math student:
From the chart determine which vehicle type is represented by the smaller blue wedge:
<img src="assets/piechart.jpg" width="158" height="160" alt="75% cars and 25% trucks"><a href="piechart_desc.html">D</a>
Some web developers do not like the D LINK because it detracts from the overall appearance of the page. Try either of these solutions to make the D LINK invisible.
What is Accessibility?
- Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should
Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features
