9.1 Data tables: simplify and mark up with special HTML

View correlation with WAI checkpoints

Data tables should appear in the simplest form possible - this makes it easier for all people to understand, but particularly those using adaptive technology (e.g. screen reader users).

Special HTML code also assists the accessibility of tables.

Simplify:
- A couple of simple tables are much easier to understand (and code) than one complex one:
  - The vast majority of complex tables can be made into simple tables
- If possible, design so that the table reads out logically row by row (linearised - see example)
Code for added accessibility:
- Always use <th> to identify header rows and columns, use <abbr> to abbreviate (or replicate) the titles
- Use <caption> to describe the nature of the table
- Use <summary> - to explain the contents of the table and provide orientation to people who listen to the table
- Explicitly associate row and column headers (<th>) with data cells:
  - Use scope (easiest for simple tables), or
  - Use headers and id

Note: There are more table elements to help structure tables, namely <tbody>, <thead>, <tfoot>, col, colgroup, axis - many of these are only required for complex tables (which you should try to avoid!) - read more from W3C

Example code of a simple table showing use of summary, <caption>, <th>, abbr, and scope:

<table  summary="Important childrens birthdays to remember. First column: childs name, second: childs age, third: date of birthday" > 

<caption>Important Birthdays</caption> 

<tr>  

<th scope="col" abbr="Name" >

Name</th>

<th scope="col" abbr="Age" >

Age</th> 

  <th scope="col" abbr="Date" >

  Date of Birthday</th> 

  </tr> 

  <tr> 

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

<td>8 years</td> 

 <td>3 September</td> 

  </tr>

  <tr>

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

  <td> 12 years</td> 

  <td> 28 April</td> 

  </tr> 

  </table>

Visual appearance of table coded above, caption appears above the table, the appearance of the column and row headers are distinctive

9.1 Data tables: simplify and mark up with special HTML

Recommendations

Examples