General
- Ensure sufficient colour contrast for all text
- Do not rely on colour alone to convey information in cells
- Provide clear, descriptive headers for all columns
- Make sure the table structure is logical and easy to understand
- Keep table content concise and scannable
Web
Semantic markup
Use proper HTML table elements to ensure accessibility:
- Use <table> for the table container
- Use <thead> to group header rows
- Use <tbody> to group body rows
- Use <th> for header cells with scope attribute
- Use <td> for data cells
- Use <caption> or aria-label to provide a table description
Table caption
Provide a caption that describes the purpose of the table. This can be done with:
- A <caption> element (visible to all users)
- An aria-label attribute on the <table> (screen reader only)
- An aria-labelledby attribute referencing a heading
Header scope
Use the scope attribute on <th> elements to specify whether they apply to rows or columns:
- scope="col" for column headers
- scope="row" for row headers
This helps screen readers announce the correct header when reading cell contents.
Icon buttons in headers
When using icon buttons in table headers:
- Provide descriptive aria-label text (e.g., "More information about revenue")
- Use aria-hidden="true" on decorative icons
- Avoid using tooltips and provide information in the surrounding context
Keyboard navigation
- Users should be able to Tab through interactive elements within the table (icon buttons, links)
- If the table is scrollable, ensure keyboard users can scroll the content
- Focus indicators must be clearly visible
Screen reader considerations
- Screen readers announce tables by reading headers before cell content
- Proper use of <th> and scope ensures headers are announced correctly
- Complex tables with merged cells should be avoided for better accessibility
- Keep table structure simple and consistent
React Native
Component structure
There are currently no native table components for React Native, but accessible tables can be created using other elements: