HTML and XHTML
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. 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 Window-Eyes have inconsistent support for
scope
.
At the current time, 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.
The objective of this technique is to associate header cells with data cells in complex tables 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 where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables: :
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.
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.
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"
.
Example Code:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone#</th>
<th scope="col">Fax#</th>
<th scope="col">City</th>
</tr><tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<th scope="row">Clive Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr><tr>
<td>3.</td>
<th scope="row">Gordon Greenidge</th>
<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.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.