wanghaisheng Table Accessibility
Design tables that communicate structure and relationships — not just to sighted users scanning rows and columns, but to screen reader users who navigate one cell at a time.
When to Use a Table
Tables are for data that has relationships across two dimensions (rows and columns). Don't use tables for layout.
- Use a table: comparing features across products, showing schedules, displaying data with consistent categories
- Don't use a table: laying out a form, arranging cards, creating visual columns of unrelated content
Core Requirements
Every Table Needs Headers
- Column headers: use with scope="col"
- Row headers: use with scope="row"
- Screen readers announce headers before each cell, so users always know which column and row they're in
- Without headers, a screen reader user hears a stream of disconnected values with no context
Every Table Needs a Caption or Label
- Use element for HTML tables
- Or use aria-labelledby pointing to a visible heading
- The caption describes what the table contains: "Pricing comparison for Standard, Pro, and Enterprise plans"
- Not just "Table 1" or "Data"
Simple Tables Over Complex Tables
- Prefer simple tables with one row of column headers
- Avoid merged cells (colspan, rowspan) wherever possible
- If merged cells are necessary, use proper headers/id/scope associations
- If a table needs merged cells to make sense, consider whether it should be split into multiple simpler tables
Cognitive Accessibility for Tables
Visual Design
- Zebra striping (alternating row colours) aids row tracking
- Adequate cell padding (at least 8px) prevents crowding
- Align numbers right, text left for readability
- Highlight the header row with stronger contrast
Reduce Complexity
- Maximum 5–7 columns for comfortable scanning
- If more columns are needed, consider a different format or allow users to show/hide columns
- Provide a summary or key takeaway above complex tables
- Don't require horizontal scrolling — make tables responsive
Responsive Tables
- On small screens: convert to card/list view where each row becomes a labelled card
- Or allow horizontal scroll with a sticky first column
- Never hide data on smaller screens without a way to access it
- Test: can a mobile user access every piece of data?
Assessment Checklist
- All tables have column and/or row headers with proper scope
- All tables have a caption or accessible label
- No merged cells (or properly associated headers if unavoidable)
- Tables are responsive on small screens
- Tables are not used for visual layout
- Complex tables have a text summary of key findings
- Cell padding and spacing support readability