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

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/

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

Answer 2

最终编辑

我认为不是依靠博客文章或误解规范，而是实际测试事情而不是得出结论并试图记住关于ARIA的一切。

您可以测试元素的可访问名称是什么，例如如果您使用谷歌浏览器（希望其他浏览器包括辅助功能测试工具）：

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

Answer 3

这是使用Windows讲述人在Microsoft Edge和Internet Explorer中发生的情况：

• 当讲述人正在阅读文本并在其中间找到一个按钮时，aria-label实际上是为内容添加前缀，如下所示： [按钮前的内容] [aria-label值] [按钮标签内的文本] [按钮后的内容]。
• 当用户聚焦（或点击）按钮时，叙述者只会显示aria-label值，而不是按钮内的内容，如下所示： [aria-label value]“按钮”。

希望这可以帮助。

Answer 4

我在调整应用程序以更好地支持JAWS屏幕阅读器时遇到了这个问题。

我希望通过指出macOS有一个功能完善的屏幕阅读器（称为VoiceOver（VO），可以用cmd + F5激活）来帮助遇到这个问题的任何人。

或者，macOS用户可以通过VirtualBox（https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/）等免费软件安装Windows（https://www.virtualbox.org/），如果您或您的组织愿意支付许可费，这对于使用NVDA甚至JAWS等测试来说非常合适。

我的答案的道理是你可以跳到Windows机器上查看它不仅可以在屏幕阅读器上运行，而且还可以检查无数的Windows Web浏览器，我确信不同百分比的访问者使用 - web dev DOES work像那样。

更新：虽然我理解由于我的答案没有真正回答callum的问题所致的低票，我觉得诸如“3月22日11:41”的评论会对社区产生负面影响并需要解决。如果我只打开了一个开发人员的心态来进行跨操作系统和可访问性测试，那就值得了。