Some Basics...

Explain the table
- if its not clear

5 ways to explain a table

1. Include a brief summary statement before the table. "The table below..."

or

2. Associate the summary statement using the aria-describedby attribute on the <TABLE> element

The summary information will be read twice. In the text before the table and when the screen reader enters the table.

This table shows meals, hotels, and transport for 2 separate days with subtotal by category.

Travel Expense Report - San Jose
Dates Meals Hotels Transport
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
Sub-total 65.02 224.00 90.00

<p id="summary">This table shows dates, meals, hotels, and transport for 2 separate days with subtotal by category.</p>

<table aria-describedby="summary">
<caption>
Travel Expense Report - San Jose
</caption>
...
</table>

or

3. Use <details> and <summary> within the <caption>

Gives the user control over whether or not to hear the summary.

Travel Expense Report - San Jose
Table Summary

This table shows meals, hotels, and transport for 2 separate days with subtotal by category.

Dates Meals Hotels Transport
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
Sub-total 65.02 224.00 90.00

<details> and <summary> works everywhere from the keyboard (not always in expected order). Except IE.

<table>
<caption>
Travel Expense Report - San Jose
<details>
<summary>Table Summary</summary>
<p>This table shows meals, hotels, and transport for 2 separate days with subtotal by category.</p>
</details>
</caption>
... </table>

or

4. Link to the summary statement in the <caption>

Gives the user control over whether or not to hear the summary.

This table shows meals, hotels, and transport for 2 separate days with subtotal by category.

Travel Expense Report - San Jose
Table Summary
Dates Meals Hotels Transport
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
Sub-total 65.02 224.00 90.00

<p id="tsummary">This table shows dates, meals, hotels, and transport for 2 separate days with subtotal by category.</p>

<table>
<caption>
Travel Expense Report - San Jose<br />
<a href="#tsummary">Table Summary</a>
</caption>
...
</table>

or

5. Wrap table in a <figure>, include summary statement in the figure.

This table shows dates, meals, hotels, and transport for 2 separate days with subtotal by category.

Travel Expense Report - San Jose
Dates Meals Hotels Transport
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
Sub-total 65.02 224.00 90.00

<figure aria-labelledby="caption">
<p>This table shows dates, meals, hotels, and transport for 2 separate days with subtotal by category.</p>
<table border="1" width="60%" >
<caption id="caption">
Travel Expense Report - San Jose <br />
</caption>
<tbody>
<tr>
<th>Dates</th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
...
</tbody>
</table>
</figure>

 


Alternatives

You can use additional markup, such as paragraphs <p>, inside <caption>. Possibly using the paragraph to "explain" the table. (Juicy Studio). However, screen readers read everything within <caption> ...a bit tedious. Various other solutions have been tested-- David McDonald, and Terrill Thompson.

When possible - Simplify