Identify table headers by using the TH (table header) element instead
of the TD (table cell) element. Many authoring tools do this automatically when you tell
it selected cells should be headers. A table marked up in this manner might look like
(example taken from the WAI Techniques for Web Content Accessibility):
<TABLE border="border"
summary="This table charts the number of cups of coffee consumed by
each senator, the type of coffee (decaf or regular), and whether
taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="t1">Name</TH>
<TH id="t2">Cups</TH>
<TH id="t3" abbr="Type">Type of Coffee</TH>
<TH id="t4">Sugar?</TH>
</TR>
<TR>
<TD headers="t1">T. Sexton</TD>
<TD headers="t2">10</TD>
<TD headers="t3">Espresso</TD>
<TD headers="t4">No</TD>
</TR>
<TR>
<TD headers="t1">J. Dinnen</TD>
<TD headers="t2">5</TD>
<TD headers="t3">Decaf</TD>
<TD headers="t4">Yes</TD>
</TR>
</TABLE>
This renders visually as:
Cups of coffee consumed by each senator
Name
Cups
Type of Coffee
Sugar?
T. Sexton
10
Espresso
No
J. Dinnen
5
Decaf
Yes
A speech synthesizer might render it by speaking the following:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee
consumed by each senator, the type of coffee (decaf or regular),
and whether taken with sugar.
Name: T. Sexton,
Cups: 10,
Type: Espresso,
Sugar: No
Name: J. Dinnen,
Cups: 5,
Type: Decaf,
Sugar: Yes
It is important not to use the TH element to achieve formatting;
use other means to do that. The semantic meaning of the TH
element is important to many access aids.
Rationale:
Browsers and assistive technologies rely on structural markup to
customize presentation to meet a user's needs. This is important to the
computer's ability to speak the contents of a table using a speech
synthesizer. |