Tables Best Practice

Basic Data Tables

Last Updated: 12/15/2011

A data table allows content authors to arrange data into rows and columns of cells.

Challenges disabled users face using data tables are:

Understanding the intent behind the table
Understanding the relationship between data and header cells
When sorting is available, understanding how a column can be sorted

Example

Download

New Window

Simple Table with Sorting

Sports Cars Not Sorted
Make	Model	Year
Dodge	Viper	2010
Ford	Mustang	2005
Dodge	Charger	2010
Chevy	Camaro	2002
Chevy	Corvette	2002

Complex Table

Make	Model	Year	Mileage
Sports Cars
Dodge	Viper	2010	5,000
Dodge	Charger	2010	3,500
Ford	Mustang	2005	25,000
Chevy	Camaro	2002	50,000
Chevy	Corvette	2002	40,000
SUVs
Dodge	Durango	2010	8,500
Cadillac	Escalade	2009	3,000
Ford	Expedition	2007	30,000

Build It
Basic Test
Advanced Test

Tables have a summary

Provide a brief synopsis about the table using the summary attribute:

default.htm (excerpt)

<table id="simpleTable" summary="Sports cars by various manufacturers">
…
</table>

<table id="complexTable" summary="Used cars for sale">
…
</table>

Header cells are properly marked up

Mark every header cell with a <th> tag and the appropriate ARIA role attribute:

default.htm (excerpt)

<table id="simpleTable">
<thead>
<tr>
    <th role="columnheader" … >…Make…</th>
    <th role="columnheader" … >…Model…</th>
    <th role="columnheader" … >…Year…</th>
</tr>
</thead>
<tbody>
<tr>
    <th role="rowheader">Dodge</th>
    <td>Viper</td>
    <td>2010</td>
</tr>
…
</tbody>
</table>

<table id="complexTable" …>
<thead>
 <tr>
    <th role="columnheader" …>Make</th>
    <th role="columnheader" …>Model</th>
    <th role="columnheader" …>Year</th>
    <th role="columnheader" …>Mileage</th>
</tr>
</thead>
<tbody>
<tr>
    <th role="columnheader" …>Sports Cars</th>
</tr>
<tr>
    <th role="rowheader" …>Dodge</th>
    <td …>Viper</td>
    <td …>2010</td>
    <td …>5,000</td>
</tr>
…
</tbody>
</table>

Data cells are associated with the appropriate header cells

For simple tables use the scope attribute to tie header cells to data cells

default.htm (excerpt)

<table id="simpleTable" …>
<thead>
<tr>
    <th scope="col" … >…Make…</th>
    <th scope="col" … >…Model…</th>
    <th scope="col" … >…Year…</th>
</tr>
</thead>
<tbody>
<tr>
    <th scope="row" …>Dodge</th>
    <td>Viper</td>
    <td>2010</td>
</tr>
…
</tbody>
</table>

For complex tables use the headers and id attributes to tie header cells to data cells:

default.htm (excerpt)

<table id="complexTable" …>
<thead>
 <tr>
    <th id="h1" …>Make</th>
    <th id="h2" …>Model</th>
    <th id="h3" …>Year</th>
    <th id="h4" …>Mileage</th>
</tr>
</thead>
<tbody>
<tr>
    <th id="h_sports" …>Sports Cars</th>
</tr>
<tr>
    <th headers="h_sports h1" id="hr1" …>Dodge</th>
    <td headers="h_sports hr1 h2" >Viper</td>
    <td headers="h_sports hr1 hr3">2010</td>
    <td headers="h_sports hr1 hr4">5,000</td>
</tr>
…
</tbody>
</table>

For sorting, header cells indicate how a column is sorted

To understand that a table has been sorted we'll need to use a <caption> tag, ARIA and title attributes:

default.htm (excerpt)

<table id="simpleTable" … >
<caption id="caption" role="alert" aria-live="polite">Sports Cars Not Sorted</caption> 
<thead>
 <tr>
    <th aria-sort="none" …><a … title="Sort Make ascending">Make</a></th>
    <th aria-sort="none" …><a … title="Sort Model ascending">Model</a></th>
    <th aria-sort="none" …><a … title="Sort Year ascending">Year</a></th>
 </tr>
</thead>
…

tables.js (excerpt)

/* Re-establish Header Link title attribute and ARIA sort attribute 
    linkID[0] = Header Text, linkID[1] = Sort Text
*/
if (linkID[1] == "asc") {
   $(this).attr("title", "Sort " + linkID[0] + " descending");
   $(this).parent().attr("aria-sort", "ascending");
   $("#simpleTable caption")[0].innerHTML = "Sports Cars Sorted by " + linkID[0] + ": Ascending Order";
   …
}
else {
   $(this).attr("title", "Sort " + linkID[0] + " ascending");
   $(this).parent().attr("aria-sort", "descending");
   $("#simpleTable caption")[0].innerHTML = "Sports Cars Sorted by " + linkID[0] + ": Descending Order";
   …
}

Let's break this code down:

Add a <caption> to indicate how the table is being sorted. ARIA's role attribute is added to ensure that it is read by the assistive software:
```
<caption id="caption" role="alert" aria-live="polite">Sports Cars Not Sorted</caption>
```
Add ARIA's aria-sort attribute to establish the column's sort order:
```
<th aria-sort="none" …>
 …
</th>
```
Add a title attribute to the sortable links. The title's value should indicate how the column would be sorted when the user selects it:
```
<th aria-sort="none" …>
    <a … title="Sort Make ascending">Make</a>
</th>
```

When a link is selected, use JavaScript to change the values for the <caption>, aria-sort and title attributes:

/* Re-establish Caption, Header Link title attribute and ARIA sort attribute 
    linkID[0] = Header Link Text, linkID[1] = Sort Text
*/
if (linkID[1] == "asc") {
     $(this).attr("title", "Sort " + linkID[0] + " descending");
     $(this).parent().attr("aria-sort", "ascending");
     $("#simpleTable caption")[0].innerHTML = "Sports Cars Sorted by " + linkID[0] + ": Ascending Order";
}
else {
    $(this).attr("title", "Sort " + linkID[0] + " ascending");
    $(this).parent().attr("aria-sort", "descending");
    $("#simpleTable caption")[0].innerHTML = "Sports Cars Sorted by " + linkID[0] + ": Descending Order";
}

SSA Accessibility Best Practices Library

Basic Data Tables

Example

Download

New Window

Simple Table with Sorting

Complex Table

JAWS

NO TEST METHOD...

JAWS

JAWS

Basic Data Tables

Example Download New Window

Simple Table with Sorting

Complex Table

Example

Download

New Window