时间戳

首页 > 解决方案 > 辅助功能：如何配置“列标题”公告？

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

问题描述

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

<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" 不起作用。

标签： htmlwebaccessibilitywai-aria

解决方案

您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。

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

推荐阅读