Table accessibility
Provide table accessibility with scope, headers and caption.
caption and scope
In an accessible table, header cells carry a scope attribute. scope="col" says the cell is a column header; scope="row" says it is a row header. That way, a screen reader reading a cell also announces which header it belongs to.
You give the table its title with <caption>; it appears just above the data and is not confused with the page title.
Complex tables and headers
For simple tables, scope is enough. But when a cell ties to more than one header, use the headers attribute. Each header cell gets an id; the data cell says headers="id1 id2" to point at its headers.
For example, if a cell belongs to both 'January' and 'Headphones', write headers="january headphones". This lets the screen reader read the right header combination.
Exercise Write a captioned table with scope
Add a <table> to body. Put a <caption>Orders</caption> inside. Then a <thead> with a <tr> holding two <th scope="col"> (texts: Product, Units). Then a <tbody> with a <tr> and two <td> (texts: Headphones, 12).
Show example solution
<body>
<table>
<caption>Orders</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Headphones</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>Test yourself
-
What should scope be on a column header cell?
- row
- col
- column
- header
Show answer
col — Correct. scope="col" means a column header.
-
Complete the column header
<th ____="col">Product</th>Show answer
<th scope="col">Product</th> -
Match each attribute to its purpose
- scope
- Single clear header
- headers
- Multi-header link
- caption
- Table title
- id
- Unique key