Creating Accessible Data Tables

It is important that you code your HTML data tables with assistive technologies in mind, so they can be read correctly by people with disabilities such as visual impairments. In this article, Frank Palinkas shows you how.

( Read the article )

Originally posted by fmpalinkas:

If [caption is] placed at the bottom of the table, its opening tag comes directly after the last closing </tr> tag.

Really? That means it would come before a </tbody> tag. Is that correct?

Originally posted by MagicM:

Originally posted by fmpalinkas:

If [caption is] placed at the bottom of the table, its opening tag comes directly after the last closing </tr> tag.

Really? That means it would come before a </tbody> tag. Is that correct?

Thanks for spotting that MagicM. My apologies, I should have caught that and been more specific.

1. When the tbody element _is used_, and the caption element is placed at the bottom of the table, the opening caption element tag comes directly _after_ the closing tbody tag.

2. When the tbody element _is not used_ and the caption element is placed at the bottom of the table, the opening caption element tag comes directly after the last closing tr tag.

I'll ask Mr. Mills to have this changed.

Frank

Post edited Friday, 18. January 2008, 18:32:47

According to HTML 4.01 Specification,

"The CAPTION element is _only_ permitted immediately after the TABLE start tag."
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.2

So you may not place CAPTION element after </tr> or </tbody> tag. You can use CSS caption-side property to adjust position of CAPTION text. If you use CAPTION element at the bottom of the table, screen reader user can recognize CAPTION text only after whole table cell is spoken.

Originally posted by hyeonseok:

"The CAPTION element is _only_ permitted immediately after the TABLE start tag."

Indeed, the correction will be made. I confused the ability to use CSS to position the caption element with its markup positioning as prescribed in the spec. My apologies.

Frank

Post edited Sunday, 20. January 2008, 09:45:35

This is the methodology that is used with my VUI application in the article editors that authors use. Authors are instructed to follow these steps.

1) Build the table using
1.a) A caption,
1.b) Column and row headers,
1.c) Table data.
2) Follow the table with
2.a) An appropriate level heading containing the table caption.
2.b) An ordered or unordered list with each list item explaining a row of data from the table.
3) Select the "spoken but not seen" class for the level heading and list so that they are spoken and not seen.

I have tables styled so that they are not spoken.

This is the result.
1) Visual Rendering.
1.a) The user sees the table.
1.b) The user does not see the level heading which follows the table.
1.b) The user does not see the list which follows the table
2) Audible Rendering.
2.a) The user never hears the table data being spoken.
2.b) The user listens to the voice speak the level heading that follows the table.
2.c) The user listens to the voice speak the list that follows the heading.

Reasons.
1) I don't like the way accessibility software renders tables audibly.
2) I don't like the way the opera voice speaks tables.
3) Level headers are easy to style for audible rendering.
4) Lists are easy to style for audible rendering.

Post edited Sunday, 27. July 2008, 14:03:56