Tables — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? Data tables display information arranged in rows and columns. Proper headers and associations are essential for accessibility.

Where and how is it used? Use for structured datasets (reports, schedules, pricing). Keep layout tables separate from data tables.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Header associations	1.3.1	Use `<th scope="col\|row">` for simple tables. For complex tables, use `headers`/`id` mapping.
Caption and summary	1.3.1	Provide a `<caption>` that describes the table’s purpose. Use nearby text for context.
Keyboard navigation	2.1.1	Ensure focusable elements inside cells can be reached logically.
Responsive overflow	1.4.10 Reflow	Support horizontal scrolling of wide tables without loss of content or functionality.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>`	Data tables	Preferred semantic elements; avoid ARIA table roles unless building custom grids.
`scope`	`<th>`	Defines whether a header applies to its row or column.
`headers`/`id`	Complex tables	Explicitly associates data cells with multiple headers.

Implementation Guidelines



  Quarterly Revenue (CAD)
  
    Quarter Revenue Change
  
  
    Q1 $1.2M +5%
    Q2 $1.3M +8%

Quarterly Revenue (CAD)
Quarter	Revenue	Change
Q1	$1.2M	+5%
Q2	$1.3M	+8%

DO’s

Use <th scope> for simple tables and include a <caption>.
Keep tables simple; split very complex tables when possible.
Ensure sufficient contrast for text and borders.
Allow horizontal scrolling for narrow screens.

Don’ts

Don’t use tables for layout.
Don’t merge cells excessively; it complicates header associations.
Don’t omit <caption> when table purpose isn’t obvious.

Common Pitfalls

Missing scopes: screen readers can’t determine headers.
Complex headers without mapping: failing to use headers/id.
Overflow clipping: table content not scrollable on small screens.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
Headers announced	1.3.1	Screen reader announces correct header with cell content.
Caption present	1.3.1	Table has a meaningful `<caption>`.
Reflow	1.4.10	Wide tables are scrollable without loss of information.