Even when tables look well structured to the eyes, assistive technologies can still interpret their contents inaccurately, causing problems for visually impaired users. For example, screen readers might read out their contents in the wrong order. This is especially likely when tables are complex, are simple but have unusual structure, or are created by using unusual practices. Providing information about the relationship between table cells is one of the ways in which the problem is minimized, and the attributes most commonly used to achieve this are scope, id, and headers. The scope attribute can be used by itself, while id and headers must be used together.
1. The scope Attribute and Accessibility
The scope attribute is used for defining the scope of a header (i.e., the cells that are affected by a header). It defines whether the header defined in the <th> element is for a row, column, or a group of rows or columns.
Situations in which using it is recommended include when the header of a table is not in the first row or column and where a data cell that is marked up with the <td> element is used as a header. The attribute takes any of the four values: col, row, rowgroup, or colgroup. Table 4.3 describes their function, and Figure 4.16 shows how they are used.
Notice that the code in the example is the same as that in Figure 4.8, except for the addition of the scope attribute to the cell of each row that is a header (but not in the first column) and the cells of the first row that are headers. Basically, as a general rule, all <th> elements and <td> elements that act as headers should have a scope attribute. The attribute does not affect the appearance of a table, so the code in the example produces the same result as in Figure 4.9.
2. The id and headers Attributes and Accessibility
As introduced in Chapter 2, the id attribute is a global attribute used to give a unique identity to an element. The headers attribute, on the other hand, is used to associate one or more header cells with a table cell. Its value must correspond to the id attribute of the <th> element with which it is associated. When multiple values are specified, the values are space- separated, each value again corresponding to the id attribute of the <th> element with which it is associated. The technique is usually suitable for the situation when the use of the scope attribute is not enough to describe the relationships between table headers and data cells, such as when data cells are associated with more than one row and/or column header. Figure 4.17 shows how the attributes are used together, and Figure 4.18 shows the created table. Notice that as with the scope attribute, the id and headers attributes do not affect the display of a table.
Again, note that the border has been added by using CSS, and this has been done just to make the table clearer to see. In the first table row element, the <th> elements are given c, t, and e identities, respectively. In the second table row element, each <th> is given an id and is also associated with the corresponding <th> element defined in the first <tr>, using the headers attribute. In the third table row element, the headers attribute is used to associate each <td> element with the appropriate <th> element.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.