VI. How To?
6.4. Page Design
6.4.3. Tables
In the early days of HTML 4.0, when CSS was not supported by all browsers properly, designers were using tables in order to position the elements of the design on the page. This was called table-based layout and it consisted in overlapping several tables and using “spacer gif” to place an elements on the desired place to the pixel. However, this technique was and still is a very important accessibility problem. The first reason is that semantically a table should be used to present tabular data, where the data hold in each cells has a relationship with the table headers (cells from the first line or row); the use of table to place the elements in the page is thus a loss of meaning for the table element. The second reason is that tables, especially overlapping ones, are difficult to “visualize” with a screen reader and generally have a wrong render on mobile terminal.
However, with the growing use of CSS for design, many developers misunderstood the principle of table-less design and believed that all table should be removed from a web page. This is of course wrong, the tables elements exists in HTML for a reason: to present tabular data. It would be as much semantically incorrect to use div and p elements to build something that will look like a table than to use tables for design purpose.
However, even use in a semantically correct way, table can cause accessibility problems, especially for blind people, who do not get an overall view of the table like seeing people do. Indeed, when a table is present on a web page, the screen reader will read the content of each cell, line by line, starting from to top left, to the bottom right; this need, from the blind person, a huge effort of focusing and memorizing, to be able to link the content of a cell to its headers.
Here is the example of a very simple table:
<table>
<tr>
<td><strong>Header 1<strong></td>
<td><strong>Header 2<strong></td>
<td><strong>Header 3<strong></td>
</tr>
<tr>
<td>Line header 1</td>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Line header 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
This will render like:
| Header 1 | Header 2 | Header 3 |
| Line header 1 | Cell 1 | Cell 2 |
| Line header 2 | Cell 3 | Cell 4 |
Note: CSS is used here and in the following example to add the borders to both tables.
Click here to see the full example.
Jaws will read this table: “Table, header one, header two, header three, line header one, cell one, cell two, line header two, cell three, cell four, end of table”. Here the table is simple and does not have many columns and lines, but in the case of more bigger or complex tables, it is difficult to remind what “Cell 4” is related to.
By identifying table’s headers and linking them to the cells via the header property:
<table>
<tr>
<th id="t1">Header 1</th>
<th id="t2">Header 2</th>
<th id="t2">Header 3</th>
</tr>
<tr>
<td headers="t1">Line header 1</td>
<td headers="t2">Cell 1</td>
<td headers="t3">Cell 2</td>
</tr>
<tr>
<td headers="t1">Line header 2</td>
<td headers="t2">Cell 3</td>
<td headers="t3">Cell 4</td>
</tr>
</table>
The visual appearance of the table will remain the same, but Jaws, will be able to read the table as: “Table, header one, header two, header three, header one: line header one, header two: cell one, header three: cell two, header one: line header two, header two: cell three, header three: cell four.” This will allow the blind person to link the content of a cell to its header without having to go up and down on the table.
For simple tables the tags id and headers can be replaced by the tag scope that will hold the value “row” or “col”.