Developers are encouraged to use
abbr for complex data tables to aid usability and accessibility. To help developers determine if they've used those features correctly, I've created a complex table inspector bookmark that reveals the hidden information.
Author: Gez Lemon
Revealing Accessibility Features
Note: The axis, summary, and scope attributes on a regular table cell are no longer valid in HTML5. This bookmarklet still evaluates them, but they are no longer used in this example.
Nate Koechley and Pete, the developer of the Firefox screen-reader emulator - Fangs, had in interesting conversation about the functionality of Fangs. Nate suggested that the emulator reveal hidden information such as the
abbr attributes to enhance accessibility. Fangs is a pun on jaws, so its purpose is to emulate how JAWS may render a document. It's a fantastic extension, but I think Nate's got a good point that it would be good to reveal these accessibility attributes. I don't think Fangs would be the right place to reveal them though, unless they're revealed in reading-mode in JAWS at some time in the future.
As it's such a good idea, I considered writing a Firefox extension myself. After further consideration, I decided to write it as a favelet, so that it could be used with any user agent that supports ECMAScript. I think its strength is in helping developers to author more complex tables, but I do believe it could be useful for anyone to reveal hidden information in data tables. The favelet reveals the following information:
summaryattribute (rendered above the table)
Update for Safari
Thanks to Roger Johansson for informing me that Safari doesn't load external scripts. I've created a separate version of the favelet for Internet Explorer users that uses an external script, as IE can only cope with up to 508 characters in the URL; the other version should work with all script enabled browsers.
To try out the favelet, drag and drop the appropriate link below your favourites.
Some Sample Tables
To illustrate the favelet, I've borrowed some examples from the W3C. The W3C provide two examples of marking up a table to show the number of cups of coffee consumed by senators. Both examples abbreviate the header cell for Type of Coffee to
Type, and both examples render identically in most current browsers. Use the table inspector to investigate the differences in markup.
The first table example uses the
headers attribute to bind the table cells to a particular header cell, and the second table example uses the
scope attribute to bind table cells to a header cell. The following table is the W3C's example of associating table cells with their headers using the
|Name||Cups||Type of Coffee||Sugar?|
A more complex table may have table cells associated with more than one heading using a space-separated list of values, and could also explicitly use a
scope attribute on the appropriate header cell. The following table is the W3C's example of associating table cells with their headers using the
scope attribute on the header cells.
|Name||Cups||Type of Coffee||Sugar?|
The W3C also provide the following example, which also uses the
scope attribute on both
|Community Courses -- Bath Autumn 1997|
|Course Name||Course Tutor||Summary||Code||Fee|
|After the Civil War||Dr. John Wroughton||The course will examine the turbulent years in England after 1646. 6 weekly meetings starting Monday 13th October.||H27||£32|
|An Introduction to Anglo-Saxon England||Mark Cottle||One day course introducing the early medieval period reconstruction the Anglo-Saxons and their society. Saturday 18th October.||H28||£18|
|The Glory that was Greece||Valerie Lorenz||Birthplace of democracy, philosophy, heartland of theater, home of argument. The Romans may have done it but the Greeks did it first. Saturday day school 25th October 1997||H30||£18|
The following is the W3C's example of using the
axis attribute to provide a conceptual grouping of table cells. A more complex example could have a comma-separated list of values to provide more than one conceptual grouping for a particular table cell or header cell. This example also makes better use of the