Question

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

这是我正在研究的一个基本例子：

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

我仍然对aria和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>
    <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”]否定隐式“表”语义。这还包括其tbody / tr / ...后代的隐式本机语义，因为它们也将被删除。所以基本上这就是用户代理现在“看到”的内容：

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

您没有增强表的语义，而是删除它们。在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个项目的列表，标记为“开放时间”。但是你丢失了行（“星期一”）的标题与相关的开放时间之间的联系，因为你简化了内容结构。此外，用户不能仅在没有连接日的情况下“读取”开放时间，他可以通过从表格单元格垂直地“跳跃”到表格单元格来在语义表中。（可能他已经知道你每周7天都开放，并且只想知道你是否早于晚上8点关闭。）

因此，我个人看不到这种转变的优势，并建议使用@unobf提供的语义标记。记住未来的变化。如果你不得不添加另一列，你会怎么做，因为它们在中午关闭，并希望在不同的列中显示上午和下午的开放时间？

`list`和`listitem` ARIA角色是否适用于？<table> </table>

2 个答案: