Developing Accessible Web Applcations Tables Sample

Demo

Employee Information

Name	Hire Date
John Smith	09 Nov 2007
Jane Doe	10 Nov 2007

Discussion

Tables are frequently used to convey information in a grid. The TABLE element is recognized by most AT devices, and is the best way to present this sort of information. The two critical elements to ensure that a TABLE is well read by an AT device are the table heading element, TH, and the CAPTION element. The TH provides heading information to any cell in that row or column. The CAPTION element provides a name to the TABLE.

There are a few other HTML elements which may be used to further augment accessible information in tables, but the two above are the critical ones. For more complex tables and examples of these additional elements, please see [LINK HERE].

There are some WAI-ARIA roles and attributes which may be used to additional information also. Please see the Grid Sample for some of these.

• Semantic HTML:
  • TABLE, TH, TR and TD elements
  • CAPTION elements

Sample Code

HTML

<table>
<caption>Employee Information</caption>
<thead>
  <tr><th>Name</th><th>Hire Date</th></tr>
</thead>
<tbody>
  <tr><td>John Smith</td><td>09 Nov 2007</td></tr>
  <tr><td>Jane Doe</td><td>10 Nov 2007</td></tr>
</tbody>
</table>