Table Accessibility

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 <th> with scope="col"
• Row headers: use <th> 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 <caption> 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