`list` 和 `listitem` ARIA 角色是否适合 <table>？

Question

我想知道表示项目列表的 table 是否应该或也可以用 ARIA 角色装饰，或者 table 的语义就足够了。

这是我正在做的事情的一个基本例子：

<table role="list" aria-labelledby="caption">
    <caption id="caption">Opening hours</caption>
    <tr role="listitem"><td>Sunday</td><td>10am - 8pm</td></tr>
    <tr role="listitem"><td>Monday</td><td>10am - 8pm</td></tr>
    <tr role="listitem"><td>Friday</td><td>10am - 8pm</td></tr>
</table>

对于咏叹调和html5语义的轻微重叠，我还是有点困惑。

更新示例

我正在考虑这些问题，现在

<table role="presentation">
    <caption id="oh-caption">Opening hours</caption>
    <tbody role="list" aria-describedby="oh-caption">
        <tr role="listitem">
            <td>...</td>
        <tr role="listitem">
            <td>...</td>
    </tbody>
</table>

Answer 1

您提供的数据实际上是数据 table，您应该使用适当的标记对其进行标记，以便正确关联行 headers。你可以告诉它一个数据 table 的原因是第二列中的数据与第一列中的数据相关联并且每列包含相同类型的数据（如果它是一个复杂的数据 table 这些简单的规则需要扩展）。

<table>
    <caption>Opening hours</caption>
    <tr><th scope="row">Sunday</th><td>10am - 8pm</td></tr>
    <tr><th scope="row">Monday</th><td>10am - 8pm</td></tr>
    <tr><th scope="row">Friday</th><td>10am - 8pm</td></tr>
</table>

Answer 2

让我们来看看你的例子：

<table role="presentation">
  <caption id="oh-caption">Opening hours</caption>
  <tbody role="list" aria-describedby="oh-caption">
    <tr role="listitem">
        <td>...</td>
    <tr role="listitem">
        <td>...</td>
</tbody>

首先 [role="presentation"] 否定隐含的 "table" 语义。这还包括其 tbody/tr/... 后代的隐式本机语义，因为它们也将被删除。所以基本上这就是用户代理现在 "sees":

<span>
  <span id="oh-caption">Opening hours</span>
  <span role="list" aria-describedby="oh-caption">
    <span role="listitem">
        <span>...</span>
    <span role="listitem">
        <span>...</span>
  </span>
</span>

您不是在增强 table 的语义，而是在删除它们。在 wai-aria specs.

中阅读有关 [role="presentation"] 的更多信息

接下来[role="list"]和[role="listitem"]，生成一组列表项：

<span>
  <span id="oh-caption">Opening hours</span>
  <ul aria-describedby="oh-caption">
    <li>
        <span>...</span>
    <li>
        <span>...</span>
  </ul>
</span>

剩下 aria-describedby="oh-caption"，它引用 #oh-caption 元素作为标签。

屏幕阅读器现在会宣布一个包含 2 个项目的列表，标记为 "Opening hours"。但是你失去了行标题 ("Monday") 和相关开放时间之间的联系，因为你简化了内容结构。此外，用户不能 "read" 只有开放时间而没有连接日期，他可以在语义 table 中通过 "jumping" 从 table 单元格到 table 单元格垂直. （可能他已经知道您每周 7 天营业，并且只想知道您是否早于晚上 8 点关门一天。）

因此，我个人认为这种转换没有优势，建议使用@unobf 提供的语义标记。还要记住未来的变化。如果您不得不添加另一列，因为他们在中午关闭并且想在单独的列中显示上午和下午的营业时间，您会怎么做？

`list` 和 `listitem` ARIA 角色是否适合 <table>？

Are `list` and `listitem` ARIA roles appropriate for a <table>?

html

accessibility

wai-aria