Question

The MDN docs say you should use aria-label like this:

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

I don't have access to a screenreader, but I've seen comments on Stack Overflow suggesting that an aria-label does not replace the inner content, it only prefixes it. So in the above case it would read out "Close X", which is obviously not ideal.

Is this true? If so, what's the solution? I'm guessing it would make sense to wrap the inner content with an [aria-hidden=true] element, like this:

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

...but I'm cautious because I can't test it on a real screenreader.

Answer 1

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

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

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

Answer 2

最终编辑

我认为不是依靠博客文章或误解规格，而是实际测试事情而不是得出结论并试图记住ARIA的所有内容。

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

打开开发工具（例如Windows上的 F12 ）。
选择元素（使用指针或 ctrl + shift + c ）
点击辅助功能标签（此处可以查看辅助功能树，ARIA属性和计算属性。

Answer 3

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

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

希望这有帮助。

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等工具进行测试，则macOS完全可以满足要求。愿意支付许可费。

我的回答的意思是，您可以跳到Windows计算机上检查它是否不仅在屏幕阅读器上运行，而且还可以在各种各样的Windows Web浏览器上检查它是否可以正常运行，我确定您所使用的访问者所占的百分比有所不同-开发人员确实那样工作。

更新：虽然我理解由于我的回答并未真正回答卡勒姆的问题而引起的反对，但我认为诸如“ 3月22日11:41”之类的评论对社区有负面影响，需要解决。如果我只开放了一个开发人员的跨OS和可访问性测试的心态，那是值得的。

Does aria-label prevent the inner content being read out by assistive devices?

4 个答案: