Updated at 18:15 (Oslo time), 15th of June 2009.

Adding table and/or figure summaries by adding role="summary" to the captioning element?

We want to provide table (and perhaps figure) summaries. In order to meet the WCAG 2.0 requirements, the feature must be a programmatically-determined mechanism.

Table of contents

Options: attribute or element, new, old or both

We allready have the summary attribute, which has as drawback that it is an attribute, and attributes are, by definition, not as accessible whether for those in need of AT software nor for the average Web author. The word «summary» might not be the best word for this feature - it may not give authors the most helpful associations. We could add the feature as a new element, such as <summary>. However, this is terribly difficult as many User Agents have problems accepting new elements inside the table element. There is the option of moving the summary element to the figure element, but let's forget about that for now.

Challenges with the <summary> (aka new element) proposal.

Webkit do not accept new elements inside the table element, at all. Firefox do accept new elements inside table, but only starting with the not yet released version 3.5. Internet Explorer 8 does not seem to accept new elements in a compatible way (unless you use one of its quirks modes). I also tried placing the summary element inside the caption element - it fails in Webkit. I also tried a caption element inside a summary element - fails in Opera!

Things that work: old elements and new attributes

1. All UAs (IE6, IE7, IE78, Firefox 2, Firefox 3, Safari/Webkit, Opera) permit the presence of two caption elements, without further ado (that is: without javascript tricks).
2. HTML 5 is going to incorporate support for ARIA, including the role attribute. (That much we assume, at least.) And accessibility software is eager at supporting the ARIA features.

Combined: <caption role="summary">

OK! There is no summary value for the role attribute. Fine! I am not 100% sure about the best role value, but it sounds as if it could be contentinfo.

Hence, this:

<caption role="contentinfo">

Currently, it seems like it is ARIA that has the accessibility focus. So may be linking this feature to role="" could make it become better specified than it currently is in HTML 4?

Please note that this option allows authors to avoid inserting a caption - if they wish they can choose to only insert the summary. This way, the summary is not dependent on the table having a caption - though it is of course dependent of the element with the name "caption".

Possible challenges: User agents and semantics

It might be that not all AT and UAs render the second caption element to the users. Webkit and Firefox automatically hide the second caption. This is in itself is a positive thing. However, the negative thing is that it is also currently not straight forward to make it visible in those two browsers.)

Internet Explorer version 6 has bad CSS selector compatibility - for instance caption+caption{} will not target the second caption in IE6. However this seems like a rather minor point.

Some would perhaps say that this do not disambiguate caption from summary enough. But one coud also claim that this makes authors disambiguate them better: Juxtaposition of close concepts can be useuful in order to make people think about wherein the difference lays. Besides, the option allows authors to display both the summary and the caption, if they think this is useful.And isn't it the role of role="" to disambiguate – well – roles so that elements can play more than one role? However, it might be that these arguments are not strong enough - would be cool to know what WAI people think.

Other elements that embodies a captioning element (such as <figure>)

Instead of having a summary element that could also be placed inside the figure element, one could allow the captioning element of figure to be resused for summaries with the help of role="contentinfo".

Demos of <caption role="contentinfo">

Note about how the summary feature is used in this example:

1. The summary is used to inform the reader how the table is sorted (the rows perspective) and which columns there are and what column that carries the sorting (column perspective).
2. The demonstration seeks to show that one can hide the summary this way – whether it should be hidden depends one.

Hidden summary

Here I show that the summary may successfully be hidden so that only screen readers and audio user agents "sees" it... This is really simple. In fact, Firefox and Webkit autohides the summary, as long as there is also a caption.

Visible summary – simple

Here I show that the summary may successfully be shown in graphical useragents. Unfortunatetely, this first and simple demo does neither work in Firefox (2, 3 or 3.5beta) nor in Webkit (works fine in Opera and all IE versions).

Visible summary, Firefox/Webkit compatibility via span inside the caption

The caption is given display:block;max-width:1px;overflow:visible; while the actual caption text is wrapped in a span with display:block; with an exact width (measured to fit the table width) that flows out of the parent caption element. While the summary has caption-side:bottom; (which for IE only works in version 8).

Visible summary, Firefox/Webkit compatibility via fixed table width and a positioned table wrapper

Firefox seems simply to refuse to position anything within a container that has display:table. Hence the table has here been wrapped in a positioned container element with display:block (using <figure> as wrapper may be appropriate).