Tips for accessibility
4. Structure tables so that they can be read easily and
for complex tables, suitable markup or a linear representation
would greatly increase the accessibility
Some assistive tools can render simple tables automatically,
e.g. by telling the user the format of the table and then read
out the contents of the cells one by one. The user can base on
the format to map the subsequent contents of the table when the
contents are being read by the assistive tool. This works well
with simple table such as those with 1 heading per column and
the contents are similar for all rows, e.g. there is no intermediate
totals among the rows.
For complex tables, e.g. those with several logical levels
of heading and complex formats, interim subtotals and non-uniform
row / column formats and with a large amount of information disseminated,
suitable markup or a linear representation of the table will make
the information much more accessible.
It is quite common that HTML 'tables' are used as formatting
tools for web pages. If possible, other techniques, such as style
sheets could be used. Although some assistive tools can differentiate
such tables and would not render them as data tables, the assistive
tools would read the contents of the table in a cell by cell and
row by row sequence. This may affect the content presentation
sequence and if not planned carefully, could cause confusion to
users.
Suggestion -
Although some assistive tools may be able to render simple
tables automatically, use of 'caption', 'summary' parameters or
an explicit description of the layout of the table is recommended
for all tables as these help the user to map out subsequent contents
of the table. Suitable markup such as 'id' and 'headers' parameters
should be used for more complex tables, such as those with 2 or
more logical levels of heading information. These help to render
the contents of more complex tables. There are also more references
in the W3C guidelines on how to render tables using special HTML
features. Another alternative for very complex tables, e.g. those
with more than 2 logical levels of heading or with very diversified
row formats, a linear representation would enhance the accessibility.
Example 1
- The following table is a simple table with 1 heading
per column.
[Table summary]
List of health programmes
| Date |
Programme description |
| Dec 12-13, 2000 |
Free blood pressure checking
programme for the elderly |
| Dec 20-21, 2000 |
Exhibition on family
health |
The 'summary' and 'caption' parameters have been coded
as follows:
<table border="1" summary="Upcoming health programmes -
This table consists of 2 columns. The
first column is 'date' and the second
column is 'programme
description'. End of summary">
<caption>List of health programmes</caption>
<tr>
<th width="29%" valign="top">Date</th>
<th width="71%" valign="top">
Programme description</th>
</tr>
<tr>
<td width="29%" valign="top">Dec 12-13, 2000</td>
<td width="71%" valign="top">Free blood pressure
checking programme for the elderly</td>
</tr>
<tr>
<td width="29%" valign="top">Dec 20-21, 2000</td>
<td width="71%" valign="top">Exhibition on family
health</td>
</tr>
</table>
Some screen reader software would be able to render
the table as follows:
"Table with 2 columns and 3 rows. Summary "Upcoming health
programmes - This table consists of 2 columns. The first column
is 'date' and the second column is 'programme description'.
End of summary", List of health programmes, Date, Programme
description, Dec 12-13,2000, Free blood pressure checking
programme for the elderly ..." and so on.
The 'summary' parameter can be used to inform the reader
of the structure of the table while the 'caption' parameter
gives it an explicit heading. For tools that cannot render
the 'summary' parameter, an explicit table summary page, as
illustrated in the 'table summary' link above, could be used.
The above rendering will allow the user to visualize the structure
of the table and extract its heading and content information
as the table is read out cell by cell.
More information on the use of the 'caption', 'summary',
'id' and 'header' parameters can be found at W3C
web site.
Example 2
The following is a hypothetical table on the GDP distribution
of various products and services sectors of a country. It consists
of a multi-level heading and interim sub-totals making it hard
to read when rendered with assistive tools. For example, an
assistive tool may inform the user that the following table
consists of 5 columns and 13 rows. However, as the headings
are read one by one, the user will hear a total of 7 headings
making it hard to visualize the structure of the table.
One possible treatment is to break the table into 2 or
more smaller less complex tables suitable for rendering by assistive
tools.
Adding descriptions and markup is recommended. Similar
to example 1, 'summary' description is used to present the table
structure more clearly. Markup is also used for the following
table to help the user to map out the data.
Another possible treatment is to provide a linear representation
of the table in text format. This is recommended for tables
with complex heading structures and many levels of heading and
tables with highly diversified row and column formats. An example
of a linear representation is illustrated in the 'text version
of the table' link below:
[Text version of
the table]
[Table summary]
GDP distribution of various products and services
sectors of a country
| Products and
services categories |
| 5 |
5.1 |
4 |
3.5 |
| 20 |
20.2 |
21 |
18.6 |
| 10 |
10.1 |
23 |
20.3 |
| 5 |
5.1 |
7 |
6.2 |
| Total for
the manufacturing sector |
40 |
40.5 |
55 |
48.6 |
| 20 |
20.2 |
23 |
20.4 |
| 10 |
10.1 |
10 |
8.8 |
| 15 |
15.1 |
16 |
14.2 |
| 10 |
10.1 |
9 |
8 |
| Total for
the servicing sector |
55 |
55.5 |
58 |
51.4 |
| Grand total |
99 |
100 |
113 |
100 |
The above table has been coded with the use of some of the markup
parameters recommended by W3C as shown below: -
<table width="450" border="1" cellspacing="0"
cellpadding="0" summary="GDP distribution of various
products and services sectors of a country -
This table basically consists of 5 columns. The header
of the table consists of 2 logical levels. The first
column is Products and services categories. The second
and third column are under the year 1998. The second
column is GDP value of 1998 (in US$ million). The
third column is percentage of 1998 GDP total. The
fourth and fifith column are under the year 1999.
The fourth column is GDP value of 1999 (in US$ million).
The fifth column is percentage of 1999 GDP
total. The six row is the sub-total for the
manufacturing sector. The eleventh row is the sub-total
for the servicing sector. The last row is the grand
total of all manufacturing and servicing
sectors.End of summary.">
<caption>GDP distribution of various products and
services sectors of a country</caption>
<tr>
<th rowspan="2" valign="top" width="19%">Products and
services categories</th>
<th id="header1" axis="1998" colspan="2"
align="center">1998</th>
<th id="header2" axis="1999" colspan="2"
align="center">1999</th>
</tr>
<tr>
<th id="header3" axis="GDP value" width="23%"
valign="top" align="left">GDP value at
current market price (in US$ million)</th>
<th id="header4" axis="Percentage of total GDP"
width="15%" valign="top" align="center">% of
total GDP</th>
<th id="header5" axis="GDP value" width="28%"
valign="top" align="left">GDP value at current
market price (in US$ million)</th>
<th id="header6" axis="Percentage of total GDP"
width="15%" valign="top" align="center">% of
total GDP</th>
</tr>
<tr>
<th id="header7" axis="Products and services categories"
width="19%" align="left" height="20">Garment</th>
<td headers="header7 header1 header3" width="23%"
align="center" valign="bottom" height="20">5</td>
<td headers="header7 header1 header4" width="15%"
align="center" valign="bottom" height="20">5.1</td>
<td headers="header7 header2 header5" width="28%"
align="center" valign="bottom" height="20">4</td>
<td headers="header7 header2 header6" width="15%"
align="center" valign="bottom" height="20">3.5</td>
</tr>
<tr>
<th id="header8" axis="Products and services categories"
width="19%" align="left">Electronics</th>
<td headers="header8 header1 header3" width="23%"
align="center" valign="bottom">20</td>
<td headers="header8 header1 header4" width="15%"
align="center" valign="bottom">20.2</td>
<td headers="header8 header2 header5" width="28%"
align="center" valign="bottom">21</td>
<td headers="header8 header2 header6" width="15%"
align="center" valign="bottom">18.6</td>
</tr>
<tr>
<th id="header9" axis="Products and services categories"
width="19%" align="left" height="21">Toys</th>
<td headers="header9 header1 header3" width="23%"
align="center" valign="bottom" height="21">10</td>
<td headers="header9 header1 header4" width="15%"
align="center" valign="bottom" height="21">10.1</td>
<td headers="header9 header2 header5" width="28%"
align="center" valign="bottom" height="21">23</td>
<td headers="header9 header2 header6" width="15%"
align="center" valign="bottom" height="21">20.3</td>
</tr>
<tr>
<th id="header10" axis="Products and services categories"
width="19%" align="left">Watches</th>
<td headers="header10 header1 header3" width="23%"
align="center" valign="bottom">5</td>
<td headers="header10 header1 header4" width="15%"
align="center" valign="bottom">5.1</td>
<td headers="header10 header2 header5" width="28%"
align="center" valign="bottom">7</td>
<td headers="header10 header2 header6" width="15%"
align="center" valign="bottom">6.2</td>
</tr>
<tr>
<th width="19%" align="left"><font color="blue">Total
for the manufacturing sector</font></th>
<td width="23%" align="center" valign="bottom">40</td>
<td width="15%" align="center" valign="bottom">40.5</td>
<td width="28%" align="center" valign="bottom">55</td>
<td width="15%" align="center" valign="bottom">48.6</td>
</tr>
<tr>
<th id="header11" axis="Products and services categories"
width="19%" align="left">Banking</th>
<td headers="header11 header1 header3" width="23%"
align="center" valign="bottom">20</td>
<td headers="header11 header1 header4" width="15%"
align="center" valign="bottom">20.2</td>
<td headers="header11 header2 header5" width="28%"
align="center" valign="bottom">23</td>
<td headers="header11 header2 header6" width="15%"
align="center" valign="bottom">20.4</td>
</tr>
<tr>
<th id="header12" axis="Products and services categories"
width="19%" align="left">Hotel and catering</th>
<td headers="header12 header1 header3" width="23%"
align="center" valign="bottom">10</td>
<td headers="header12 header1 header4" width="15%"
align="center" valign="bottom">10.1</td>
<td headers="header12 header2 header5" width="28%"
align="center" valign="bottom">10</td>
<td headers="header12 header2 header6" width="15%"
align="center" valign="bottom">8.8</td>
</tr>
<tr>
<th id="header13" axis="Products and services categories"
width="19%" align="left">Legal services</th>
<td headers="header13 header1 header3" width="23%"
align="center" valign="bottom">15</td>
<td headers="header13 header1 header4" width="15%"
align="center" valign="bottom">15.1</td>
<td headers="header13 header2 header5" width="28%"
align="center" valign="bottom">16</td>
<td headers="header13 header2 header6" width="15%"
align="center" valign="bottom">14.2</td>
</tr>
<tr>
<th id="header14" axis="Products and services categories"
width="19%" align="left">Accounting</th>
<td headers="header14 header1 header3" width="23%"
align="center" valign="bottom">10</td>
<td headers="header14 header1 header4" width="15%"
align="center" valign="bottom">10.1</td>
<td headers="header14 header2 header5" width="28%"
align="center" valign="bottom">9</td>
<td headers="header14 header2 header6" width="15%"
align="center" valign="bottom">8</td>
</tr>
<tr>
<th width="19%" align="left"><font color="blue">Total
for the servicing sector</font></th>
<td width="23%" align="center" valign="bottom">55</td>
<td width="15%" align="center" valign="bottom">55.5</td>
<td width="28%" align="center" valign="bottom">58</td>
<td width="15%" align="center" valign="bottom">51.4</td>
</tr>
<tr>
<th width="19%" align="left">Grand total</th>
<td width="23%" align="center" valign="bottom">99</td>
<td width="15%" align="center" valign="bottom">100</td>
<td width="28%" align="center" valign="bottom">113</td>
<td width="15%" align="center" valign="bottom">100</td>
</tr>
</table>
A possible text equivalent
representation of the table would be:
- The GDP figure valued at current market price for
the Garment Sector in 1998 is US$ 5 million and accounts for
5.1% of the total GDP.
- The GDP figure valued at current market price for
the Electronics Sector in 1998 is US$ 20 million and accounts
for 20.2% of the total GDP.
- The GDP figure valued at current market price for
the Toys Sector in 1998 is US$ 10 million and accounts for
10.1% of the total GDP.
- The GDP figure valued at current market price for
the Watch manufacturing Sector in 1998 is US$ 5 million and
accounts for 5.1% of the total GDP.
- The total GDP figure for the above manufacturing sectors
in 1998 is US$ 40 million and accounts for 40.5% of the total
GDP.
and similar rendering for the remaining items. . .
Example 3 Tables used for formatting
The following table is a formatting table to align the
contents. The table borders are made visible on purpose to illustrate
the format used -
Order
Discount |
over 1000
10 |
pieces
% |
In fact, most borders of formatting tables are made invisible
and therefore an ordinary visitor would see the contents as
-
Order
Discount |
over 1000
10 |
pieces
% |
However, an assistive tool would read out the contents
of a table in a cell by cell manner, from left to right and
top to bottom. Thus, the contents will be read as 'Order, Discount,
over 1000, 10, pieces, %' which would be meaningless to the
user. If the formatting table used is changed as follows, the
contents will make more sense - "Order, over 1000, pieces, Discount,
10, %'.
| Order |
over 1000 |
pieces |
| Discount |
10 |
% |
Users need to verify the rendering carefully, if they
have used tables to format their web pages, to avoid incorrect
presentation of the contents.
|