在 HTML5 的表格标题中使用按钮在语义上是否正确？

Question

我有一个产品数据矩阵。

我的目标是：

• 使用 HTML5 以表格格式显示矩阵
• 在描述它的数据上方显示一个左对齐的“标题”
• 显示右对齐的“添加”按钮，与标题垂直对齐，便于向表格中添加行
• 显示标题行来描述每列数据
• 如果可能，以语义上“正确”的方式执行上述所有操作

所以，最终的结果应该是这样的：

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

我当前的代码：

<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>

根据 HTML5 规范，标题元素可以包含任何流内容，包括按钮。

来自规范：

内容模型：流式内容，但没有后代表格元素

但是，相同的规范将标题元素定义为：

标题元素表示作为其父级的表格的标题，如果它有一个父级并且是一个表格元素。

根据该描述，按钮似乎不属于标题内，因为它对表格的标题没有任何帮助，即使它在技术上是允许的。

我的问题是： 在表格标题中包含一个按钮在语义上是否“正确”？如果它不“正确”，是否可以接受？有没有更语义上正确的方法来达到预期的结果？

我发现很多关于表格语义的问题/答案，但大多数都没有处理表格上的按钮。

This question/answer 询问表格中的按钮，但它特定于“单元格”内的按钮，而不是标题。

HTML5 规范：

• 标题元素：https://www.w3.org/TR/html5/tabular-data.html#the-caption-element
• 流内容：https://www.w3.org/TR/html5/dom.html#flow-content-1

编辑： This question/answer 似乎与我的问题具有相同的性质，但他问的是把他的按钮放在 <th> 内，而不是表格标题。

我考虑过的一个解决方案是：根本不使用标题。只需将<h1> 或类似的标题标签放在 表格标签之前。唯一的问题是标题将不再与表格相关......还是会？实际上，这可能是答案。如果我将<h1> 和<table> 包装在<section> 或<div> 中，那可能会起作用吗？

我正在寻找“最正确”的方法。

Answer 1

HTML5 定义（在 4.9.2 The caption element 和 4.9.12 Processing model 中）caption 元素

• “代表table的标题”，而
• “可以为表格引入上下文，使其更易于理解”，并且
• “给表格一个标题或图例”。

根据我对标题（或标题 或 标题）。

如果我的假设是正确的，那么在caption 中使用这个button 将是错误的。内容模型允许这样做并不意味着它一定是有效的。

如果某些东西的有效性不仅基于句法要求（如“内容模型”和“可以使用此元素的上下文”），还基于semantic requirements。您不能以使语义错误不可能出现的方式来表示内容模型。尽管此特定按钮可能不适用于 caption，但在其他情况下可能适合使用 button。

如果不“正确”，是否可以接受？

这取决于你“可以接受”什么。例如，使用默认配置的普通 Web 浏览器的用户很可能不会受到此错误的任何影响。但可以想象（但可能不太可能）具有“不常见”设置（例如，使用特定辅助工具）的用户可能会以某种方式受到影响。

如果在caption 中添加button 会使您的实现更容易，我不会对此过于担心并保持这种状态，除非您的测试（或您获得的反馈）表明它可能存在问题。

另类

我根本不会在 table 中包含“添加产品”按钮，而是在 table 元素之前或之后。

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

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

这取决于上下文是否适合在分段内容元素中包含table 和button（例如section，甚至可能是article）。

Answer 2

这个问题实际上是可访问性问题之一，在这种情况下，它在语义上不正确或不可接受。字幕用于屏幕阅读器以提供有关表格的信息，使用它来添加按钮会使该表格无法访问。表格已经难以访问，但添加按钮会加剧问题。如果你无法避免按钮：

1. 确保按钮已标记。它应该说明它的作用或它的去向。如果这在视觉上是不可能的，它需要一个带有该信息的 aria-label。
2. 该按钮不能简单地成为另一列的一部分。即使在视觉上它看起来是另一个单元格的一部分，但在编程上它也需要在自己的单元格中。
3. 该列需要有一个列标题。如果没有视觉意义，这可以通过仅屏幕阅读器的文本来完成。

在原始示例中，标题和按钮实际上不会成为表格的一部分，即使您在视觉上以这种方式设置了它们的样式。相反，“产品目录”将是具有适当标题级别的标题，并且该按钮将在视觉上位于右侧并紧跟 HTML 中的标题。

Answer 3

我知道这有点过时了，但是在 tablethead（或 tfoot）中放置一个作用于桌子的按钮在语义上是合法的/strong> 元素。我同意 caption 不是正确的位置，但说它不应该出现在 table 的任何地方也是不正确的。