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

编程问答 2022-08-26

问题描述

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

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

pipeline {
  environment {
    SHA = sh(script: "git rev-parse --short HEAD",returnStdout: true).trim()
  }
  agent {
    kubernetes {
      yamlFile 'pod.yaml' #within this file the image is set to foo/foo:${env.SHA}
    }
  }
}

感谢任何想法或建议！

解决方法

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

这样做的原因是 accessible name computation 的规范定义不明确，所以辅助技术都对如何处理 aria-label、aria-labelledby 和 {{1} }.你可以让它在 JAWS 中工作，但不能在 NVDA 或 Voiceover 中工作，所以它永远不会保持一致。

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

你最好这样做：

aria-describedby

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

,

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

accessibilityaccessibilitycss-tableshtmlwai-aria