Search code examples
htmlaccessibilitywcag2.0section508

Do I need both a heading tag and a caption for a table?


I do a lot of documents with tables on our website.
I see conflicting arguments about whether I need a heading (<h2>...</h2>) before a table, a caption within a table, or both.

It seems to me that caption is semantic and therefore should suffice.

What is the justification for tables needing a header if there is a caption?

Having both is duplicative and would drive me crazy if I was a screen reader user.

And since caption is semantic, I shouldn't need aria.


Solution

  • Short Answer

    You don't need a heading before a table, however if the heading benefits the page structure then it would be preferable to have duplication, due to how most screen reader users interact with web pages.

    If in doubt add a heading as duplication is preferable to missing key document structure elements.

    Longer Answer

    You don't need a heading before a table but it may be appropriate depending on the document you are creating.

    There is no direct guidance on this but if you break down what each element is used (semantically) for and how they are used by different people (primarily screen reader users) you can see why most people would argue for the use of both.

    Headings

    Obviously headings are used as primary landmarks throughout a document and to show relationships between sections.

    They are also the primary way most screen reader users navigate a page when they first land on it to get a feel for what information is present and where.

    So having headings above each table could be appropriate.

    For example if your page contains several tables with key information within them then headings above each table would certainly improve navigation and discoverability for screen reader users who have never visited that page before.

    However if the tables are included as part of a larger body of text and are supplementary / supporting information for the body of text (which may continue after the table) then adding a heading would cause unnecessary duplication and also ruin document flow. Obviously in this scenario it is assumed that this body of text has the appropriate heading so the document is easy to navigate.

    Captions

    99% of the time your table should have a caption (I am sure there are scenarios where a caption is unnecessary but I can't think of one right now).

    The information in a caption is useful for framing the general topic of the table information.

    For example, screen reader users who are familiar with your site (and know it has a lot of tables) my choose to navigate by tables.

    They could land at a table out of context that may not make sense without a caption.

    So what should I do?

    Add a caption unless you can think of a really good reason not to.

    If in doubt, add a heading (at a suitable level in the document structure).

    However if you feel that the table is suitably described by the caption and is within a body of text that is supported by the table then a heading will probably not be needed.

    Final thought - get someone unfamiliar with the site to test it with a screen reader, this is the best way to see if the page is easy to navigate, as developers we make assumptions and even with all the experience in the world you can get it wrong, seeing real people use a product is often very humbling!