设置屏幕阅读器的文本并从屏幕阅读器隐藏子级

问题描述

我有一个iframe，可以在其中投放任意内容。我想确保屏幕阅读器无法访问iframe中的内容，并指定选择iframe时应读取哪些屏幕阅读器。

我的期望是当在页面上的不同元素之间切换时，myDiv被选择为一个单元，并且它读出UnkNown content。

我尝试了以下

<div id="myDiv" title="UnkNown content">
  <iframe id="myIframe" aria-hidden="true">
    {arbitraryContent}
  </html>
</div>

我遇到的问题是

1. 并非所有iframe内容都会被忽略。也许是因为aria-hidden不能与可聚焦的子元素一起使用。
2. UnkNown text并不总是被读取，尤其是在子元素可聚焦的情况下。
3. 我还尝试在iframe上设置tabIndex=-1。但是，这将导致所有元素（包括myDiv）都无法通过键盘选择。

什么是实现我所寻找的正确方法？

解决方法

如果您阻止屏幕阅读器读取整个iframe，并且该屏幕仍具有可聚焦的元素，是的，您将遇到致命的可访问性问题： 您可以聚焦某物，但不允许屏幕阅读器告知聚焦的东西。那么该怎么办 ？它应该什么都不说，还是违背您的定义？

从技术上讲，这意味着 aria-hidden = true 中不应包含任何可聚焦的元素。 您必须确保它永远不会发生。

但是，您必须问自己的一个好问题是，为什么要完全隐藏iframe中的内容，或者换句话说，明确地使其完全不可访问。

如果您担心无法控制的内容可能破坏页面的可访问性，那么

从管理上来说，基于WCAG的证书知道此问题，并且通常接受例外，即不考虑您无法控制的内容。

从屏幕阅读器用户的角度来讲，访问性很差的iframe的确可能给人的印象是，您网站的整体可访问性通常很差，但是拥有部分可访问的内容肯定比总没有内容更好。 您最好删除aria-hidden = true。即使您知道它不是很容易访问，也无论如何都要留一些机会访问它，而不是一定要阻止它。内容的可访问性可能会随着时间的推移而改善。

例外情况是，如果iframe的内容令人反感，带有装饰性，或者在您的页面上下文中没有带来任何真实信息。典型示例包括广告和各种小部件（天气，时钟，社交网络共享等） 对于这些内容，请继续保留aria-hidden = true并删除iframe的所有可聚焦元素。无论如何，它们只是无用的噪音，如果完全跳过它们，则不会后悔。