Is it semantically correct to use a button in a table caption in HTML5?

Question

I have a matrix of product data.

My goal is to:

• display the matrix using HTML5 in a tabular format
• display a left-aligned "title" above the data that describes it
• display a right-aligned "add" button, vertically aligned with the title, which facilitates the addition of rows to the table
• display a header row to describe each column of data
• do all of the above in a semantically "correct" way, if possible

So, the end result would look similar to this:

--------------------------------------------------------
|Product Catalog                         [+Add Product]|
--------------------------------------------------------
| Title | Cost | Weight | and | so | on | ...          |
--------------------------------------------------------
| Thing1| $5.99| 3 oz   | ... | ...| ...| ...          |
| Thing2| $2.99| 2 oz   | ... | ...| ...| ...          |
--------------------------------------------------------

My current code:

<table>
    <caption>Product Catalog <button style="float: right; display: block;">+Add Product</button></caption>
    <thead>
        <tr>
            <th>Title</th>
            <th>Cost</th>
            <th>Weight</th>
            <th>and</th>
            <th>so</th>
            <th>on</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Thing1</td>
            <td>$5.99</td>
            <td>3 oz</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>Thing2</td>
            <td>$2.99</td>
            <td>2 oz</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

According to the HTML5 spec, the caption element can contain any flow content, which includes buttons.

From the spec:

Content Model: Flow content, but with no descendant table elements

However, the same spec defines the caption element as:

The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.

Based on that description, it seems that a button does not belong inside of a caption, because it lends nothing to the title of the table, even though it is technically allowed.

My questions are: Is it semantically "correct" to include a button inside of a table caption? If it is not "correct", is it acceptable? Is there a more-semantically-correct way of achieving the desired result?

I found plenty of questions/answers dealing with table semantics, but most did not deal with buttons on the table.

This question/answer asks about buttons in a table, but it is specific to buttons inside of a "cell", not the caption.

HTML5 Specs:

• caption element: https://www.w3.org/TR/html5/tabular-data.html#the-caption-element
• flow-content: https://www.w3.org/TR/html5/dom.html#flow-content-1

EDIT: This question/answer seems to be of the same nature as my question, but he is asking about putting his button(s) inside of a <th>, not the table caption.

One solution I've considered is: don't use a caption at all. Just put a <h1> or similar header tag before the table tag. The only problem with this is that the title will no longer be relative to the table.... or will it? Actually, that might be the answer. If I wrap the <h1> and the <table> in a <section> or perhaps a <div> then that might work?

I'm looking for the "most-correct" way.

Answer 1

HTML5 defines (in 4.9.2 The caption element and in 4.9.12 Processing model) that the caption element

• "represents the title of the table", and
• "can introduce context for a table, making it significantly easier to understand", and
• "gives the table a heading, or legend".

I would assume that an "Add Product" button should not be part of a table’s title, based on my understanding of a title (or heading or caption).

If my assumption is true, it would be an error to use this button in caption. The fact that the content model allows this does not mean that it’s necessarily valid.

If something’s valid is not only based on syntactic requirements (like "Content model" and "Contexts in which this element can be used"), but also on semantic requirements. You can’t denote the content model in a way that would make semantic errors impossible. And while this specific button might be inappropriate for the caption, there might be other cases where a button could be appropriate.

If it is not "correct", is it acceptable?

That depends on what’s "acceptable" to you. For example, users of common Web browsers in default configurations will most likely not be affected by this error in any way. But it’s conceivable (but maybe not likely) that users with "uncommon" setups (e.g., with specific accessibility tools) might be affected by this somehow.

If having the button in the caption makes your implementation easier, I wouldn’t worry too much about this and keep it like that, unless your tests (or feedback you get) indicate that it could be problematic.

Alternative

I wouldn’t include the "Add Product" button in the table at all, but either before or after the table element.

<form>
  <button>…</button>
</form>

<table>
  <caption>…</caption>
</table>

It depends on the context if including the table and the button in a sectioning content element (e.g., section, or maybe even article) is appropriate.

Answer 2

This question is actually one of accessibility in which case it isn't semantically correct or acceptable. Captions are used for screen readers to give information around a table and using it to add a button would make this table inaccessible. Tables are already difficult to make accessible but adding buttons exacerbates the problem. If you can't avoid buttons:

1. Ensure the button is labelled. It should say what it does or where it goes. If that is not visually possible, it needs an aria-label with that information.
2. The button cannot simply be a part of another column. Even if visually it looks to be a part of another cell, programmatically it needs to be in it's own.
3. That column needs to have a column header. This can be accomplished with screen reader only text if it doesn't make visual sense.

In the original example, the title and button would not actually be a part of the table, even if visually you styled them that way. Instead "Product Catalog" would be a heading with an appropriate heading level and the button would just be visually to the right and immediately follow the heading in the HTML.