Question

我在理解用例的ARIA角色时遇到问题。我已经通过以下方式使用div元素创建了一个表：

<div role="table" class="table">
    <div role="rowgroup" class="tbody">
        <div role="row" class="tr">
            <button class="td" role="cell">Clickable cell</button>
            <a class="td" role="cell" href="#">Link cell</button>
        </div>
    </div>
</div>

我在macOS上启用了VoiceOver（我现在只有此工具可以进行测试），并开始使用键盘进行导航。当我到达文本“可单击单元格”和“链接单元格”时，我会不断听到该单元格的内容，然后是“您当前在单元格内部的文本元素上”。有没有办法让屏幕阅读器告诉用户这是一个链接和一个单元格？

我尝试使用多个角色role="link cell"，但没有任何变化。它一直告诉我同样的事情。

编辑：即使将角色完全从“ div”中删除也无济于事，VoiceOver应用程序仍认为它是一个单元格。添加仅屏幕阅读器的文字“所有单元格都是可点击的/链接”会更合乎逻辑吗？

Answer 1

First rule of ARIA不可使用ARIA。也就是说，使用真实的

。每当您认为需要使用ARIA属性或角色时，始终需要说明这一点。确定是否存在本机HTML方式来执行所需的操作。

Second rule of ARIA是不变的。换句话说，

<button class="td" role="cell">Clickable cell</button>

是否。您只是删除了该按钮的所有“ buttoness”，所以屏幕阅读器将不再知道“ Clickable cell”是一个按钮。相反，它认为这是

（role =“ cell”）。

您应该添加另一个

并给它一个role="cell"，然后将按钮嵌入并链接到其中。

<div role="table" class="table">
  <div role="rowgroup" class="tbody">
    <div role="row" class="tr">
      <div role="cell">
        <button class="td" role="cell">Clickable cell</button>
        <a class="td" role="cell" href="#">Link cell</button>
      </div>
    </div>
  </div>
</div>

那将与

相同

<table>
  <tbody>
    <tr>
      <td>
        <button class="td" role="cell">Clickable cell</button>
        <a class="td" role="cell" href="#">Link cell</button>
      </td>
    </tr>
  </tbody>
</table>

使用“角色”为辅助技术的元素赋予两种含义

1 个答案: