html - 使可展开的表格行易于访问

Question

我正在为具有可扩展行的表格创建一个 React 组件，我想让它尽可能易于访问。

这是我正在制作的一个简单的无样式示例:

https://codesandbox.io/s/nz8r2w74j

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

为了使其真正易于访问，我需要在 wai-aria 角色、焦点管理和其他方面添加什么？

Answer 1

您基本上有一个“disclosure widget”。打开/关闭该部分的按钮将具有 aria-expanded设置为真/假。

但是，我不会从字面上向表中添加新行，因为这可能会使屏幕阅读器感到困惑。首次导航到该表时，用户会听到该表有四行(包括标题)和四列。当您单击“更多信息”按钮时，表格现在将有五行，但屏幕阅读器不会告诉用户另一行出现了。如果用户向下浏览该列并听到行号(通常由屏幕阅读器播报)，他们最终会在第五行结束，而早些时候他们听说表格中只有四行。

我不知道这是否适合你的情况，但在演示代码中，额外的信息与人有关，所以它可能只是第一个表格单元格中存在的隐藏信息 (css display:none) .当您选择该按钮时，会显示信息 (css display:block)。

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

我不知道如何 react ，但生成的 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。