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

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 (我现在只有这个工具用于测试)，并开始使用键盘导航。当我看到文本"Clickable cell“和"Link cell”时，我总是听到单元格的内容，后面跟着“您当前在一个文本元素上，在一个单元格内”。有没有办法让屏幕阅读器告诉用户它是一个链接和一个单元格？

我尝试使用多个角色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=“细胞”)。

你应该添加另一个，并给它一个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>