SAMHSA.gov
The Substance Abuse & Mental Health Services Administration


 
Advanced Search | Help
About Section 508
Creating and Testing Documents
Testing Documents
Creating Websites
Creating Websites
Section 508 Resources

SAMHSA's Section 508 Resources

How can HTML tables be made accessible?

Because screen readers read one cell at a time and it is difficult for the impaired user to get an overview of the table and its contents, it is imperative that table data cells are associated with column headers. Assistive technology allows users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide the assistive technology with the appropriate information.

Section 1194.22 (g) and (h) state that when information is displayed in a table format, the information shall be laid out using appropriate table tags.

1. Add A Table Header

  1. The first step is to add column headers.
    Browser View HTML Code
      Spring Summer Autumn Winter
    Betty 9-5 10-6 8-47-3
    Wilma 10-6 10-6 9-5 9-5
    Fred 10-6 10-6 10-6 10-6

    <table border=1 cellspacing=0 cellpadding=3>
    <tr>
       <th>&nbsp;</th>
       <th>Spring</th>
       <th>Summer</th>
       <th>Autumn</th>
       <th>Winter</th>
    </tr>
    <tr>
       <td>Betty</td>
       <td>9-5</td>
       <td>10-6</td>
       <td>8-4</td>
       <td>7-3</td>
    </tr>
    <tr>
       <td>Wilma</td>
       <td>10-6</td>
       <td>10-6</td>
       <td>9-5</td>
       <td>9-5</td>
    </tr>
    <tr>
      <td>Fred</td>
       <td>10-6</td>
       <td>10-6</td>
       <td>10-6</td>
       <td>10-6</td>
    </tr>
    </table>

  2. Use the Scopes Attribute

A second method intoduces the use of the "Scope" attribute in tables. 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 works with some (but not all) assistive technology in tables that use "colspan" or "rowspan" attributes in table header or data cells.

Using the Scope Attribute - 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.

    Browser View HTML Code
      Spring Summer Autumn Winter
    Betty 9-5 10-6 8-47-3
    Wilma 10-6 10-6 9-5 9-5
    Fred 10-6 10-6 10-6 10-6
    		<table border=1 cellspacing=0 cellpadding=3>
    <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>

The efficiency of using the scope attribute becomes more apparent in much larger tables. For instance, if your page 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.

Is the summary attribute an option?
Although highly recommended by some webpage designers as a way of summarizing the contents of a table, the "summary" attribute of the TABLE tag is not sufficiently supported by major assistive technology manufacturers to warrant recommendation. Therefore, web developers who are interested in summarizing their tables should consider placing their descriptions either adjacent to their tables or in the body of the table, using such tags as the CAPTION tag. In no event should web developers use summarizing tables as an alternative to making the contents of their tables compliant as described above.

 

Last Update: 7/10/2009