Summary

Developers are encouraged to use summary, headers, axis, scope, and 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

Contents

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 scope and 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:

[Back to the contents]

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.

[Back to the contents]

The Bookmarklet

To try out the favelet, drag and drop the appropriate link below your favourites.

[Back to the contents]

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 headers attribute.

Cups of coffee consumed by each senator
Name Cups Type of Coffee Sugar?
T. Sexton 10 Espresso No
J. Dinnen 5 Decaf Yes

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.

Cups of coffee consumed by each senator
Name Cups Type of Coffee Sugar?
T. Sexton 10 Espresso No
J. Dinnen 5 Decaf Yes

The W3C also provide the following example, which also uses the scope attribute on both td and th elements.

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 headers attribute.

Travel Expense Report
Meals Hotels Transport subtotals
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

[Back to the contents]

Category: Accessibility.

Comments

  2. [complextableinspector.php#comment2]

    That is a remarkably useful tool! It could also help designers finally understand how to use the abbr attribute with header cells, which seems to be completely misunderstood. I think it started with Mark Pilgrim's incorrect advice on using real table headers, which appears to have propagated through most websites offering advice on how to use the abbr attribute with table headers.

    I tested it with a couple of links that advocate creating accessible tables and it held-out well.

    I then tried it on some local tables and thought I may have found a bug. I changed some attributes to uppercase and it failed to find them! It then occurred to me that I was serving the document as application/xhtml+xml - changing the MIME type to text/html solved the problem :) As elements and attributes are case sensitive when served with an XML MIME type, there was no bug to report after all.

    Posted by Crispin on

  3. [complextableinspector.php#comment3]

    Nice one Gez! I would like to add it as a function on the web accessibility toolbar, is that OK?

    Posted by steve faulkner on

  4. [complextableinspector.php#comment4]

    Thank you all for you kind comments :-)

    As elements and attributes are case sensitive when served with an XML MIME type, there was no bug to report after all.

    It's still possible to get the attribute values by requesting them in uppercase should the lowercase request fail, but strictly speaking, they should fail as application/xhtml+xml is case sensitive. The attributes axis and headers require further calls to getElementById to retrieve the associated cells, which will fail if the ids are specified in uppercase.

    I would like to add it as a function on the web accessibility toolbar, is that OK?

    I'd be delighted; thank you :-)

    Posted by Gez on

  5. [complextableinspector.php#comment5]

    This is looking very useful! Great little utility. Just FYI, it doesn't work in Safari. Nothing happens. Maybe Safari doesn't support loading an external .js file the way you do. Well, just thought I'd let you know *smile*

    Posted by Roger Johansson on

  6. [complextableinspector.php#comment6]

    Great work :D
    I can't wait to get the developers at work using this. We write hundreds of data tables for educational resources and this will help my push to mark them up more correctly.
    Thankyou!

    Posted by Andrew Krespanis on

  7. [complextableinspector.php#comment7]

    Roger Johansson wrote:

    Maybe Safari doesn't support loading an external .js file the way you do.

    Thank you for letting me know about the problem in Safari, Roger. I don't have access to a Mac, so can't test anything in Safari. I had a quick look around the Internet for favelets that are supported in Safari, and none of the ones I discovered load an external .js file, so you could well be correct. It could also be that Safari requires an explicit tbody element. I copied the example tables from the W3C, and only made them well-formed. I've amended them to include a tbody element to see if that helps. Safari has reasonably good DOM support (at least for what I'm trying to do), and the only other thing I can think is that maybe Safari stores elements and attributes in its DOM in uppercase? I remember reading about that somewhere, but couldn't find anything doing a quick search.

    Andrew Krespanis wrote:

    We write hundreds of data tables for educational resources and this will help my push to mark them up more correctly.

    Thank you - I hope it turns out to be useful :-)

    Posted by Gez on

  9. [complextableinspector.php#comment9]

    And by the way, the summary attribute on table may not be rendered visually by spec. That includes rendering in simulators.

    Posted by Joe Clark on

  10. [complextableinspector.php#comment10]

    Happy new year, Joe

    Well, no, it doesn't work in Safari

    Thanks for letting me know. I'm not really sure what to do, as it's difficult to determine where it's going wrong without access to Safari.

    and the only table I know of with every imaginable accessibility feature (adding some 29K to page weight), to little provable benefit, is my own

    That's a brilliant example to test it with; thank you.

    And by the way, the summary attribute on table may not be rendered visually by spec. That includes rendering in simulators.

    I wasn't aware of that. I was aware that the purpose of the summary attribute was for user agents that rendered to non-visual media, but I'm not aware of the part of the specification that disallows its rendering in visual user agents. I just followed checkpoint 2.3 of the User Agent Accessibility Guidelines to render conditional content from Guideline 2: Ensure user access to all content.

    Posted by Gez on

  15. [complextableinspector.php#comment15]

    khjart wrote:

    Nice favelet, but I miss the ability to reverse the effect.

    Thank you, khjart; that's a good idea. I've amended the script so that it toggles the information on and off. You'll probably need to clear your cache for the changes to take effect.

    Joe Clark wrote:

    This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.

    That's the part of the specification that I was aware of, but I've obviously interpreted it incorrectly. I read it as the purpose of the summary attribute is for non-visual media, but didn't realise that it implied that it was illegal to render it visually. Presumably, checkpoint 2.3 of UAAG cancels the implication that the summary attribute cannot be rendered, as it explicitly mentions summary, and the rendering of the summary attribute is conditional content depending on the type of user agent.

    Posted by Gez on

  16. [complextableinspector.php#comment16]

    In regards to showing the summary attribute content.
    As i understood the purpose of your "Table Inspector" favelet is to show the underlying content of attributes and elements for the purposes of helping developers to understand and encourage them to use these elements/attributes.

    nate wrote *sad* from "fangs" post)

    It will be great when Fangs visualizes this information (abbr, summary etc). An easy understanding of it's importance will be a nice step forward for the Accessibility cause.

    To imply that the content of the summary attribute should not be rendered visually for this purpose, because it is against "the spec", I consider to be a weak point and should not be considered an issue in this case.

    Posted by steve faulkner on

  17. [complextableinspector.php#comment17]

    Gez: The problem in Safari seems to be related to the loading of external files. I moved all your code into a function and tried calling that from a link, and the script runs (and works) in Safari if I also remove the loading of the external CSS file. So you may be able to get it to work in Safari by creating the CSS rules in the JavaScript, compacting the whole thing, and putting it all in the favelet code instead of referencing any external files.

    Posted by Roger Johansson on

  18. [complextableinspector.php#comment18]

    That's great! Thank you for reporting back with the solution for Safari, Roger.

    Unfortunately, IE 6 can only cope with up to 508 characters in the URL. As IE is still a popular browser, I'll leave the original favelet in place, and call this version the Safari Table Inspector. Can someone confirm it works in Safari?

    Posted by Gez on

  21. [complextableinspector.php#comment21]

    Thank you for confirming it works in Safari, Roger. I've updated the main article to include the favelet for Safari.

    I'm glad you like it, Darrel, and thank you for the link *smile*

    Posted by Gez on

  23. [complextableinspector.php#comment23]

    if you still want to make it a FF extension, give me a shout, as i'm getting quite good at that sort of thing.

    Thank you, that's a kind offer. In this case, I think it's better suited as a favelet. I've never written a Firefox extension before, but I would like to. If I think of something that would lend itself as an extension rather than a bookmarklet, I will give you a shout if that's OK as I'd appreciate the help *smile*

    Posted by Gez on

  24. [complextableinspector.php#comment24]

    Complex Table Inspector Function has been added to the Web Accessibility Toolbar under "Tools > Juicy Studio Tools > Complex Table Inspector".

    Thanks Gez....

    Posted by stevef on

  26. [complextableinspector.php#comment26]

    This is one of the best finds of my week *smile*

    Currently working on an XHTML/CSS site with alot of datatables - that must be presented in the most accessable way possible - due to a wide variety of user skill levels/etc...

    The one issue I have is that headers that have more than just say <th id="myheader">data</th> as in say.... <th id="myheader"><div>data</div></th> don't get referenced by the inspector. Its a minor bug, and one you can overcome during a testing period.

    Posted by Magnetik on

  27. [complextableinspector.php#comment27]

    Thank you for your kind words, and letting me know about the bug, Magnetik. I'm immersed in work at the moment, but I'll fix the bug over the weekend.

    Posted by Gez on

  28. [complextableinspector.php#comment28]

    The following table is similar to the example used in the main post, but with a redundant div in each header cell as follows: 

    <tr>
   <th id="th1"><div>Name</div></th>
   <th id="th2"><div>Cups</div></th>
   <th id="th3" abbr="Type"><div>Type of Coffee</div></th>
   <th id="th4"><div>Sugar?</div></th>
</tr>

    If the headers continue to return undefined, you'll need to clear your cache for the changes to take effect.

    Thank you for reporting the problem, Magnetik.

    Cups of coffee consumed by each senator
    Name
    Cups
    Type of Coffee
    Sugar?
    T. Sexton 10 Espresso No
    J. Dinnen 5 Decaf Yes

    Posted by Gez on

Comments are closed for this entry.