Making tables accessible
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
The main purpose of the table tag is to represent data that has more than one dimension. In addition, the table tag is often used for page layout, although that is no longer recommended.
For tables that represent multidimensional data, it is important to provide enough accessibility information to help users understand the data. The accessibility information includes the following.
- An accessible name provided by a caption tag in the table.
- An accessible description provided by the summary attribute.
- Optionally, table headers that use th tags with the scope and headers attributes, as described later in this topic.
The following example shows a table followed by the HTML code that created it.
| Meals | Hotels | Transport | Subtotals | |
|---|---|---|---|---|
| San Jose | 65.02 | 224.00 | 90.00 | 379.02 |
| San Diego | 80.50 | 250.00 | 80.00 | 410.50 |
| Los Angeles | 74.00 | 300.00 | 100.00 | 474.00 |
| Totals | 219.52 | 774.00 | 270.00 | 1,263.52 |
<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
<caption>Travel Expense Report</caption>
<thead>
<tr>
<th></th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
<th>Subtotals</th>
</tr>
</thead>
<tbody>
<tr>
<th>San Jose</th>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
<td>379.02</td>
</tr>
...
</tbody>
</table>
Use the scope and headers attributes to better define the relationship between cells and headers. Use the scope attribute in a th tag to further define the purpose of the header. Use the headers attribute in corresponding td tags in complex tables if multiple headers apply to a single cell.
| Meals | Hotels | Transport | Subtotals | |
|---|---|---|---|---|
| San Jose | ||||
| 25-Aug-97 | 37.74 | 112.00 | 45.00 | 194.74 |
| 26-Aug-97 | 27.28 | 112.00 | 45.00 | 184.28 |
| ... | ||||
| Totals | 219.52 | 774.00 | 270.00 | 1,263.52 |
<table border="1">
<caption>Travel Expense Report</caption>
<thead>
<tr>
<th></th>
<th id="c2">Meals</th>
<th id="c3">Hotels</th>
<th id="c4">Transport</th>
<th id="c5">Subtotals</td>
</tr>
</thead>
<tbody>
...
<tr><td id="r2" colspan="5">San Jose</td></tr>
<tr>
<td id="r3" >25-Aug-97</td>
<td headers="c2 r2 r3">37.74</td>
<td headers="c3 r2 r3">112.00</td>
<td headers="c4 r2 r3">45.00</td>
<td headers="c5 r2 r3">1,263.52</td>
</tr>
...
</tbody>
</table>
Note The platform and Narrator do not expose the headers attribute, but some third-party screen readers or assistive technology tools might use this information by looking directly into the Document Object Model (DOM).