Summary

I wrote a table inspector bookmarklet to reveal the hidden accessibility features of data tables, such as summary, headers, axis, scope, and abbr.

I decided to learn how to write Mozilla/Firefox extensions, and have reproduced the table inspector bookmarklet as a Mozilla/Firefox extension.

Author: Gez Lemon

Contents

Writing Mozilla/Firefox Extensions

Note: The axis, summary, and scope attributes on a regular table cell are no longer valid in HTML5. This extension still evaluates them, but they are no longer used in this example.

One of the greatest features about Firefox is the fact that anyone can write an extension to improve its functionality. When I created the table inspector, I flippantly mentioned that I considered writing it as a Firefox extension, but decided to write it as a favelet so that it could be used with any browser that supported ECMAScript. I stand by that decision, but the fact that I'd never written a Firefox extension before, or had the faintest idea of how to create one, was also a contributing factor in arriving at that decision. A very good friend of mine wrote to me today, informing me about a Firefox extension they had created. It's a fantastic idea, and I'll write more about it when it's ready for release. Intrigued about the difficulty in creating a Firefox extension, I decided to turn the table inspector into a Firefox extension. Having no idea where to start, a quick search on Google returned a gem of a tutorial by Eric Hamiter; Creating Firefox Extensions. It's a remarkably easy tutorial to follow, and within no time at all, I had created my first Firefox extension.

Revealing Accessibility Features

The extension reveals the following information from complex data tables.

The Extension

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

Category: Mozilla/Firefox Extensions.

Comments

  1. [firefox-table-inspector.php#comment4]

    Hi Philip,

    When are you going to submit it for inclusion in Mozilla's list of FF extensions?

    Do you have a URL? I didn't realise they collected a list of them.

    Posted by Gez on

  2. [firefox-table-inspector.php#comment6]

    Thank you, Neerav. I'll register them tomorrow, as I've just got in and am a bit tired now.

    Thanks again for the URL *smile*

    Posted by Gez on

  3. [firefox-table-inspector.php#comment9]

    is this working with firefox 1.5?

    Yes, I've updated the extension. Are you having a problem with the extension in Firefox 1.5?

    Posted by Gez on

Comments are closed for this entry.