咏叹调标签是否会阻止辅助设备读取内部内容？

Question

该MDN文档说,你应该使用aria-label这样的:

<button aria-label="Close" onclick="myDialog.close()">X</button>

我无法访问屏幕阅读器,但我看到Stack Overflow上的注释表明aria-label它不会替换内部内容,它只是前缀.因此,在上述情况下,它会读出"关闭X",这显然不是理想的.

这是真的？如果是这样,解决方案是什么？我猜测用一个[aria-hidden=true]元素包装内部内容是有意义的,如下所示:

<button aria-label="Close" onclick="myDialog.close()"><span aria-hidden="true">X</span></button>

...但我很谨慎,因为我无法在真正的屏幕阅读器上测试它.

Answer 1

最终编辑

与其依赖博客文章或误解规范，我认为最好进行实际测试，而不是得出结论并试图记住有关 ARIA 的所有内容。

您可以测试元素的可访问名称是什么，例如，如果您使用 Google Chrome（希望其他浏览器包含可访问性测试工具）：

1. 打开开发工具（例如F12在 Windows 上）。
2. 选择元件（用指针或ctrl+ shift+ c）
3. 单击辅助功能选项卡（您可以在此处查看辅助功能树、ARIA 属性和计算属性。

Answer 2

在大多数情况下,将读出aria-label 而不是链接的文本.

这实际上是一个标准测试场景,并且在powermapper上有广泛的测试结果:https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/

在测试结果页面上,您还可以听到屏幕阅读器输出.