Tables are a way to visually display information in a logical and easy-to-understand format. However, misuse of tables can wreak havoc on assistive technology when rendering large amounts of data. If not properly labeled and captioned, the non-visual reader often gets garbled and confusing information.
Note: In the U.S Mission Website Platform, tables should be used only to present INFORMATIONAL, STATISTICAL DATA and MUST be section 508 compliant.
The Scope attribute is the easiest way to create tables that are compliant with Section 508 Accessibility Standards. COLSPAN and ROWSPAN are the attributes that provide a means to relate groups of related information in a consistent manner and they are enabled for assistive technology.
Scope Attribute
The Scope attribute notifies the browser and screen reader that everything under the column is related to the header at the top and that everything to the right of he row header is related to that header.
To make tabular data more accessible, assign “scope” to table headers.
- Use scope=”col” attribute in the <th> or <td> tag of every cell in a header row.
- Use scope=”row” attribute in the <th> or <td> tag of every cell in a header column.
Note: Only use the SCOPE attribute in the header cells (Cells at the TOP or LEFT in the TABLE).
Table Summaries
Another method of enhancing visually impaired visitors experience with tables is to include a caption and a summary of the table data.
- Any text entered into the caption field is displayed above the table and read aloud by screen readers.
- Any text entered into the summary field will not be displayed, but will be read aloud by screen readers.
Sample Coded Table
| Term | Definition |
|---|---|
| Accessible Designs | Accessible Designs allow as many people as possible to use technology regardless of disability, age, or functional limitation. |
| Accessible Video | Accessible video is a synchronized multimedia file with a text equivalent. |
<table>
<table border= “1” align=“center” summary=“A brief listing of terms and definitions for
Section 508 accessibility”>
<caption> 508 Accessibility</caption>
<tr>
<th scope=“col”>Term</th>
<th scope=“col”>Definition</th>
</tr>
<tr>
<td scope=”row”>Accessible Designs</td>
<td> Accessible Designs allow as many people as possible to use technology regardless of
disability, age, or functional limitation.</td>
<tr>
<tr>
<td scope=”row”>Accessible Video</td>
<td> Accessible video is a synchronized multimedia file with a text equivalent.</td>
<tr>
</table>
