Tables are a common way to present structured information such as invoices, reports, users, and product inventories. A table may look correct visually while remaining difficult to navigate with a screen reader or keyboard.
Accessible table design begins with meaningful HTML structure and continues with clear labels, predictable interactions, and thoughtful handling of large datasets.
Use Semantic Table Elements
When the data is genuinely tabular, prefer HTML table elements over a collection of generic div elements.
function UserTable({ users }) {
return (
<table>
<caption>Registered users</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<th scope="row">{user.name}</th>
<td>{user.email}</td>
<td>{user.status}</td>
</tr>
))}
</tbody>
</table>
);
}The caption describes the table, column headers identify each field, and row headers help establish context for individual records. Adapt the markup to the actual relationships in the data.
Make Sorting Understandable
If users can sort columns, communicate the current sorting state and ensure that the controls are keyboard accessible.
A button inside a column header is often clearer than making an entire header an unexplained click target. The interface should also indicate the active sort direction through text or an appropriate visual cue.
When sorting changes, preserve focus and avoid surprising users by moving them to a different part of the page.
Handle Wide Tables Carefully
On smaller screens, wide tables can overflow their containers. A horizontally scrollable wrapper may be appropriate, provided users can discover and operate it.
Do not hide essential columns without offering another way to access the information. If a compact mobile layout is necessary, consider presenting each record as a clearly labeled card.
Support Loading and Empty States
A table should distinguish between no records, data that is still loading, and an error that prevented retrieval. Use an appropriate message and avoid presenting a blank region that leaves users uncertain.
For dynamic updates, communicate important status changes in a way assistive technology can perceive without announcing every minor update.
Consider Pagination and Large Datasets
Rendering thousands of rows can degrade performance. Server-side pagination or virtualization may be appropriate, but both require careful keyboard and screen-reader testing.
Keep pagination controls labeled, expose the current page, and explain when a search or filter affects the visible results.
Test with Real Interaction
Check keyboard navigation, screen-reader interpretation, sorting, filtering, and responsive behavior. Automated accessibility checks are useful, but they do not replace testing with assistive technology.
Conclusion
Accessible React tables rely on semantic structure, descriptive headers, understandable controls, and useful loading and empty states. Good table design improves both accessibility and maintainability without requiring an elaborate component framework.
