WCAG 1.3.1 — Info and Relationships. Each error demonstrates a specific table structure violation.
This data table uses only td elements — no th headers. Screen readers cannot associate data cells with their column meanings.
| Name | Department | Salary |
| Alice Johnson | Engineering | $95,000 |
| Bob Smith | Marketing | $78,000 |
| Carol Davis | Design | $85,000 |
The th elements lack scope attributes. In simple tables this is often inferred, but the explicit association is missing for robust accessibility.
| Product | Price | Stock |
|---|---|---|
| Widget A | $12.99 | 142 |
| Widget B | $24.99 | 87 |
This data table has no caption element. Screen reader users encounter the table without any description of what data it contains.
| Quarter | Revenue | Growth |
|---|---|---|
| Q1 2024 | $1.2M | +5% |
| Q2 2024 | $1.4M | +17% |
| Q3 2024 | $1.3M | -7% |
This table is used purely for layout (positioning a sidebar next to content), but it incorrectly uses th elements and scope attributes. Screen readers will announce it as a data table, confusing users.
| Sidebar | Main Content |
|---|---|
Navigation links would go here | This is the main content area. The table is used for layout, but it has th and scope attributes that make screen readers announce it as a data table. |
This table has merged cells (colspan/rowspan) creating a complex structure, but the cells lack headers and id attributes to establish programmatic associations. Screen readers cannot determine which headers apply to which data cells.
| Employee | Q1 Performance | Q2 Performance | ||
|---|---|---|---|---|
| Sales | Rating | Sales | Rating | |
| Alice | $45,000 | A | $52,000 | A+ |
| Bob | $38,000 | B+ | $41,000 | A |
