Accessible Tables

The most accessible approach uses native HTML table elements. The <table>, <thead>, <tbody>, <th>, and <td> elements provide built-in semantics that screen readers understand.

Use the scope attribute on <th> elements to indicate whether they are column headers (scope="col") or row headers (scope="row").

Always include a visible <caption> or aria-label to describe the table's purpose. The caption should be placed immediately after the opening <table> tag.

When you need custom styling that's difficult with native tables, you can use div elements with ARIA roles. This approach requires careful implementation of role="table", role="row", role="columnheader", role="rowheader", and role="cell". You must also implement keyboard navigation manually using arrow keys, Home, End, and Tab. All cells must be focusable with tabIndex="0" or tabIndex="-1" for programmatic focus. Ensure all relationships are properly communicated via ARIA attributes. This approach is more complex and should only be used when semantic HTML tables are not feasible.

Sortable tables require interactive controls in the header cells. Use <button> elements inside <th> elements to make columns sortable. The aria-sort attribute indicates the current sort state: none (not sorted), ascending, or descending. Always provide visual indicators (arrows) and ensure the sort state is announced to screen readers via an aria-live region. Include a descriptive aria-label on the button that describes what will happen when clicked, including the current sort state. The status message should be announced immediately after sorting.

For custom styled sortable tables using divs with ARIA, implement sorting controls within the columnheader elements. Use role="button" on sortable headers with aria-sort to indicate sort state. Provide descriptive aria-label that describes the sort action and current state. Use aria-live regions with aria-atomic="true" to announce sort changes. Keyboard navigation must be manually implemented for the div-based structure, including arrow key navigation between cells.

On mobile devices, tables can become difficult to use. Two common approaches: 1) Horizontal scroll with proper announcements and scroll indicators, or 2) Card-based layout that transforms rows into cards. For horizontal scroll, ensure users know the table is scrollable and provide visual indicators. For card-based layouts, maintain the same information hierarchy using semantic HTML (<dl>, <dt>, <dd>) and ensure all data is accessible. Use proper heading levels in cards. The card approach is often more usable on small screens and provides better accessibility.

Tables with merged cells (colspan/rowspan) require careful attention to accessibility. Use the scope attribute for simple relationships, but for complex tables with multiple header levels, use the headers attribute on each <td> to explicitly reference its header cells. Each header cell should have a unique id, and data cells reference these IDs in their headers attribute (space-separated for multiple headers). Use scope="colgroup" for column group headers. This ensures screen readers can correctly associate data with all relevant headers, including both row and column headers.