如何防止 Windows 讲述人读取隐藏的 HTML 标签？答案

【问题标题】：How to prevent Windows Narrator from reading hidden HTML tags?如何防止 Windows 讲述人读取隐藏的 HTML 标签？
【发布时间】：2013-07-23 19:26:48
【问题描述】：

我有一个 HTML 页面，其中包含多个仅在某些情况下才可见的隐藏元素。

当我将焦点设置在页面包装器上（以读取所有内容）时，Windows 讲述人会读取所有元素，甚至是隐藏的元素。

我试过使用 aria-hidden="true", CSS display: none, HTML5 hidden 属性，都被完全忽略了。到目前为止，我发现唯一可行的机制是在将焦点设置在包装器上之前从 DOM 中删除这些元素。但这不是一个理想的解决方案。

【问题讨论】：

它并不理想，但它是我唯一相信的。
放下旁白，它应该是你最后的选择，这就像试图让 HTML5 与 IE7 一起工作——你会度过一段糟糕的时光。获取 NVDA 的副本（它是免费的），看看会发生什么。如果代码有效，这不是问题。如果 NVDA 出现问题，我们需要适用的代码。
需要在讲述人上工作，在这种情况下不是一个选项：S
谁说的？叙述者唯一被认为是可接受的工具的唯一情况是当您处于锁定环境中时，例如图书馆。 MS自己的文档甚至说明了这一点！图书馆和其他资源不能再争论金钱方面了，因为 NVDA 1- 是免费的，2- 提供与 JAWS 相当的访问权限。所以，我想说客户教育胜过实施。唯一的另一件事是创建一个纯文本视图

标签： html accessibility wai-aria narrator

【解决方案1】：

将role="presentation" tabindex="-1" 应用于已应用aria-hidden 的元素。

【讨论】：

即使添加了这两个属性，它仍然可以读取。可以查看以下测试，点击内容即可获得焦点：jsfiddle.net/K7vAs/4/embedded/result

【解决方案2】：

刚用同样的东西打了，发现如果有一个带有role="main"的元素没有明确定义aria-label/aria-labelledby，它的整个内容，包括所有隐藏的元素，都会被添加到MSAA和UIA树中然后由旁白读出。添加显式 aria 属性可以解决问题 - 但显然也会阻止讲述人自动开始阅读主要内容。

好消息是AccChecker 会针对这些问题发出警告。显然最好听从它的建议，即使自动阅读内容会很好。

【讨论】：

我认为你的问题正好相反。对不起，如果我没有把我的观点说清楚。我面临的问题是讲述人会读取我不希望它读取的内容，即使我应用 aria-hidden 和 role="presentation"，一旦它的包装器获得焦点。
那么，如果你给那个隐藏元素添加一个显式的aria-label="foo"，它会解决问题吗？

【解决方案3】：

显然这在 MS Edge 上不再是问题了！欢呼！如果元素被 CSS display:none 隐藏，那么它不会读取它的内容。

【讨论】：