Question

我正在为具有可扩展行的表创建一个React组件，并且希望使其尽可能易于访问。

这是我所做的一个简单的，没有样式的示例：

每当我单击“更多信息”按钮时，都会添加一个新行，并在其前面添加有关该行的信息。

我需要在wai-aria角色，焦点管理和其他方面添加什么才能使其真正可用？

Answer 1

您实际上有一个“ disclosure widget”。用于打开/关闭该部分的按钮会将aria-expanded设置为true / false。

但是，我不会从字面上向表中添加新行，因为这可能会使屏幕阅读器感到困惑。第一次浏览该表时，用户将听到该表有四行（包括标题）和四列。当您单击“更多信息”按钮时，表格现在将有五行，但是屏幕阅读器不会告诉用户出现了另一行。如果用户正在浏览该列并听到行号（通常由屏幕阅读器宣布），那么当他们听到表中只有四行时，他们将排在第五行。

我不知道这是否适合您的情况，但是在演示代码中，额外信息与人员有关，因此它可能只是第一个表单元格中存在的隐藏信息（css display：none）。选择按钮后，信息就会显示出来（css display：block）。

此外，您可能需要将该名称设置为行标题（<th scope="row">），或者需要将该人的姓名与“更多信息”按钮相关联，以便屏幕阅读器知道他们是哪个人重新获得有关的更多信息。

我不知道如何反应，但是生成的html看起来像这样（带有行标题）：

<tr>
  <th scope="row">Avicii</th>
  <td>Progressive House</td>
  <td></td>
  <td>
    <button>More info</button>
  </td>
</tr>
<tr>
  <th scope="row">Kygo</th>
  <td>Tropical House</td>
  <td></td>
  <td>
    <button>More info</button>
  </td>
</tr>

或看起来像这样（以及与按钮相关的其他信息）：

<span id="moreInfoID" class="sr-only">more info about </span>
...
<tr>
  <td id="name1">Avicii</td>
  <td>Progressive House</td>
  <td></td>
  <td>
    <button aria-labelledby="moreInfoID name1">More info</button>
  </td>
</tr>
<tr>
  <td id="name2">Kygo</td>
  <td>Tropical House</td>
  <td></td>
  <td>
    <button aria-labelledby="moreInfoID name2">More info</button>
  </td>
</tr>

后者需要更多工作。我会推荐第一个。

（您可以在What is sr-only in Bootstrap 3?上查看sr-only类的信息）。

此外，您的示例还显示添加的新行具有tabindex="0"。由于新信息不是交互式对象，因此它不应获得键盘焦点，也不应具有tabindex。

Answer 2

展开可折叠部分时，可以在按钮上添加aria-expanded="true"。并且，如果您在表（整个表）中的可聚焦项上拥有tabindex="0"，则无需担心制表符的排序。

我已经更新了沙箱：https://codesandbox.io/s/k5pkj4wzw3

要进一步阅读可访问的可折叠部分（阅读：展开内容），建议您阅读本文：https://inclusive-components.design/collapsible-sections/

使可扩展表行可访问

2 个答案: