Developer Considerations for developers
- When your tables get complex, use the
<th>element to identify the header cells by adding a scope attribute. For header rows use<th scope="row">. For header columns use<th scope="col"> - Add the optional
<caption>element before the table content to give users more information on the table contents. Think of it as a headline for your table. Note that thecaptionelement must be the first child of thetableelement.
Refer to A11y style guide for the examples.
Considerations for designers
If you need to show different states of the table rows or cells, please don’t rely solely on color to convey information. Add some non-color visual indicator of the state, such as text or an icon with appropriate alternative text into the cells.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "In web content table 4 columns, 6 rows".
3. Screen reader goes into the active element.
4. Screen reader says "In table No selection. Keyword row 1 of 0 column 1 of 4".
5. Screen reader presses the "Control+Option+ArrowDown" button.
6. Screen reader says "row 2 of 0 ebay buy".
7. Screen reader presses the "Control+Option+ArrowDown" button.
8. Screen reader says "row 3 of 0 www.ebay.com".
9. Screen reader presses the "Control+Option+ArrowRight" button.
10. Screen reader says "KD,% 11.2 column 2 of 4".
11. Screen reader presses the "Control+Option+ArrowRight" button.
12. Screen reader says "CPC $3.4 column 3 of 4".
13. Screen reader presses the "Control+Option+ArrowDown" button.
14. Screen reader says "row 4 of 0 $0.65".1. Screen reader goes into the active element.
2. Screen reader says "In web content table 4 columns, 6 rows".
3. Screen reader goes into the active element.
4. Screen reader says "In table No selection. Keyword row 1 of 0 column 1 of 4".
5. Screen reader presses the "Control+Option+ArrowDown" button.
6. Screen reader says "row 2 of 0 ebay buy".
7. Screen reader presses the "Control+Option+ArrowDown" button.
8. Screen reader says "row 3 of 0 www.ebay.com".
9. Screen reader presses the "Control+Option+ArrowRight" button.
10. Screen reader says "KD,% 11.2 column 2 of 4".
11. Screen reader presses the "Control+Option+ArrowRight" button.
12. Screen reader says "CPC $3.4 column 3 of 4".
13. Screen reader presses the "Control+Option+ArrowDown" button.
14. Screen reader says "row 4 of 0 $0.65".