可访问性：如何处理表中的按钮

Question

给定一个表格可能包含按钮的表，这些按钮应该如何标记以供访问权限？

<table>
  <tbody>
    <tr>
      <td>
        User 1
      </td>
      <td>
        Alice
      </td>
      <td>
        <button aria-label="Edit user Alice">Edit</button>
      </td>
    </tr>

    <tr>
      <td>
        User 2
      </td>
      <td>
        Bob
      </td>
      <td>
        <button aria-label="Edit user Bob">Edit</button>
      </td>
    </tr>

  </tbody>
</table>

对于视力用户，很明显每个编辑按钮的作用，但是我想知道如何最适合可访问性。

我的直觉会说，应该给按钮一个指示他们真正做什么的ARIA标签，例如编辑用户Alice，但这是正确的吗？

Answer 1

那是完全正确的。认识到需求的好工作。该页面的设计方式，有一个“负担能力”，可以使视力用户了解元素之间的结构关系。应向所有用户传达相同的关系。

您可以做到这一点的一种方法是使用列和行标头（＆lt; th scope =“ col”＆gt; and ＆lt scope =“ row”＆gt;）。在您的特定示例中， row 标题将是“用户1”列或“ Alice”列。这将满足WCAG，但不一定是最佳用户体验。

<table>
  <tbody>
    <tr>
      <th scope="col">user</th>
      <th scope="col">name</th>
      <th scope="col">edit profile</th>
    </tr>
    <tr>
      <td>User 1</td>
      <th scope="row">Alice</th>
      <td><button>Edit</button></td>
    </tr>
    <tr>
      <td>User 2</td>
      <th scope="row">Bob</th>
      <td><button>Edit</button></td>
    </tr>
  </tbody>
</table>

在此示例中，我选择了第二列作为行标头。这个人的名字。如果屏幕读取器用户在最后一列（按钮）中，并且他们垂直导航该列（ ctr + alt alt + downarrow> downarrow> downarrow 屏幕读取器），他们会在听到“编辑按钮”之前听到“爱丽丝”或“鲍勃”，以便给他们一些上下文。

请注意，在“行标头列”之前，某些屏幕读取器 +浏览器组合将为数据单元宣布 。因此，在这种情况下，如果我在第一列（用户）中，并且我将列导航，那么我可能不会听到“爱丽丝”或“鲍勃”。带有Firefox的NVDA不会宣布它，但是NVDA与Chrome Will。 Chrome上的下巴不会宣布它。

虽然我强烈鼓励排桌子上的标题（还有列标题，但大多数人都很擅长指定列标题，因此我经常不必提及它们），但在按钮本身上有其他上下文是最佳解决方案（除了表头外）。

我将使用aria-labelled，以便您可以“重复使用”屏幕上已经存在的文本。无需在aria-label中复制文本。您需要做的就是在表单元格上指定要使用的ID作为按钮和的附加上下文，并在按钮本身上具有ID。然后，请参阅aria-labelled中的这两个ID。

<table>
  <tbody>
    <tr>
      <th scope="col">user</th>
      <th scope="col">name</th>
      <th scope="col">edit profile</th>
    </tr>
    <tr>
      <td>User 1</td>
      <th scope="row" id="row1">Alice</th>
      <td><button id="button1" aria-labelledby="button1 row1">Edit</button></td>
    </tr>
    <tr>
      <td>User 2</td>
      <th scope="row" id="row2">Bob</th>
      <td><button id="button2" aria-labelledby="button2 row2">Edit</button></td>
    </tr>
  </tbody>
</table>

现在，当用户导航到按钮时，如果他们使用 tab 而不是表导航键，他们会听到“编辑alice button” 或“编辑bob按钮“ 。