屏幕阅读器：如何在 <table> 中创建多个单选按钮组？答案

【问题标题】：Screen readers: How to create multiple radiobutton groups in a <table>?屏幕阅读器：如何在 <table> 中创建多个单选按钮组？
【发布时间】：2017-09-18 13:23:27
【问题描述】：

我正在开发一个现有的 web 应用程序并使其符合 WCAG AA 标准。

应用程序的一部分涉及显示“选择矩阵”：以表格形式呈现的一系列问题。这是一个简化的示例。

<table>
  <thead>
    <tr>
      <th>Question</th>
      <th>True</th>
      <th>False</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>google.com is hosted on the internet</td>
      <td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: True"></td>
      <td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: False"></td>
    </tr>
    <tr>
      <td>January is the third day of the week</td>
      <td><input name="q2" type="radio" aria-label="January is the third day of the week: True"></td>
      <td><input name="q2" type="radio" aria-label="January is the third day of the week: False"></td>
    </tr>
  </tbody>
</table>

现在 -- 如果我们对这个 sn-p 运行 aXe Chrome Extension，它会抱怨：

具有相同名称属性值的无线电输入必须是组的一部分

看来我们需要将单选按钮组合在一起以满足 WCAG 1.3.1 的要求。这是有道理的，而且看起来很值得。

aXe 提出了两种方法：

1) 名称为“q1”的所有元素不使用 aria-labelledby 引用相同的元素 2) 元素没有包含字段集或 ARIA 组

但这些解决方案似乎都不能解决我的问题。

第一个解决方案似乎很荒谬——为什么我要给多个单选按钮提供相同的 aria-label？如果它们都相同，屏幕阅读器用户将如何在它们之间进行选择？

所以我正在研究如何将 role="group" 或 role="radiogroup" 应用于我的单选按钮。

斧头网站上有a good example of using role="radiogroup"。

但是...当我将 role="radiogroup" 添加到元素时，jsx-a11y 会发出警告：

不应为交互元素分配非交互角色

似乎通过赋予 a 角色，我们可能会导致问题，因为隐含的角色现在正在被覆盖。

我不清楚这可能会造成什么破坏，但它让我停下来。

我也不能用这个：

<table><div role="radiogroup"><tr>

不破坏html的规则。

因此，如果我想解决这些警告消息，我似乎需要打破 ARIA、HTML5 或可用性的规则。

或者，将其从 a 更改为一组 s。但在我看来似乎在这个用例中在语义上是合适的，对吧？

这里有什么解决方案可以很好地适用于不同的屏幕阅读器吗？目前的获胜者是只需将 role="group" 放在上并忽略警告，但我尚未在屏幕阅读器上对其进行充分测试。

【问题讨论】：

标签： html html-table wai-aria screen-readers

【解决方案1】：

看起来我们可以在<table> 中使用多个<tbody> 标签。 https://stackoverflow.com/a/3076790/2253611

所以，到目前为止，我见过的最佳解决方案是将每个 <tr> 包装在 <tbody role="radiogroup"> 中，然后将 role="radiogroup" 与 <tr> 分开。

到目前为止，在我的测试中，它看起来很可靠！

【讨论】：