Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Main Menu

Sand Trail

Simple Data Tables

Simple tabular data tables are tables where only the first column, first row or both are used as headings for the data cells.

HTML Markup

table
The table element is the container for tabular data markup.
table:summary
The summary attribute can be used to provide a summary of what the author wanted the user to conclude from viewing the data in the table.
caption
The caption element is required to give the data table a unique title to aid in navigation to the table and for differentiating table markup used for layout from data tables.
th and td
The th element is for header cells and the td element for data cells in a tabular data table.
th:id
The id attribute must be used to uniquely identify each header cell. This id is used in conjunction with the headers attribute to indicate the headers for a particular data cell.
td:headers
The headers attribute is used on td cells to point to the id of header cells. Even on simple tables this is important because screen readers use this information to read header cell information when users navigate data tables.
th:scope
The scope attribute can only have one of two values, "row" and "col", and should usually provide the same information as the th element. If the th element is at the top of a column, the assumption is that the header is for the data cells in the column in a simple data table. If the th element is at the first cell in a row the assumption is that the header is for the data cells in the row, in a simple data table.

Related Accessibility Requirements

Section 508
§ 1194.22 (g) Row and column headers shall be identified for data tables.
§ 1194.22 (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Web Content Accessibility Guidelines (WCAG 1.0)
5.1 For data tables, identify row and column headers. [Priority 1]
5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]
5.5 Provide summaries for tables [Priority 3]
5.6 Provide abbreviations for header labels [Priority 3]

Example Code

Use of Microsoft Office to Create Web Materials
Power Point Word Excel
Instructors 71% 87.9% 51.4%
Web Developers 43.7% 84,9% 43.7%
Disability Support 57.7% 73.1% 46.2%
Others 42.9% 78.6% 40.5%

HTML Source Code

<table border="1" summary="70% of Instructors use Microsoft Office to create instructional web materials">
  <caption>Use of Microsoft Office to Create Web Materials</caption>
  <tr>
    <td>
    </td>
    <th id="ID0" scope="col" >Power Point</th>
    <th id="ID2" scope="col" >Word</th>
    <th id="ID3" scope="col" >Excel</th>
  </tr>
  <tr>
    <th id="ID1" >Instructors</th>
    <td headers=" ID0 ID1" >71%</td>
    <td headers=" ID2 ID1" >87.9%</td>
    <td headers=" ID3 ID1" >51.4%</td>
  </tr>
  <tr>
    <th id="ID4" >Web Developers</th>
    <td headers=" ID0 ID4" >43.7%</td>
    <td headers=" ID2 ID4" >84,9%</td>
    <td headers=" ID3 ID4" >43.7%</td>
  </tr>
  <tr>
    <th id="ID5" >Disability Support</th>
    <td headers=" ID0 ID5" >57.7%</td>
    <td headers=" ID2 ID5" >73.1%</td>
    <td headers=" ID3 ID5" >46.2%</td>
  </tr>
  <tr>
    <th id="ID6" >Others</th>
    <td id="ID43" headers=" ID0 ID6" >42.9%</td>
    <td id="ID44" headers=" ID2 ID6" >78.6%</td>
    <td id="ID45" headers=" ID3 ID6" >40.5%</td>
  </tr>
</table>