Tables

Overview

  • There are 2 basic types of tables – layout and data tables.
  • Layout tables are common – but can be eliminated using CSS for placement. If tables are used for layout, make sure that assistive technology (AT) can make sense of the table structure. AT read tables from the upper left hand corner to the lower right hand.
  • Use proportional sizing rather than absolute sizing.
  • Keep the simplest table structure possible – think about the information you are presenting and offer it in the cleanest way.

Data Table Techniques

Caption and Summary

The caption element can be used to give the table a title. This helps the user to identify the title of the table, since assistive technology will let them know that there is a caption available.

The summary attribute on the table tag can be used to provide an overall summary of the table to some one using assistive technology. This summary is read to a user when they first encounter the table.  Note that Summary is not in HTML5 specifications.

Row and Column Headers

As they navigate through data table, screen reader users need to know what column and row they are in. If this information were not available, it would be very disorienting to navigate a table.

  • Every row must have a header in the first column.
  • Every column must have a header in the first row.
  • Use the <th> element to inform screen readers that they are dealing with a heading. Headers will appear as bold and centered – unless styled otherwise by CSS.
  • Use the scope attribute on the <th> element to provide further programatic help to a screen reader.
  • For column headers use scope=”col”
  • For row headers, use scope=”row”.

Table Example

Simple Data Table Example

<table border="1" summary="This table gives the name of each AIR Instructor, the number of cups of coffee they drink per day, and then the kind of coffee.">
<caption>
Cups of Coffee Consumed by AIR Instructors
</caption>
<tr>
<th scope="col">Instructor</th>
<th scope="col"># of Cups</th>
<th scope="col">Kind of Coffee</th>
</tr>
<tr>
<th scope="row">Cousett</th>
<td>6</td>
<td>Regular</td>
</tr>
<tr>
<th scope="row">Brenda</th>
<td>3</td>
<td>Regular</td>
</tr>
<tr>
<th scope="row">Mike</th>
<td>11</td>
<td>Regular</td>
</tr>
<tr>
<th scope="row">Randy</th>
<td>3</td>
<td>Decaf</td>
</tr>
</table>

Cups of Coffee Consumed by AIR Instructors
Instructor # of Cups Kind of Coffee
Cousett 6 Regular
Brenda 3 Regular
Mike 11 Regular
Randy 3 Decaf

Class Example

Class Example (Before, Problems, After)

WCAG 2.0 Guidelines

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Suggested Tools to check tables

  • Listen to the table with a screen reader. Can you follow the flow of information?
  • Firefox Web Developer Toolbar ->Information->Display Table Information
  • Wave Toolbar – Errors, Features and Alerts
  • Juicy Studios – Table Inspector
  • IE Accessibility Toolbar:
    • Use the Structure/Tables/Linearize menu to linearize tables
    • Use the Structure/Tables/Simble Data table menu to see sumary, scope and captions for a table
    • Use Tools/Cynthia Says to check for table row and column headers

Where can I find more information on tables?