✅ ACCESSIBLE TABLE
Sales Data Table - Accessible Version
This table contains the same quarterly sales data, but now includes proper accessibility features that make it usable for everyone.
| Department | Monthly Sales | Q1 Total | ||
|---|---|---|---|---|
| January | February | March | ||
| Marketing | $45,000 | $52,000 | $48,000 | $145,000 |
| Sales | $67,000 | $71,000 | $69,000 | $207,000 |
| Support | $23,000 | $28,000 | $31,000 | $82,000 |
Accessibility Improvements Made
- Proper <th> elements: All headers now use <th> instead of <td> elements
- Scope attributes: Headers specify whether they apply to columns, rows, or column groups
- Table caption: Describes what the table contains for screen reader users
- Semantic structure: Uses <thead> and <tbody> to clearly separate headers from data
- Clear relationships: Screen readers can now announce the appropriate headers when navigating to any data cell
Screen Reader Experience
Now screen reader users can:
- Understand context: The caption tells them this is "Q1 2024 Sales Data by Department"
- Navigate efficiently: Jump between headers using table navigation commands
- Hear relationships: When focused on "$52,000", they hear "Monthly Sales, February, $52,000"
- Get orientation: Know they're in row 2 of 4, column 3 of 5
Technical Implementation
Key code changes that made this table accessible:
<table>
<caption>Q1 2024 Sales Data by Department</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Department</th>
<th scope="colgroup" colspan="3">Monthly Sales</th>
<th scope="col" rowspan="2">Q1 Total</th>
</tr>
<tr>
<th scope="col">January</th>
<th scope="col">February</th>
<th scope="col">March</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Marketing</th>
<td>$45,000</td>
<td>$52,000</td>
<td>$48,000</td>
<td>$145,000</td>
</tr>
<!-- Additional rows... -->
</tbody>
</table>📄 What About Microsoft Word?
While merged header cells can be made accessible in HTML using <th> and scope, the same is not true for Microsoft Word.
- Screen readers often cannot interpret merged cells when exported to PDF.
- Word does not support
scopeor explicit header associations. - Tagged PDFs from Word may lose structural meaning entirely.
Tip: If you're working in Word, avoid merged cells. Keep tables simple, label header rows, and export with accessibility in mind.