html - aria-label 是否会阻止辅助设备读取内部内容？

Question

MDN docs说你应该像这样使用 aria-label:

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

我无法使用屏幕阅读器，但我在 Stack Overflow 上看到评论表明 aria-label 不会替换内部内容，它仅前缀它。所以在上面的例子中它会读出“Close X”，这显然是不理想的。

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

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

...但我很谨慎，因为我无法在真实的屏幕阅读器上对其进行测试。

Answer 1

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

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

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