Primarily we observe two types of tables on web pages.
- Layout tables
- Data tables.
Avoid using tables for layout.
Tables must be used purely for representing some data. They should not be used to present the content on the web page. Tables that are used for presenting the content on the page are called as layout tables. For instance, a web page contains two individual sections. The first section is on left-hand side and the second section is on right-hand side. To achieve this layout the developer created a table with one row and two columns. The left-hand column displays left-hand-side content and the right-hand column shows the right-hand-side content.
Some screen readers may recognize layout tables while navigating the web page. When the screen reader user identifies the table on the web page, they try to use screen reader table navigation commands. They anticipate some data, column or row headers and the corresponding content. Since the layout tables do not have any of these properties screen reader users may fall into ambiguity.
Validation of layout tables
- Open the web page in Mozilla Firefox or Google Chrome.
- Evaluate the web page using Wave extension.
- Press Control + shift + u Or.
- Right click / hit application key and press enter on Wave option or
- In Mozilla Firefox navigate to tools menu and activate Structure / order under Wave.
- Check if any layout tables exist on the web page.
Data tables are used on web pages to represent some tabular data. Eg: Weather of different cities in a country, Population of a country in last ten decades or a calendar showing days in a month. Data tables in most of the cases will have either column headers, row headers or both. These headers must have a relation with their corresponding cells. Screen reader users when navigated with screen reader navigation commands must be able to identify the header cell relationship. On the other hand the data tables may be simple or complex.
Simple data table
A simple data table will have simple structure. Cells in all the rows will be equal and similarly cells in all the columns will be equal.
Complex data table:
In a complex data table, all or few cells in a row might be merged or a data cell can have more than one header or tables might be nested etc. A data table that shows financial results of a table can have one header group as Q1, Q2, Q3 or Q4. The months under each quarter are also the headings for a data cell. When the user navigate to a data cell they should be able to associate two headers one is month and the other is the quarter in which that month falls into.
Validation of data table
- Open the page on the browser when the screen reader is switched on.
- Use short-cut command “t” to check for any tables on the page.
- If the data tables exist, navigate the data table using screen reader table navigation commands.
- Screen reader must be able to identify the start and end of the table.
- While navigating with the screen reader navigation commands user should be able to identify the header and content relationship.
- Repeat the navigation both horizontally and vertically to check for row headers and column headers.
- Remember NVDA have some problem in identifying the structure of data tables. If possible cross check the same with some other screen reader.
WCAG Success Criteria
Table Navigation Commands
|To do this||Key Command|
|Navigate to Next table on the web page||T|
|Navigate to previous table on the web page||Shift + t|
|Navigate to next column within the table||Control + Alt + Right arrow|
|Navigate to previous column within the table||Control + Alt + left arrow|
|Navigate to next row within the table||Control + Alt + down arrow|
|Navigate to previous row within the table||Control + Alt + up arrow|