HTML
Table accessibility
Learn caption and aria-* for tables (summary attribute is deprecated).
caption and aria-*
In an accessible table, <caption> helps the title and scope helps header cells. Sometimes that is not enough; to describe a table in more detail you use aria-* attributes.
For example, aria-describedby points to the id of a paragraph that explains the table. The screen reader then reads that note before the table. The old summary attribute was removed from HTML; caption and aria-* replace it.
aria-* patterns for tables
Besides aria-describedby, tables also use these aria-* attributes:
aria-label: gives the table a short namearia-labelledby: ties the table to an outside headingrole="table": states the table role explicitly (mostly for ARIA grids)
You add these only to strengthen meaning. In a well-written HTML table, caption and scope are usually enough; the rest is only for special cases.
Exercise Build an accessible table with aria-describedby
Make a table accessible. Give <table> an aria-describedby attribute whose value matches the id of a paragraph that describes the table. Inside the table put a non-empty <caption>, <thead> with <th scope="col"> and <tbody> with <td>. After the table write a <p> whose id equals the table's aria-describedby value; its content must not be empty.
Show example solution
<table aria-describedby="table-note">
<caption>Product Features</caption>
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weight</td>
<td>180 g</td>
</tr>
<tr>
<td>Screen</td>
<td>6.1 in</td>
</tr>
</tbody>
</table>
<p id="table-note">All values are taken from the manufacturer.</p>
Test yourself
-
Why should the old table summary attribute be avoided today?
- Because caption also exists
- Because it only works in English
- Because browsers do not render it
- Because it was removed from HTML standards
Show answer
Because it was removed from HTML standards — Correct. The summary attribute was dropped from HTML in HTML5; caption and aria-* replace it.
-
Write the aria-describedby value
<table aria-describedby="____">
<caption>Product Features</caption>
<!-- thead and tbody -->
</table>
<p id="table-note">Values are from the maker.</p>
Show answer
<table aria-describedby="table-note">
<caption>Product Features</caption>
<!-- thead and tbody -->
</table>
<p id="table-note">Values are from the maker.</p>
-
Match each accessibility item to its role
- caption
- Titles the table
- scope
- Tells th direction
- aria-describedby
- Links to description
- summary
- Removed, do not use
Next lesson: Responsive tables
