How can HTML tables be made readable with assistive technology?

Using the “Scope” Attribute in Tables

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:


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:


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:

The following simple table summarizes the work schedule of three employees and demonstrates these principles.

<table><tr><th>&nbsp;</th><th scope="col" >Spring</th><th scope="col" >Summer</th><th scope="col" >Autumn</th><th scope="col" >Winter</th></tr><tr><td scope="row" >Betty</td><td>9-5</td><td>10-6</td><td>8-4</td><td>7-3</td></tr><tr><td scope="row" >Wilma</td><td>10-6</td><td>10-6</td><td>9-5</td><td>9-5</td></tr><tr><td scope="row" >Fred</td><td>10-6</td><td>10-6</td><td>10-6</td><td>10-6</td></tr></table>

This table would be displayed as follows:

Spring Summer Autumn Winter
Betty 9-5 10-6 8-4 7-3
Wilma 10-6 10-6 9-5 9-5
Fred 10-6 10-6 10-6 10-6

The efficiency of using the scope attribute becomes more apparent in much larger tables. Forinstance, if an agency used a table with 20 rows and 20 columns, there would be 400 data cells in the table. To make this table comply with this provision without using the scope attribute would require special coding in all 400 data cells, plus the 40 header and row cells. By contrast, using the scope attribute would only require special attributes in the 40 header and row cells.