【问题标题】:Does hiding flash elements & iFrames with aria-hidden="true" help make my website accessible?使用 aria-hidden="true" 隐藏 Flash 元素和 iFrame 是否有助于使我的网站易于访问?
【发布时间】:2017-11-29 21:26:51
【问题描述】:

我在一家网站设计公司工作,我们有很多 Flash 项目,客户不断将 iframe 嵌入 Facebook 等。

例如,当我使用屏幕阅读器进行测试时,进入 iframe 似乎是一种糟糕的用户体验,因为大多数 Facebook 提要嵌入永远加载,你甚至可能陷入 ajax 加载 iFrame。

我想知道使用 aria-hidden 从屏幕阅读器中隐藏 flash/iframe 元素是否被认为是不好的做法?另外,它是否可以通过隐藏我的网站来访问它们?

谢谢!

【问题讨论】:

标签: html css accessibility wcag wcag2.0


【解决方案1】:

主要看情况。

如果您的 iframe 不可见(例如,作为技术跨域事务的 ajax 代理),则可能需要 aria-hidden(当无法设置 display:none 时)。

在许多其他情况下,iframe 将由可见和交互元素组成。

使用aria-hidden 隐藏将使其无法阅读,例如,对于使用屏幕阅读器的文盲可能会选择iframe 想要阅读内部内容。

当然,这需要 iframe 的内容是可访问的。如果不是,那么最好使用aria-hidden 并提供一个可访问的替代方案。

【讨论】:

  • 啊,我明白了,谢谢你的回答,它解释了很多,但你对 Flash 元素有什么看法?
  • Flash 播放器集成了对屏幕访问技术的支持 (adobe.com/accessibility/products/flashplayer.html)。所以答案将与iframe 相同。如果你的 flash 对象里面有文本并且在屏幕上可见,你应该为它提供可访问性支持。否则,如果它是纯粹的装饰,你可以隐藏它。
【解决方案2】:

我认为无条件隐藏不是一个好主意。所有用户都有权查看所有相同的内容。

  1. 您可以添加一个链接以跳过 iframe 上方的 iframe,如下所示。

    <a href="#skipfacebook" class="blind">skip facebook feed</a>
    <iframe></iframe>
    <div id="skipfacebook" name="skipfacebook">Next content</div>
    
  2. 我不知道您使用哪个屏幕阅读器,但据我所知,您可以使用屏幕阅读器跳过 iframe,因为屏幕阅读器有很多热键,例如“查看所有链接”。 例如,您可以使用 [Alt+.] 移动到上一个元素,并且可以在我知道的屏幕阅读器中使用 [Alt+,] 移动到下一个元素。

【讨论】:

  • aria-hidden="true" 是对视障人士的浏览器的明确指示,特定元素对他们没有用处。隐藏是它的全部目的,在适当的时候使用它是一个非常好的主意。
  • @ceejayoz 我不同意你的看法。无条件隐藏不好。您无法使用屏幕阅读器阅读 area-hidden=true 的内容。如果内容对使用屏幕阅读器的用户无用,您应该使用 area-hidden=true,例如暗淡的图层。我认为 facebook 提要在他们的内容中很重要,您需要向所有用户提供所有相同的内容。周眼的人可以使用屏幕阅读器,因此最好不要隐藏内容。
  • 是的,这很好,无条件隐藏不好也不公平。但是 Flash 呢,应该在 Flash 元素上使用 aria-hidden 吗?
  • @Gcamara14 这取决于内容。如果 Flash 只是显示像一座山这样没有文字的视觉场景,您可以将其隐藏。但是,如果它是一种菜单或文本,则不需要隐藏它。一些屏幕阅读器也可以阅读 Flash 上的文本。您可以在 Flash 中的按钮或图形对象上添加替代文本。
【解决方案3】:

如果内容或功能可供一组人使用,则它应该可供所有人使用。如果您在 iframe 中提供不可访问的内容,将其隐藏起来,让盲人用户不知道它的存在,这不是您的“免于越狱”卡,这违反了 Web 内容可访问性指南,具体取决于什么您居住的国家/地区可能违反了您的无障碍法律。

正如上面有人所说,如果 iframe 内容纯粹是装饰性的,那么隐藏它是可以的,但如果它包含重要信息或交互元素,那么向一组用户假装它不存在是不可行的.

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多