I wrote a table inspector bookmarklet to reveal the hidden accessibility features of data tables, such as
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
- Writing Mozilla/Firefox Extensions
- Revealing Accessibility Features
- The Extension
- Some Sample Tables
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.
summaryattribute (rendered above the table)
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
Category: Mozilla/Firefox Extensions.