CHAPTER 3 OF 5
3. Headers and relationships
Your goal: identify which headers describe each value.
Use th for the header's role
Bold text in a td is still an ordinary data cell. Use th to identify a header, then use scope to express its direction in this simple table.
scope="col"identifies a header for a column.scope="row"identifies a header for a row.
<tr> <th scope="col">Workshop</th> <th scope="col">Day</th> <th scope="col">Time</th> </tr> <tr> <th scope="row">Creating accessible tables</th> <td>Thursday</td> <td>2:00 p.m.</td> </tr>Connect meaning in both directions
“2:00 p.m.” has a column context, Time, and a row context, Creating accessible tables. A screen reader can use these relationships during table navigation; exact announcements depend on the software and settings.
The finished example
Both workshops take place at the community center. Times are local.
This reference preview includes the header relationships and caption explained across the chapters.
| Workshop | Day | Time |
|---|---|---|
| Introduction to accessible documents | Tuesday | 10:00 a.m. |
| Creating accessible tables | Thursday | 2:00 p.m. |
Do I need ARIA tags here?
ARIA supplies roles, states, and properties through attributes. This native table already expresses its table and header roles. Adding role="table" or role="columnheader" duplicates that meaning. ARIA also does not create keyboard behavior. Address a specific need rather than adding attributes as a general repair.