Accessible Tables: A Product Designer's Guide

How do you make a table accessible? Use real table markup with header cells (th), mark whether each header labels a column or a row (scope), add a caption that names the table, keep the structure simple, never rely on color alone, and make every interactive part reachable and visible with a keyboard. These steps let screen reader users hear each value with its header.

Why this is a design job, not only a developer job

Most table accessibility problems are decided in the design file: a header that is just bold text, status shown only by color, an icon button with no label, a structure nested three levels deep. Fix them in the design and the code follows.

1. Use real header cells

Every column header should be a header cell (th), not a styled data cell. This is what lets a screen reader announce "Status: Late" instead of just "Late." It's part of WCAG success criterion 1.3.1, Info and Relationships.

2. Set scope

Add scope="col" to column headers and scope="row" to row headers (often the first column's name or ID), so assistive technology knows which way each header applies.

3. Add a caption

A caption ("Open orders, October") names the table for screen reader users. It can be visually hidden if the page already shows a heading.

4. Keep the structure simple

Merged cells and deep nesting are hard to navigate by ear. If you need nesting, keep it to one level and give the inner table its own headers. See Nested data tables.

5. Never use color alone

A red row or a green dot means nothing to someone who can't see the color. Pair color with text or an icon that has a label.

6. Design the focus states

Row actions, expand toggles and links all need a visible focus style, and a logical tab order. Expandable rows need a real button with aria-expanded. See Tables with expandable rows.

7. Plan for small screens and zoom

At high zoom or on phones, wide tables break. Decide early whether the table scrolls sideways with a frozen first column or switches to a card layout.

Don't use tables for layout

Tables are for data. Using them to position page content confuses screen readers. Use CSS layout instead.

Accessible markup by default

GridForge exports tables as real, semantic HTML table markup rather than a grid of divs, so the structure screen readers depend on is there from the start. See the HTML table generator.

This guide is part of Data table design: a practical guide.