如何使用 Aria 重命名 Table Header 元素

Question

我有一个 table 和 table header 结构如下。最后四列 header 具有相同的名称，因为上面附加了一张照片，增加了上下文价值。但是，对于屏幕 reader 可访问性，我想让屏幕 reader 为最后四个 table header 说一个不同的名称，这将有助于为内容提供额外的上下文照片可以。目前，它只显示“标题”，但我想添加上下文以使屏幕 reader 显示类似“标题这个”、“标题那个”、“标题随便什么”等内容。

我已经尝试将 title="", aria-labelledby="", aria-label="", 添加到 'th' 元素并且 none 似乎有效.此外，我不想更改为每一列显示的实际名称 header。

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

欢迎任何想法或建议！

Answer 1

我想把这个答案作为评论，但我没有足够的声誉，所以我的答案在这里。你可以用几行 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 如果它解决了你的问题，那么请标记这个答案，以便下次我可以将我的答案放在评论中。

Answer 2

您将无法使用 aria 属性覆盖 table header 元素的 innerText -- 至少不能可靠且一致。

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

这里有一个 testing page 概述了每个屏幕 reader 如何处理这些 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>

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

如何使用 Aria 重命名 Table Header 元素

How to Rename a Table Header Element With Aria

html

accessibility

css-tables

wai-aria