Caption Placement

Code

These days, it rarely happens that I stumble upon a CSS property I knew nothing about. Well, it happened, and this one is especially interesting because it is not a new addition. No, this one has been with us for quite some time.

I’ve learned about caption-side, which lets you control the placement of a table’s caption. You may know, but need reminding, tables can have captions as well, similar to <figcaption> in figures. Contrary to figures, when it comes to tables you’ll provide a caption via the <caption> element.[1]

To end up with valid markup, the caption needs to be the first element in a table. This is not an unusual requirement, the same is true for summary in details, and legend in fieldset.

So HTML dictates where a caption must be in source order. This is where CSS comes in, thanks to caption-side we can control the visual placement. The property can take top and bottom as a value, with the former being the default. Sure enough, nowadays logical values have been added, so you can use them instead. Note though, at the time of writing I could not get logical values to work. Directional values do work, and the overall property may be declared on the table or the caption itself:

/* Directional values: top, bottom */
/* Logical values: block-start, block-end, inline-start, inline-end */
table {
	caption-side: bottom;
}

Whether a caption underneath the table is visually more appealing or not is subject to debate, but I was wondering how this affects a table’s accessibility. We have Web Content Accessibility Guidelines (WCAG) Success Criterions for Meaningful Sequence and Focus Order, but neither seems to be an exact fit.

I can imagine a scenario where people would notice a jump in reading order when they use a screen reader. Consider a table with lots of rows and a caption at the bottom: When entering the table, the screen reader cursor jumps to the end of the table, potentially adjusting the viewport while doing so, only to jump back up to the table header afterwards.

If you know more about this, let me know in the comments.

Showcase

Visit CodePen to see this example in action.

Footnotes

  1. Come to think of it, figures should totally be using <caption> too. But that ship has sailed. ↩︎