Table Example
If you use tables for layout, be sure that reading the material left to right, row by row makes sense. Screen readers can't decipher the meaning behind a particular layout.
If the table contains data in rows and columns as in a spreadsheet, associate header information with the "headers" attribute. The "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell. This requires each header cell to have an "id".
Example
| Name | Quantity | Type of donut |
|---|---|---|
| Barb | 7 |
Powdered |
| John | 2 |
Filled |
| Henry | 4 | Powdered |
Source Code
<TABLE border="2" summary="This table charts the number of donuts
consumed by staff of the Center for Academic Computing and the type of
donut (powdered or filled).">
<CAPTION>Donuts consumed by each staff member</CAPTION>
<TR> <TH id="t1">Name</TH> <TH id="t2">Quantity</TH> <TH
id="t3" abbr="Type">Type of donut</TH>
<TR> <TD headers="t1">Barb</TD> <TD headers="t2">7</TD> <TD
headers="t3">Powdered</TD>
<TR> <TD headers="t1">John</TD> <TD headers="t2">2</TD> <TD
headers="t3">Filled</TD>
</TABLE>
A screen reader software might render the content by speaking the following:
"Caption: Donuts consumed by each staff member
Summary: This table charts the number of donuts consumed by staff of the Center for Academic Computing and the type of donut (powdered or filled).
Table with 3 columns and 3 rows
Name Quantity Type
Name: Barb, Quantity: 7, Type: Powdered
Name: John, Quantity: 2, Type: Filled
Name: Henry, Quantity: 4, Type: Powdered"
Portions of this website are used with permission from Penn State University.