Accessible data table
A real data table whose caption and row and column headers give every cell enough context when a screen reader reaches it.
See it
What it is
An accessible data table uses real table structure so each value keeps its context when read one cell at a time. A visible caption identifies the table, th elements mark headers, and scope='col' or scope='row' associates simple headers with the cells they describe. A screen reader can then announce 'Revenue, 2026, $4.2 million' instead of an orphaned '$4.2 million'.
Use a table when information is genuinely organized by rows and columns, not to position a form or lay out a page. Tables were the layout engine of the 1990s web, and that habit is why screen readers still run into grids of cells that mean nothing. Keep thead, tbody, and a logical cell order. For multi-level or irregular headers, explicit id values on th elements and headers values on td elements can express associations that scope alone cannot.
Gotcha: bold text in the first row only looks like a header; it does not create a header relationship. A caption also is not a duplicate column heading: it names or summarizes the whole table. Responsive styling may add horizontal scrolling, but it must preserve the table elements and their associations rather than flattening every cell into unrelated divs.
Ask AI for it
Rebuild this data display as an accessible HTML table. Add a visible caption, thead and tbody, th elements for every header, and scope='col' or scope='row' for a simple grid. If headers span levels or do not map cleanly by scope, give each th a stable id and list the relevant ids in each td headers attribute. Keep the DOM order aligned with the visual grid, preserve the table semantics inside any horizontal scroll container, and put sort controls inside their th elements with aria-sort on the currently sorted header. Do not use a table for page layout. Test by navigating cell by cell with NVDA's table commands in Firefox and record which row and column headers are exposed for every data-cell pattern.