Accessible Table Markup Demonstration
Here is a quick demonstration of an average table written with accessibility in mind. While tables can be much more complex than this, I feel that this example represents a lower level of complexity most commonly used today. For more complex table demonstrations, lets have a quick search in Google.
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | |
|---|---|---|---|---|---|---|---|
| Person | Bob | Sue | Harry | Stan | Kris | Beth | Frank |
| Place | London | New York | Hollywood | Paris | Madrid | Boston | Sydney |
| Time | 3:00 | 11:00 | 2:30 | 8:00 | 5:45 | 9:15 | 1:30 |
The source for the above table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <table summary="This is where you write a long description of the table contents"> <caption>This is where you write a short description of the table contents</caption> <thead> <tr> <td></td> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> <th scope="col">Thursday</th> <th scope="col">Friday</th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> </thead> <tbody> <tr> <th scope="row">Person</th> <td>Bob</td> <td>Sue</td> <td>Harry</td> <td>Stan</td> <td>Kris</td> <td>Beth</td> <td>Frank</td> </tr> <tr> <th scope="row">Place</th> <td>London</td> <td>New York</td> <td>Hollywood</td> <td>Paris</td> <td>Madrid</td> <td>Boston</td> <td>Sydney</td> </tr> <tr> <th scope="row">Time</th> <td>3:00</td> <td>11:00</td> <td>2:30</td> <td>8:00</td> <td>5:45</td> <td>9:15</td> <td>1:30</td> </tr> </tbody> </table> |
Nice Marc. Honestly, That’s exactly the kind of thing I need to see. I wan’t to program nice semantic code like that, but without seeing it it’s all hit and miss. I will definitely follow this model in the future.
haku
11 Jan 08 at 9:04 am
Thanks for clearing up the difference between caption and summary.
I usually get those confused, as intuitively I’d put the longer description in the element and leave the short snippet for the attribute.
anyhow, much appreciated.
Angelo
13 Jan 08 at 4:18 pm
Lookin good, but I was going to recommend you look into Geshi. There’s several plugins for Textpattern (never tried any of them though), and it generates the code formatting server side.
Kevin Thompson
4 Jul 08 at 11:46 am
Like haku, I appreciate seeing a real-world example of this. The w3c documentation on accessible tables is just too much to digest.
Is there a difference between the table summary attribute and the caption tag? Perhaps you could expand on this article by explaining WHY the scope attribute matters and how an accessibility program would use all of this.
Also, one thing I learned the other day – It doesn’t matter in what order the thead, tbody and tfoot tags appear in your HTML – the header will always appear at the top, the footer at the bottom and the table body in between. Not sure how this order is handled by screen readers, et. al. though.
Chris Bloom
22 Aug 08 at 12:57 pm
Whoops, I overlooked the “write a long description” vs, “write a short description” in the source code. That seems like it should be the other way around though – the attribute should be the short value and the tagset should contain the long value, at least from a semantic standpoint.
Anyway, adjust my initial question in my previous comment to “Is the summary attribute used differently/separately from the caption tag by screen readers and co.?”
Chris Bloom
22 Aug 08 at 1:03 pm