Data tables need headers, captions and scope.

The guidance#

Use th for headers, caption for the table title, and keep layout tables out of data. For responsive overflow tables, add a descriptive aria-label since scrolling hides columns.

In markup#

html
<table class="w-full text-sm" aria-label="Quarterly revenue">
  <caption class="sr-only">Revenue by quarter, 2026</caption>
  <thead><tr><th scope="col" class="text-left">Quarter</th><th scope="col" class="text-right">Revenue</th></tr></thead>
</table>

Checklist#

  • Tested with keyboard only
  • Screen-reader spot check
  • Contrast verified for new pairs
  • Reduced-motion behavior confirmed
  • Zoomed to 200% without loss

accessibility/index|Accessibility hub · sr-only