Layout Tables
Many people use tables when designing the visual layout of their web page. While using cascading style sheets for layouts are more accessible overall there are a few things you can do to your table to make it accessible. Keep in mind that when a screen reader reads your table it is going to read each row from left to right. This is important as the content may not make sense when read this way.
Example
A butterfly's relatively enormous compound eyes are made up of thousands of ommatidia each of which senses light and images. |
Larva |  |
 |
Adult | The head has a pair of very short antennae, mouthparts (upper lip, mandibles, and lower lip), and six pairs of very simple eyes, called ocelli. |
|
A butterfly's relatively enormous compound eyes are made up of thousands of ommatidia each of which senses light and images. |
 Larva |
 |
 |
 Adult |
The head has a pair of very short antennae, mouthparts (upper lip, mandibles, and lower lip), and six pairs of very simple eyes, called ocelli. |
|
Listen to how a screen reader
may read the contents of each table cell:
mp3 (69K)| windows media (96K)
Transcript of screen reader reading the example table:
"1
A butterfly's relatively enormous compound eyes are made up of thousands of ommatidia each of which senses light and images.
2
Larva
3
Monarch Butterfly Larva
4
Monarch Butterfly
5
Adult
6
The head has a pair of very short antennae, mouthparts (upper lip, mandibles, and lower lip), and six pairs of very simple eyes, called ocelli.
7"
Links
Creating Accessible
Layout Tables
(http://www.webaim.org/techniques/tables)
WAI Table Examples
(http://www.w3.org/WAI/wcag-curric/chk6-0.htm)
