The for accessibility required `caption` element in HTML tables
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my learnings regarding web development.
I'm sitting at the airport in Bangkok right now (yeah vacation!!!) and am reading an article by Adrian Roselli on tables regarding accessibility.
It can not be that hard to build an accessible table. It's just the table
element including other th
, tr
and 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 caption
element.
Edited: As Eric Eggert pointed out there also other ways to label a table.
Related Topics
Related Articles
- Email inputs can accept multiple email addresses
- A picture element to load correctly resized webp images in HTML
- How to refresh a page in an interval (without JavaScript)
- How to make textareas grow automatically with a little bit of CSS and one line of JavaScript
- Radio buttons, checkbox and the question when to use what