我有一个表头结构如下的表。最后四列标题具有相同的名称，因为上面附加了一张添加上下文值的照片。但是，对于屏幕阅读器的可访问性，我想让屏幕阅读器为最后四个表格标题说出不同的名称，这将有助于为照片的功能提供额外的上下文。目前，它只是说“标题”，但我想添加上下文，让屏幕阅读器说出“这个标题”、“那个标题”、“随便什么标题”等内容。
我尝试将 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>
任何想法或建议表示赞赏！
您将无法使用aria属性来覆盖表头元素的 innerText —— 至少不可靠和一致。
这样做的原因是可访问名称计算的规范定义不明确，因此辅助技术都对如何处理aria-label、aria-labelledby和进行了自己的解释aria-describedby。你可以让它在 JAWS 中工作，但不能在 NVDA 或 Voiceover 中工作，所以它永远不会保持一致。
这是一个测试页面，概述了每个屏幕阅读器如何处理这些 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>
上述方法的问题在于，您将向辅助技术用户提供不同的内容，而不是其他人。虽然这不一定是坏事，但您绝对应该有一个很好的理由想要这样做，而不仅仅是风格或设计选择。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句