How can HTML tables be made readable with assistive technology?

Using the “scope” attribute is one of the most effective ways of making HTML compliant with these requirements. It is also the simplest method to implement. The scope attribute also works with some (but not all) assistive technology in tables that use “colspan”or “rowspan” attributes in table headerordata cells.

The first row of each table should include column headings. Typically, these column headings are inserted in <TH> tags, although <TD> tags can also be used. These tags at the top of each column should include the following attribute:

scope=”col”

By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably “id” and “headers”) there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH>or<TD> tags. Include the following attribute in these cells:

scope=”row”

By simply adding this attribute, the text in that cell becomes associated with every cell in that row. While this technique dramatically improves the usability of a Web page, using the scope attribute does not appear to interfere in any way with browsers that do not support the attribute.

Example of source code: