How to create accessible HTML tables for screen readers

Short answer

Use <table> with <caption>, <thead>, <tbody>, and <th scope="col|row">. Avoid using tables for layout. Add aria-label or aria-describedby for complex tables, and ensure keyboard focus order follows the visual reading order.

Details

Screen readers rely heavily on table semantics to announce headers alongside data cells. The scope attribute on <th> tells assistive technology whether a header applies to a column or row. For very complex tables, use id on headers and headers on <td> cells to create explicit associations.

Tables should also be responsive. On small screens, consider allowing horizontal overflow with overflow-x: auto rather than reorganizing data into non-tabular layouts that lose semantic meaning. If you are styling these containers, you might find how to create a responsive navigation bar with CSS Flexbox useful for the surrounding page layout.

Tips

• Always include a <caption> element to describe the table's purpose; it is the first thing screen reader users hear.
• Do not hide table headers with display: none; use visually-hidden techniques if you must hide them visually.
• For JavaScript-enhanced tables with sorting or filtering, see how to use array map filter reduce for data manipulation techniques.