Accessibility Series - TBODY
Accessibility Series - TBODY
- Posted on 08/11/2006 at 08:00 AM by Sandra Clark
- Categories: Accessibility / Web Standards
Lately, I've been involved in conducting an accessibility audit. One of the common mistakes I see coming up in page after page is the misuse of the <tbody> tag. So, since the people who are creating these pages are smart people, and I know that the people who read my blog are smart people. I figured maybe some of you are laboring under the same misconceptions.
This is an article in an occasional series on common mistakes in markup and accessibility. While its fine to always talk about what the guidelines are, sometimes its also good to talk about what not to do or how to do something properly.
For some reason, many people think that adding a <tbody></tbody> series of tags to their tables increases accessibility. While I'm not sure where this misconception came from, I know its out there. I can definitively state that the <tbody></tbody> tags do not increase accessibility in and of themselves. In fact using them by themselves is not a valid usage.
In Structural HTML, a table is the perfect way of presenting tabular data. That is data that is connected via both rows and columns. HTML 4.01 (and xHTML 1.x) have added a lot to tables that increase accessibility as well as just more information regarding the information in a table.
<table summary="Summary of tabular data tables is a good way to increase accessibility">
<caption>Example 1 - An example of a properly structured and accessible table</caption>
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">© non-accessibility users anonymous</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
</tr>
<tr>
<th scope="row">Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
</tr>
</tbody>
<tbody id="secondgroup">
<tr>
<th scope="row">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
</tr>
<tr>
<th scope="row">Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
</tr>
</tbody>
</table>
An accessible table presenting tabular data should always include a summary of what the table is displaying. For blind users, this allows the screen reader to announce the table, giving the user the ability to go into table reading mode or to skip the table entirely if they don't wish to hear the data at that time. (I'll discuss the scope attributes in a later post, but suffice it to say that using scope allows a screen reader to associate a particular cell with the header(s) it is related to.
Conceptually the use of the row group tags <thead>, <tfoot> and <tbody> should allow for scrolling of table bodies independently of the headers and the footers. Unfortunately, no browser that I know of does this. However, most modern browsers do support the use of these tags when printing a web site to print both the header and footer groups on each page.
The <tbody> tag set is ALWAYS used in conjunction with the <thead> and optionally the <tfoot> tag sets. They are always used in the above order. <thead> followed by <tfoot> and <tbody>. There may be multiple <tbody> tag sets in a table, however they must all come after the <tfoot> tag set. Since the browser needs to know what the content within the header and footer is before rendering the body (in printing at this point) to only render enough of the body group(s) per printed page (or maybe, hopefully one day in the future, scrolling), the header and footer tag sets must precede the body tag set. While <tfoot> is optional, if <tbody> is used, then <thead> must be used. Each group must contain at least one row.
So <tbody> by itself may not be used. It neither adds structural or accessible meaning in and of itselfl and in some cases can cause problem in testing for accessibility since some accessibility checkers assume that any table using a <tbody> tag set must be a data table and therefore should include <thead>, and as well as <th> tags. So using these incorrectly can slow down a testing/auditing situation as well as adding unnecessary bloat to your code.
Additional references for this information may be found at
As an additional benefit to proper tabular data structural markup, the tag sets itself are able to be styled in CSS.
<style type="text/css">
caption, tfoot td{
font-size: .9em;
text-align: center;
}
table{
border: thin solid #FF0000;
border-collapse: collapse;
caption-side: bottom;
font-family: "Times New Roman", Times, serif;
table-layout: auto;
}
tbody{
background-color: #F0FFF0;
border-bottom: thin solid #000000;
border-top: thin solid #000000;
}
tbody#secondgroup{
background-color: #FFFFE0;
}
td {
padding: 1em;
}
th{
padding: 1em;
}
thead tr{
border-bottom: thin solid #000000;
}
thead,tfoot {
background-color: #FFFACD;
}
</style>
Which ends up styling our tag groups as:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| © non-accessibility users anonymous | |||
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 |
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 |
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
- Posted By Sandra Clark
- Posted On October 26, 2006 at 02:56 PM
- Posted By Jeff Howden
- Posted On August 11, 2006 at 01:01 PM
Further, nowhere does it say that a THEAD must be used if a TBODY is used. In fact, no spec goes beyond simply stating that THEAD is optional.
- Posted By Jeff Howden
- Posted On January 14, 2007 at 03:47 PM
1. "In fact using them (TBODY) by themselves is not a valid usage."
2. "While
is optional, if is used, then must be used."Neither of these are correct, per the spec.
- Posted By Ken B.
- Posted On June 16, 2007 at 11:57 AM
The ,
and elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML.
http://www.datarecovery-on.com
- Posted By nick
- Posted On April 12, 2009 at 03:32 PM
http://www.shayna.com