The for accessibility required `caption` element in HTML tables
- Published at
- Updated at
- Reading time
It can not be that hard to build an accessible table. It's just the
table element including other
td elements, right?
Not quite... The article goes into beautiful detail on what it means to build an accessible table, and in the first few paragraphs of it, it already included something that was new to me – the
caption element in tables.
<table> <caption>Populations of cities</caption> <thead> <tr> <th>City</th> <th>Population</th> </tr> </thead> <tr> <!-- ... --> </tr> </table>
caption is one element you don't see "in the wild" very often. The spec defines it as follows:
[...] the first element child of a table element.
The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.
Defining a title and some additional information for a table makes total sense to me, and more surprising than its rare usage is only that the
caption element even has its own mention in the techniques for WCAG 2.0. 😲
That said, my next
table definitely includes a
Edited: As Eric Eggert pointed out there also other ways to label a table.
- Chrome and Edge provide a highly visible focus outlines
- Automatic hyphenation depends on the defined document language
- Input-wrapping labels are not supported by Dragon
- How to visualize the tab order without using an extension in Firefox
- How to define Open Graph / Twitter image alt text (and why it might not matter...)