Appropriate use of Tables
Tables can be used to hold data but need to be designed with headers to guide the screen reader user, so that the content makes sense when read aloud.
| Name | Address | City |
|---|---|---|
| George Smith | 5, Temple Street | Southampton |
| Ann Jones | 10, South Street | Cardiff |
Screen reader reading different table layouts
At one time tables were one of the only ways to offer navigation in a website that was designed into several separate areas. This has changed with the use of Cascading Style Sheets (CSS) and, when used correctly, these provide a better structure that is easier to navigate.
Method
It is possible to check the code and look out for examples of table elements and attributes e.g. TR, TD, TH and CAPTION or to use the Web Developer toolbar which can show borders around the tables and if you select the issues that occur on the W3C example of an inaccessible webpage you will see the tables that fail with explanations
However, the best method is to listen to the content of the table with a screen reader such as NVDA for Windows, built-in Narrator or Voice Over on Mac
Advice
- Webaim Creating Accessible Tables
- Orbit Media Studios Responsive Tables and Avoiding Table-Based Layout
- About.com: Web Page Layouts Shouldn't Use Tables
- WAI Web Accessibility tutorial Tables Concepts
References
This technique may be used to test the following sections of best practice.
| Document | Section | Heading | |
|---|---|---|---|
| WCAG 2.1 | 1.3.1 | Info and Relationships | More Info |
| WCAG 2.1 | 1.3.2 | Meaningful Sequence | More Info |
| WCAG 2.1 | 3.2.3 | Consistent Navigation | More Info |