Solutions: Checkpoint G, simple tables
Screen readers and tables
Contrary to the label, most screen readers don't read the screen. Some
screen readers in the past, such as PW Webspeak, did read the screen
starting at the top left and reading across the screen from left to
right, row by row, down to the bottom right. Screen reading technologies
in common use today, including JAWS the most popular screen reader, read
the underlying source code for the page rather than the content on the
screen.
JAWS users can have the information in a data table presented in the
following ways:
- The whole table can be read line by line, either continuously or
with sections selected manually.
- With the keyboard command Atl+Ctrl+Left (or right) Arrow the user
can move along rows and JAWS reads out the heading of the actual column
plus the content of the cell. Users can also read up and down columns in
a similar way.
- With the focus in a particular cell, the keyboard command (Alt+Ctrl+Num
Pad 5), will cause JAWS to present the information relating to the
selected cell. That is, the cell content and, if the table has been
coded correctly, the associated row and column headings.
As can be seen, this approximates the earlier description of how sighted
people typically use data tables to obtain information.
Identifying a Table
When you see a data table on a web page it usually has a title or label
that identifies the table, for example "Vegetable Prices in San
Bernardino and Fontana". Also, a quick glance at the table will usually
indicate the way it functions, for example products across the top and
cities or retailers down the left column.
HTML provides two tags that can help orientate screen reader users and
enhance the accessibility of data tables.
<CAPTION> for the Table Title
The title for data tables you see on the web today are often presented
outside the table in a separate heading <h> or paragraph
<p> element. In some cases they are presented within the table in
the top row <tr> or data cell <td>. All of
these approaches may cause problems for users of assistive technologies.
The <caption> element is the most accessible way of
providing a table with an identifying title. By default, 'caption' will
place the title in the centre immediately above the table. However, CSS
can be used to change the style and on screen position of the 'caption'
element. For example, the title (caption) can be put underneath the
table as is commonly done in scientific and academic publications.
When coding a table, the <caption> should come immediately
after the table element and before anything else.
summary for Table Purpose
summary is not a stand-alone element like caption, but an
attribute that is contained within the table element. The contents of
the summary are not displayed on the screen by graphic
browsers but can be outputted by screen readers and Braille displays to
assist users of these devices to understand the table.
summary should be used to describe the primary purpose of
the table and give an indication of its overall structure. Most
assistive output technologies will read the summary first
to provide the user with information to help them interpret and use the
table. With more complex tables, the summary becomes
increasingly important.
The following example is part of the code for the "Vegetable Prices in
San Bernardino and Fontana" table:
<table summary="Wholesale and retail prices of
vegetables in San Bernardino and Fontana. There are two levels of row
headings.">
<caption>Vegetable prices in Hobart and
Darwin</caption>
...
Simple Data Tables
Sighted web users seeking information from a data table, usually scan
the headings at the top of each column and the headings at the beginning
of each row to identify those that apply to a particular data cell in
the table. A relatively easy task that only requires the user being able
to determine what is a heading and what is data.
Unfortunately, data tables on the web often use the standard <td>
element for cells that contain both the headings and the data (or
information). No problem for the sighted user since they can usually
easily differentiate between a cell that contains a heading and one that
contains data.
Many assistive technologies however, are unable to differentiate between
the two, and will present anything that is contained within <td>
tags as data. As a result, users of screen readers and Braille displays
sometimes find it difficulty associating the information in a cell in
the centre of a data table with the appropriate column and/or row
headings, depending on the technology they use and the complexity of the
table.
HTML provides an easy and accessible way of overcoming this problem. The
<th> element should always be used for column and row headings in
data tables. (NB: <th> should never be used with layout
tables - Guideline 5.4).
The following table for "plum and pear" prices uses <th>
for the headings.
Prices for black plums and bosca pears in California
|
Black Plums |
Bosca Pears |
| Wholesale |
$1.00 |
$1.50 |
| Retail |
$2.00 |
$2.50 |
<table border="1" summary="Black plums and bosca pears table with one
level of row and column headers">
<caption>Prices for black plums and bosca pears in
California</caption>
<tr>
<td></td>
<th scope="col">Black Plums</th>
<th scope="col">Bosca
Pears</th>
</tr>
<tr>
<th scope="row">Wholesale</th>
<td>$1.00</td>
<td>$1.50</td>
</tr>
<tr>
<th scope="row">Retail</th>
<td>$2.00</td>
<td>$2.50</td>
</tr>
</table>
A screen reader like JAWS will read the 'wholesale' row like this:
"wholesale, dollar one point OO, dollar one point five O"
If the user wants to know the wholesale price of pears, JAWS will voice
the selected data cell like this:
"column three, row two, pears wholesale, dollar one point five O"
|
