Overview
Tables should be accessible via keyboard navigation and provide clear structure information to screen readers through proper semantic markup.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
Tab |
Moves focus between interactive table elements |
|
Shift + Tab |
Moves focus backwards through table elements |
|
Enter / Space |
Activates sorting controls or interactive elements |
|
Arrow keys |
Navigate between table cells |
|
Home / End |
Navigate to first/last cell in row |
Semantic Markup
- Use <table>, <thead>, <tbody>, <th>, and <td> elements for proper table structure.
- Use scope="col" for column headers and scope="row" for row headers.
- Use <caption> to provide table descriptions for screen readers.
- Use aria-sort to indicate current sorting state on sortable columns.
- Use aria-label or aria-describedby for complex table relationships.
- Make sure table content is properly announced and navigable with assistive technologies.