Data

Accessible data presentation has two aspects, 1) as information in tables or charts, presented so that screen readers can read it in a way understandable to users and 2) as forms for data collection, that enable users to provide accurate data input.

Tables

Content must be labeled in a data table to provide visually impaired users with a sense of context, since they are not able line up columns and rows. That additional information is provided through I D tags, Headers and T H tags that associate headers with columns and rows. T Head and T Body are used to bracket headings and body content, respectively, and I D and Headers are used to associate headings with their related content.

Code Example:

<thead>
<tr>
<th id="category1">How To</th>
<th id="category2">Formats</th>
</tr>
</thead>

<tbody>
<tr>
<td headers="category1">Intro</td>
<td headers="category2">Stylesheets</td>
</tr>
</tbody>

Since screen readers move from left to right, row to row, across a table, it is also helpful to set Tabindex tags for links so that they tab down from headers rather than across. Be sure to tell visually impaired users about it in the table Summary tag so they can anticipate how tabbing through the table will work. Additional information in the way of Caption tag and Title tags is also important as shown below.

Example:

<table width="80%" 
summary="This site map has seven columns that reflect 
the main content categories of the site. 
The first row corresponds to categories and the following nine 
rows contain subpages. Tabs have been set to read down columns. 
Each subpage has a link.">

<thead>
<caption align="top">Map of Accessibility Website</caption>
<tr>
<th id="category1">How To</th>
<th id="category2">Formats</th>
</tr>
</thead>

<tbody>
<tr>
<td headers="category1">
<a href="Introduction.html"
tabindex="21" title="Introduction to accessibility">Intro</a>
</td>
<td headers="category2">
<a href="CSS.html" tabindex="31" 
title="C.S.S./Stylesheets information">Stylesheets</a>
</td>
</tr>

<tr>
<td headers="category1">
<a href="Basic.html" tabindex="22" 
title="Basic information about accessibility">Basics</a>
</td>
<td headers="Category2">
<a href="Flash.html" tabindex="32" 
title="Flash and accessibility">Flash</a>
</td>
</tr>
</tbody>

Note how the numbering for categories and tabindexes move in parallel and across the page.

Adaptive Technology

Home Page Reader will read row and column headings if you press Alt + T. Jaws will read the Row and Column number of the current cell if you press Alt+Ctrl+NumKeypad5. In this example, JAWS will read the content of the first cell in the row and the current cell as "row 1, column 1, How to Intro."

Top Of Page

Charts

Assistive technology at this point is unable to translate charts, so you must provide a description. First provide an Alt description for the image, to announce to the user that an image is present and provide a brief description. Then, use a "D"-link or a Long desc tag to provide additional detail.

Code Example:

<p> 
<img src="../Images/Over65E.jpg" 
width="350" height="231" alt="Chart showing percent 
of people over 65 increasing in U.S. from 1900 to 2050"> 
</img> 
</p>

with a "D" Link:

<p>
<a href="Over65Description.html" 
title="Detailed description of the increasing 
number of people over 65 in U.S.">D</a> 
</p>

or include a Long Desc tag:

<p>
<img src="../Images/Over65E.jpg"
width="350" height="231" 
alt="Chart showing percent of people over 65 increasing 
in U.S. from 1900 to 2050" 
longdesc="Over65Description.html" 
title="Detailed description of the increasing number
of people over 65 in U.S.">
</img>
</p>

Top Of Page

Forms

Forms can be accessible so long as they 1) enable screen readers to associate a label with its input and 2) provide context for users.

Associating a label with input can be done in two ways, by making the relationship explicit through the Label For and Input ID elements, and/or by structuring the form linearly.

Structure

If relying on structure alone, there are two things to remember:

• Screen readers read from left-to-right and up-to-down in cells, so text and tables have to be arranged in that order, and
• Screen readers anticipate that labels precede text boxes and that labels follow checkboxes and radio buttons, so this sequence must be followed.

Context

Context is provided by grouping questions or sections logically and identifying them by the Fieldset and Legend elements. Note that FieldSet and Legend work within the structure of forms and NOT across rows or columns defined by tables.

For example, the comments form for this website contains both the accessibility elements described above and has proper structure. View the form for an illustration. View its style sheet to see how forms can be structured without tables.

Label For and Input ID elements

Code Example:

<p> 
<label for="FirstName">First name:</label>
<input name="fn" type="text" id="FirstName">
</input></label></p>

<p>
<label for="SecondName">Second name:</label>
<input name="sn" type="text" id="SecondName">
</input>
</p>

Return to top

<p><label for="Select">
	How useful was this website?</label>
<select id="select" name="rate" size="1">
<option value="" selected>
	Please rate site</option>
<option value="4">Very useful</option>
<option value="3">Somewhat useful</option>
<option value="2">Not very useful</option>
<option value="1">Not useful at all</option>
</select></p>

<p>Which items were MOST useful?</p>
<p class="Checkbox">
<input type="checkbox" name="tm"
id="TutorialMost"></input>
<label for="TutorialMost">
Tutorial</label>
</p>

Fieldset and Legend Elements

Code Example:

<form action="" method="post" 
name="Feedback">
<fieldset>
<legend>Contact Information
</legend>

<p>
<label for="FirstName">First name:</label> 
<input name="fn" type="text" id="FirstName">
</input></label></p>
</fieldset>
...</form>

Top Of Page

Previous Section: Content

Next Section: Multimedia