Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

I've just read an article on table 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?

The article goes into beautiful detail on what it means to build an accessible table. In the first few paragraphs of it, it already included something that was new to me – the caption table element.

<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, 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. 😲

My next table will definitely include a caption element.

If you enjoyed this article...

Join 5.7k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles