Question

我有一个产品数据矩阵。

我的目标是：

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

因此，最终结果看起来与此相似：

--------------------------------------------------------
|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规范，标题元素可以包含任何流内容，其中包括按钮。

来自规范：

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

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

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

根据该描述，似乎按钮不属于标题内部，因为它不会为表格的标题提供任何内容，即使它在技术上是允许的。

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

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

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

HTML5规范：

标题元素：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

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

我考虑过的一个解决方案是：根本不使用标题。只需在表标记之前添加<h1>或类似的标题标记即可。唯一的问题是标题将不再是相对于表....或者它会吗？实际上，这可能就是答案。如果我将<h1>和<table>包裹在<section>或<div>中，那可能有用吗？

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

Answer 1

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

＆＃34;代表table＆＃34;和
＆＃34;可以为表格引入上下文，使其更容易理解＆＃34;和
＆＃34;为表格提供标题或图例＆＃34;。

我会假设＆＃34;添加产品＆＃34;根据我对标题（或标题或标题的理解，按钮不应该成为表格标题的一部分）。

如果我的假设成立，那么在button中使用此caption将会出错。内容模型允许这一事实并不意味着它必然有效。

如果某些内容的有效性不仅仅基于语法要求（例如＆＃34;内容模型＆＃34;和＆＃34;可以使用此元素的上下文＆＃34;），还可以基于semantic requirements 。您无法以使语义错误无法实现的方式表示内容模型。虽然此特定按钮可能不适合caption，但可能还有其他情况button可能合适。

如果不是＆＃34;正确＆＃34;，是否可以接受？

这取决于什么是＆＃34;可接受的＆＃34;给你。例如，默认配置中常见Web浏览器的用户很可能不会以任何方式受到此错误的影响。但是可以想象（但也许不太可能）用户使用＆＃34;不常见＆＃34;设置（例如，使用特定的辅助功能工具）可能会受到某种影响。

如果button中的caption使您的实施变得更容易，我不会过于担心这种情况并保持这样，除非您的测试（或您得到的反馈）表明它可能有问题。

替代

我不会包含＆＃34;添加产品＆＃34; table中的按钮，但table元素之前或之后。

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

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

如果在切片内容元素中包含table和button（例如，section，或者甚至可能article），则取决于上下文。< / p>

Answer 2

我知道这有点过时，但是在表<的 thead （或 tfoot ）中放置一个按钮作用于表格在语义上是合法的/ strong>元素。我同意标题不是正确的地方，但是说它不应该在表格中的任何地方也不正确。

Answer 3

此问题实际上是可访问性之一，在这种情况下，它在语义上不正确或不可接受。标题用于屏幕阅读器以提供表格周围的信息，并使用它添加按钮会使该表格无法访问。表格已经很难访问，但是添加按钮会使问题更加严重。如果您无法避免使用按钮：

确保按钮已贴标签。它应该说出它的作用或去向。如果这在视觉上是不可能的，则需要带有该信息的aria标签。
该按钮不能简单地成为另一列的一部分。即使从视觉上看，它似乎是另一个单元的一部分，但以编程方式，它也必须是自己的。
该列需要有一个列标题。如果它在视觉上没有意义，则可以使用仅屏幕阅读器的文本来实现。

在原始示例中，即使在外观上以这种方式设置样式，标题和按钮实际上也不是表格的一部分。取而代之的是，“产品目录”将是具有适当标题级别的标题，并且按钮将在视觉上位于右侧，并立即跟随HTML中的标题。

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

3 个答案:

替代