为屏幕阅读器设置文本并在屏幕阅读器中隐藏子项

Question

我有一个 iframe，其中提供任意内容。 我想确保屏幕阅读器无法访问 iframe 中的内容，并指定选择 iframe 时应读出的屏幕阅读器。

我的期望是在页面上的不同元素之间myDiv ， 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 ）无法通过键盘选择。

实现我正在寻找的目标的正确方法是什么？

Answer 1

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

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

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

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

从管理上来说，基于 WCAG 合规性的认证知道这个问题并且通常接受例外情况，即不考虑您无法控制的事情。

实际上，作为屏幕阅读器用户，可访问性差的 iframe 可能确实给人的印象是您网站的整体可访问性总体上很糟糕，但拥有一些部分可访问的内容肯定比什么都没有要好。 你最好删除 aria-hidden=true。 即使您知道它不是很容易访问，无论如何也要留出一点访问它的机会，而不是绝对阻止它。 也许内容的可访问性会随着时间的推移而提高。

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