如何使用 Aria 重命名表头元素答案

【问题标题】：How to Rename a Table Header Element With Aria如何使用 Aria 重命名表头元素
【发布时间】：2021-07-22 19:15:52
【问题描述】：

我有一个表头结构如下的表。最后四个列标题具有相同的名称，因为上面附加了一张添加上下文价值的照片。但是，对于屏幕阅读器的可访问性，我想让屏幕阅读器为最后四个表格标题说出不同的名称，这将有助于为照片的功能提供额外的上下文。目前，它只显示“标题”，但我想添加上下文以使屏幕阅读器说出“标题这个”、“那个标题”、“任何标题”等内容。

我尝试将 title=""、aria-labelledby=""、aria-label="" 添加到 'th' 元素中，但似乎没有任何效果。另外，我不想更改为每个列标题显示的实际名称。

 <th class="text-right text-dark">Name Title</th>
 <th class="text-center text-dark" name="name 1">Title</th>
 <th class="text-center text-dark" name="name 2">Title</th>
 <th class="text-center text-dark" name="name 3">Title</th>
 <th class="text-center text-dark" name="name 4">Title</th>

感谢任何想法或建议！

【问题讨论】：

标签： html accessibility css-tables wai-aria

【解决方案1】：

您将无法使用 aria 属性来覆盖表头元素的 innerText —— 至少不能可靠且一致。

原因是accessible name computation 的规范定义不明确，因此辅助技术对如何处理aria-label、aria-labelledby 和aria-describedby 都有自己的解释。你可以让它在 JAWS 中工作，但不能在 NVDA 或 Voiceover 中工作，所以它永远不会保持一致。

这里有一个testing page，它概述了每个屏幕阅读器如何处理这些 aria 属性。在我使用 NVDA 进行的有限测试中，我发现结果是准确的，即使它们是几年前的。

你最好做这样的事情：

<!-- HTML -->
<th>
    <span aria-hiddden="true">Text invisible to screen readers</span>
    <span class="sr-only">Text just for screen readers</span>
</th>

<!-- CSS -->
<style>
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
</style>

上述方法的问题在于，您将向辅助技术用户提供与其他所有人不同的内容。虽然这不一定是坏事，但您绝对应该有一个很好的理由想要这样做，而不仅仅是风格或设计选择。

【讨论】：

【解决方案2】：

我想把这个答案作为评论，但我没有足够的声誉，所以我的答案就在这里。你可以用几行jquery来实现这个目标

<table>
 <th class="text-right text-dark">Name Title</th>
 <th class="text-center text-dark" id="titleThis" name="name 1">Title</th>
 <th class="text-center text-dark" id="titlewhatever" name="name 2">Title</th>
 <th class="text-center text-dark" name="name 3">Title</th>
 <th class="text-center text-dark" name="name 4">Title</th>
</table>

<script>
$(document).ready(function() {
  $("#titleThis").html('Title this');
  $("#titlewhatever").html('Title Whatever');
});
</script>

上述代码的结果将是Name Title Title this Title Whatever Title Title 如果它解决了你的问题，那么请标记这个答案，以便下次我可以将我的答案放在 cmets 中。

【讨论】：