Table caption missing

Pattern Checker

What does this mean?

You have a table which is missing a caption element.

A caption forms the accessible name of a table so is a valuable item of information to screen-reader users, but can also help other users in understanding what information a table holds.

Impact on users

Table captions are a useful way of providing a summary of what information a table contains.

For screen-reader users tables are a complex thing to understand.

A caption takes away any guesswork by telling the user upfront what the table contains.

Where there are multiple tables on a page a screen-reader user may wish to navigate by tables. Without captions they will only hear how many rows and columns each one has and so will need to look at the data in each table to see if it contains the information they require. Having the caption on each one means that they will also hear this and be able to decide which table they wish to interact with, speeding up navigation.

How to fix

Add an appropriate caption to each table. A caption should be succinct. It is a summary of what the table holds, not a detailed breakdown.

The caption should be the first element inside the table.

<table>
    <caption>Payment schedule</caption>
    <tr>
        <th scope="col">Date</th><th scope="col">Amount</th> 
    </tr>
    ...
</table>

Captions can be styled or combined with headings to visually integrate with the page.

For example if there is a heading which immedialy precedes the table whose content could be the caption you can combine the two (but note that for Voiceover the heading is not announced):

<table>
    <caption>
        <h2>Payment schedule</h2>
    </caption>
    <tr>
        <th scope="col">Date</th><th scope="col">Amount</th> 
    </tr>
    ...
</table>

References

Classification

Level: warn
Tagged: best-practice

See all issues