There are many ways you can make your tables more accessible, but the easiest is to use table tags that are already a part of the HTML specification. Here's how to use these tags (and an attribute) so that your HTML tables are accessible.
The <caption> Tag
Table captions are very common on tables in printed media, but for some reason, Web designers often leave them off of tables on Web pages. They are very easy to use, just add the caption text inside the <caption> tag right after you open your table:
<table style="width: 400px; border: 1px solid #000;">
<caption>Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>
<tr><th>Month</th><th>Fur Shed (mm)</th></tr>
</table>
To be valid, your caption tag should appear right after you open the table, no other location is valid. However, that doesn't mean that the caption has to appear at the top of the table. You can also make it appear to the right, left, or bottom - depending upon where you want it and where it makes the most sense. However, this property doesn't work in IE 6. Change the location with the caption-side style property:
<table style="width: 400px; border: 1px solid #000; caption-side: bottom;">
<caption>Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>
<tr><th>Month</th><th>Fur Shed (mm)</th></tr>
</table>
Because IE 5 and 6 are so popular, it's important to get the caption to display on the bottom in these browsers as well, if that's where you want it. So to get it working in IE, use the align attribute on the caption tag:
<table style="width: 400px; border: 1px solid #000; caption-side: bottom;">
<caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog, Shasta</caption>
<tr><th>Month</th><th>Fur Shed (mm)</th></tr>
</table>
What to Use the Caption For
Captions provide additional information about the table. Since they typically appear above the table, you can use them as a title, but to make your tables accessible, you want to provide more information than that.
You can't include paragraphs within the caption element, but you can add quotations, anchors, and most text tags. Use these elements to provide the most complete caption you can without compromising the page. You don't need to summarize the entire table, we'll leave that to the attribute on page 2 - the summary attribute.
- Page 1 - The caption Tag
- Page 2 - The summary Attribute
- Page 3 - The thead Tag
- Page 4 - The tbody Tag
- Page 5 - The tfoot Tag
Did you find this article useful or interesting? Post a comment.
