Tables

The Law

Section 508 Part 1194.22 Subpart g states:
Row and column headers shall be identified for data tables.

Cells that are row and column headers in a data table should be identified using special attributes to avoid confusion when screen readers are reading the content.

What to Do

Tables were implemented in HTML to display tabular data; that is, data that lends itself to being in rows and columns like in an excel spreadsheet. While it was common practice a few years ago to use tables to control the layout of a Web page, that practice is frowned upon.

That said, creating accessible tables is not a difficult task if the data is organized in a logical manner.

A screen reader should be able to appropriately identify row and column headers, and read the data in a logical order. Data cells should take up one row so older screen readers can read the content. The table should not contain spanned rows or columns. The TH (instead of TD) and scope attributes are used to define each header.

Other attributes are used such as Caption to display a title above the table and Summary to explain the results of the table.

Implementing Good Table Practices

Table Caption

Table Summary Example

<table width=100summary="Price Comparison of digital cameras by make and model">

Headings

If you use a table that has logical headings, the first row should use the <th> tag instead of the <td> tag

Make

Model

Megapixels

Price

Canon EOS 300D 6.3 $899
Nikon D70 6.0 $999
Minolta DiMAGE A1 5.0 $699
Sony F828 8.0 $999

The code looks as follows for the first row in the table:

Table Column Headings

<tr>

  <th scope="col">Make</th>

  <th scope="col">Model</th>

  <th scope="col">Megapixels</th>

  <th scope="col">Price</th>

</tr>

You can also use the <th> tag for row headings, assuming that is appropriate.

Make

Canon Nikon Minolta Sony

Model

EOS 300D D70 DiMAGE A1 F828

Megapixels

6.3 6.0 5.0 8.0

Price

$899 $999 $699 $999

The code looks as follows for the first row in the table:

Table Row Headings

<tr>

  <th scope="row">Model</th>

  <td>EOS 300D</td>

  <td>D70</td>

  <td>DiMAGE A1</td>

  <td>F828</td>

</tr>

Captions

Tables can also be captioned to help disabled users understand the purpose of the table. Every table should have a caption tag that states the title of the table.

Digital Camera Comparison

Make

Model

Megapixels

Price

Canon EOS 300D 6.3 $899
Nikon D70 6.0 $999
Minolta DiMAGE A1 5.0 $699
Sony F828 8.0 $999

Table Caption

<table width="400" border="0" cellpadding="0" cellspacing="0">

  <caption>

  <!-- if you want to set an alignment to the caption (i.e. align it under the table or

       above the table) then you must specify this in the stylesheet -->

   Digital Camera Comparison

  </caption>

  <tr> ...

Video on how to add captions to tables

Was this helpful?
0 reviews

Details

Article ID: 43468
Created
Fri 12/1/17 2:43 PM
Modified
Tue 12/3/19 8:39 AM