This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.
Changes are displayed as follows:
HTML 4.01, XHTML 1.x
This technique relates to:
The row and col values of the scope attribute are currently supported to a large extent by most current versions of JAWS[begin delete] and IBM Home Page reader[end delete]. However, there are still some problems and WindowEyes support for scope is inconsistent. The same is true for Japanese versions of these screen readers. Versions of JAWS prior to version 5 and older versions of WindowsEyes have inconsistent support for scope.
At the current time, [begin change]those who want to ensure consistent support across Assistive Technologies for tables where the headers are not in the first row/column may want to use the technique for complex tables H43: Using id and headers attributes to associate data cells with header cells in data tables. For simple tables that have headers in the first column or row we recommend the use of the th and td elements.
[1927]
[end change]
The objective of this technique is to associate header cells with data cells using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.
For simple data tables [begin add]where the header is not in the first row or column, [end add]like the one in Example 1, this technique can be used[begin delete] instead of the more complex technique, Using id and headers attributes to associate data cells with header cells in data tables [end delete]. [begin change]Based on screen reader support today, its use is suggested in two situations both relating to simple tables: [1927] [end change]:
data cells marked up with td that also function as row header or column header
header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th.
Note: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope. [1927]
Note: For complex tables use ids and headers as in H43: Using id and headers attributes to associate data cells with header cells in data tables. [1927]
In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".
<table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">Fax#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>412-212-5400</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-1420</td> <td>410-306-5400</td> <td>Baltimore</td> </tr><tr> <td>3.</td> <td scope="row">Gordon Greenidge</td> <td>281-564-6720</td> <td>281-511-6600</td> <td>Houston</td> </tr> </table>
Resources are for information purposes only, no endorsement implied.
For each data table:
Check that all th elements have a scope attribute.
Check that all td elements that act as headers for other elements have a scope attribute.
Check that all scope attributes have the value row, col, rowgroup, or colgroup.
All checks above are true.