📊

Accessible Table Guide

Verified

by Community

Creates accessible data table patterns with proper headers, captions, scope attributes, and screen reader navigation support. Covers simple tables, complex tables with merged cells, and sortable tables.

tablesdataheadersscreen-reader

Accessible Table Guide

Make data tables accessible so screen reader users can navigate and understand the data.

Usage

Describe your table structure to get accessibility recommendations.

Examples

  • "Make a pricing comparison table accessible"
  • "Add proper headers to a table with merged cells"
  • "Create an accessible sortable data table"

Guidelines

  • Use th elements with scope for row and column headers
  • Add a caption element describing the table's purpose
  • Avoid using tables for layout purposes
  • For complex tables, use id and headers attributes
  • Provide a text summary for very large data tables