如何让屏幕阅读器浏览表格数据行时不读取列头的排序按钮信息？

要实现表头行正常播报排序按钮状态，数据行仅播报表头文本而非按钮信息，可通过以下几种方法实现：

方法1：明确指定表头的可访问名称 #

通过aria-labelledby或aria-label将表头的语义名称限定为纯文本，让数据行关联表头时仅读取该名称，按钮作为独立交互元素仅在表头行浏览时被识别。

代码示例（使用aria-labelledby）： #

<th scope="col" aria-labelledby="id-header">
  <span id="id-header">ID</span>
  <button class="sort-btn" aria-label="sorted ascending"></button>
</th>
<th scope="col" aria-labelledby="name-header">
  <span id="name-header">Name</span>
  <button class="sort-btn" aria-label="sort"></button>
</th>

• 原理：<th>通过aria-labelledby指向内部纯文本<span>，明确其可访问名称为表头文本，数据行关联时仅读取该名称。
• 表头行浏览时，NVDA会先播报表头的角色和名称，再读取按钮的aria-label状态，符合需求。

代码示例（使用aria-label）： #

如果表头文本固定，也可直接用aria-label指定表头名称：

<th scope="col" aria-label="ID">
  ID
  <button class="sort-btn" aria-label="sorted ascending"></button>
</th>

• 此方法更简洁，但需确保aria-label与视觉文本一致，避免语义不一致。

方法2：将排序按钮移出<th>语义范围（视觉保持原位） #

通过CSS绝对定位，将排序按钮放在<th>外部但视觉上嵌入表头，使<th>的语义内容仅为纯文本，数据行关联时不会读取按钮信息。

代码示例： #

<td class="header-container">
  <th scope="col">ID</th>
  <button class="sort-btn" aria-label="sorted ascending"></button>
</td>

.header-container {
  position: relative;
  padding-right: 25px; /* 给按钮留出空间 */
}
.sort-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

• 原理：<th>仅包含纯文本，按钮属于相邻元素但视觉上在表头区域，数据行关联表头时仅读取<th>的文本，表头行浏览时按钮的状态仍会被正常播报。

方法3：优化按钮的ARIA属性 #

确保排序按钮的aria-label仅描述自身状态，且不会被纳入<th>的可访问名称。同时避免给按钮额外设置role（默认button语义已足够），防止NVDA错误关联。

注意事项： #

• 不要在<th>上设置包含排序状态的文本或ARIA属性，仅让按钮自身携带状态信息。
• 按钮的aria-label需准确描述当前状态：未排序时用"sort"，升序用"sorted ascending"，降序用"sorted descending"。

内容的提问来源于stack exchange，提问作者Green Grasso Holm