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

【问题标题】：Giving two meanings to an element for assistive technologies using "role"使用“角色”为辅助技术元素赋予两种含义
【发布时间】：2019-08-15 20:45:32
【问题描述】：

我在理解我的用例的 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 应用程序仍然认为它是一个单元格。添加一个仅显示“所有单元格都是可点击/链接”的屏幕阅读器文本是否更合乎逻辑？

【问题讨论】：

从您的代码中，我认为没有必要使用 ARIA 角色而不是 HTML。你清理你的代码了吗？您应该始终更喜欢语义 HTML 而不是 DIV 汤。
关于这个，你有没有尝试把真正的路线放在href中？也许 VoiceOver 不认为 # 个链接是真正的链接？
@Andy 我会测试一下，我有诸如“#some-link1”之类的链接，它们也不被接受为链接，但我会用真实链接检查它是否有区别.关于使用 DIVS，我厌倦了尝试使用 CSS 将按钮或锚点高度设置为单元格的高度（如果一个单元格有两行内容，则高度在任何浏览器中都不起作用）；所以，我最终使用了 DIVS 并将表格单元格设置为链接。从功能上讲，它们按照我的意愿工作。我唯一关心的是让它们易于访问。
@Andy 我知道我在这里有点跑题了，但这是我正在谈论的问题 (codepen.io/anon/pen/moYOzv)。第二列有较大的文字；因此，第一个 col 中的单元格永远不会拉伸到单元格的大小。我希望单元格是“可点击的”，我尝试的每一种方法都失败了。所以，我最终使用 div 和其他标签来定义行和列，使用 CSS 和 ARIA 角色。

标签： html accessibility wai-aria

【解决方案1】：

First rule of ARIA 不能使用 ARIA。也就是说，使用真正的

。每当您认为需要使用 ARIA 属性或角色时，始终需要说明这一点。确定是否有原生 HTML 方式来做你想做的事。

Second rule of ARIA 不会改变原生语义。换句话说，

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

是不。您刚刚删除了按钮的所有“无按钮”，因此屏幕阅读器将不再知道“可点击单元格”是一个按钮。相反，它认为它是一个

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

【讨论】：

请查看我上面的评论，了解为什么这种方法对我不起作用。由于某种原因，我无法调整单元格内容的大小以适应单元格。所以，我最终使用 aria 角色和 css 来模仿一个可以与其他标签一起使用的表格。
@gasim slugolicios 还建议了第一个块，它仍在使用您的 div，但将角色按钮和单元格分开。你试过吗？
我已经用普通的表尝试过这个，但我会用 div 试试。谢谢！