辅助功能：如何配置“列标题”公告？

【问题标题】：Accessibility: How to configure "column header" announcement?辅助功能：如何配置“列标题”公告？
【发布时间】：2021-10-20 09:43:09
【问题描述】：

我正在为视障人士优化网站。我在页面上有一个表格，格式如下 -

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  
  <tbody>
    ...
  </tbody>
</table>

目前屏幕阅读器正在宣布“row 1 col 1 number”，但期望它应该在其元素时宣布“row 1 col 1 number column header”。我该如何配置它？设置 role="columnheader" 不起作用。

【问题讨论】：

标签： html web accessibility wai-aria

【解决方案1】：

您正在寻找关联列和行的scope。

scope="col" 会将表头关联为列头。

如果您愿意，还可以将行标题与scope="row" 关联

<table>
  <caption>My table caption - don't forget this so people know what a table is for / about</caption>
  <thead>
    <tr>
      <th scope="col">Number</th>
      <th scope="col">Name</th>
      <th scope="col">Surname</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Mike</td>
      <td>Simmons</td>
    </tr>
  </tbody>
</table>

有关此技术的更多信息，请参阅https://www.w3.org/TR/WCAG20-TECHS/H63.html。

附言不要忘记在您的表格中添加<caption>！

【讨论】：