Eight years involved with the nuclear industry have taught me that when nothing can possible go wrong and every avenue has been covered, then is the time to buy a house on the next continent. Terry Pratchett on alt.fan.pratchett

Table Captions and Internet Explorer

Filed under: Accessibility

If table captions are block level elements, why doesn’t Internet Explorer 7 honour off-left positioning?

“The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal blocks inside the anonymous box.”
W3C CSS 2.1 Specification

Example page

The relevant CSS on this page is:

caption {
	position:absolute;
	top:-1600px;
	left:-1600px;
}

This is honoured by Firefox 2 and Opera 9 but not by IE 7, so I need an IE specific fix that doesn’t use display:none; as it’s essential that the caption is available to screen reader users.

Thus far, I haven’t come up with a suitable solution.

Update: 15th May 2007

Thanks to Nick Dunn, we have a workaround! Namely:

table {
	margin-top:-1em;
}
caption {
	text-indent: -1600px;
}

The negative margin-top isn’t essential but does remove the ‘gap’ left when the caption is indented off to the left. I prefer setting this in ems myself so that resizing the text will still keep everything in proportion.

And, according to the Screenreader Visibility Test Results, the caption should still be available to all of the common screenreaders (although JAWS 7 needs checking).

Published: May 8th 2007

Top

4 Comments

  1. Comment by Nick Dunn on May 15, 2007 at 11:18 am

    I could try setting the line-height and font-size to negligible sizes, and indenting it off the page.
    caption {
    line-height: 0;
    font-size: 0;
    text-indent: -1600px;
    }

  2. Comment by Black Widow on May 15, 2007 at 11:44 am

    I also thought of using the same colour for background and text. But I’m wary of anything that might smack of spamming from the perspective of a search bot.

  3. Comment by Nick Dunn on May 15, 2007 at 12:16 pm

    Would visibility: hidden be appropriate?

    You could then shift the table up by about 10-15px with a negative margin-top.

    Changing the colour sounds the most spammy to me, but text-indent feels like legitimate practice.

  4. Comment by Black Widow on May 15, 2007 at 12:39 pm

    Nope. visibility:hiddencaption usage.

    However, the negative tex indexing works a treat with a negative margin-top of around 1em on the table. Now why couldn’t I think of that?

    Cheers! :-)

Top

Sorry, the comment form is now closed.