隐藏和更新内容

向辅助技术隐藏内容

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Aria 隐藏

优化辅助功能体验的另一项重要技巧 技术用户需要确保只使用网页的相关部分 都接触过辅助技术有几种方法可以确保某个版块 DOM 的某些部分不会向无障碍功能 API 公开。

首先,任何从 DOM 中明确隐藏的内容也不会包含在其中。 所有属性因此,任何 CSS 样式为 visibility: hiddendisplay: none 或使用 HTML5 hidden 属性的内容也将被 对辅助技术用户隐藏。

不过,未进行视觉呈现但未明确隐藏的元素 仍然包含在无障碍树中一种常用的方法是添加 “屏幕阅读器专用文本”位于绝对位置在屏幕之外的元素中。

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

此外,正如我们所见,可通过 aria-labelaria-labelledbyaria-describedby 属性引用 元素。

请参阅这篇有关隐藏技术的 WebAIM 文章 文字 有关创建“仅限屏幕阅读器”的详情,文本。

最后,ARIA 提供了一种将内容从辅助内容中排除的机制。 使用 aria-hidden 属性实现不视觉隐藏的技术。 对某个元素应用此属性可有效移除该元素及其所有 后代。唯一的例外是 由 aria-labelledbyaria-describedby 属性引用。

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

例如,如果您要创建某个模态界面,则可以使用 aria-hidden。 禁止访问主页面。在这种情况下,视力正常的用户可能会看到 半透明叠加层,表示网页的大部分内容目前无法 但屏幕阅读器用户或许仍然可以探索 页面。在此情况下,以及创建键盘陷阱(解释) 之前, 您需要确保网页上目前不在政策范围内的 也是 aria-hidden

现在您已了解 ARIA 的基础知识,以及它如何与原生 HTML 协同发挥作用 以及如何使用它对 以及如何更改单个元素的语义, 让我们看看如何利用它来传达时效性信息。

aria-live

aria-live:可让开发者将网页的某个部分标记为“已发布” 无论用户打开的是哪个网页 而不是用户恰好就浏览了网页的这一部分时间 某个元素具有 aria-live 属性,即包含该元素的网页部分, 其后代称为动态区域

ARIA live 建立一个活动区域。

例如,实时区域可能是因 用户操作。如果信息足够重要,足以抓住视力正常用户 因此引导辅助技术用户 通过设置其 aria-live 属性来关注它。比较这个简单的 div

<div class="status">Your message has been sent.</div>

“Live”(已上架的)副本。

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live 有三个允许的值:politeassertiveoff

  • aria-live="polite" 会指示辅助技术提醒用户注意 在它完成当前执行的任何操作时更改。最好使用 如果事情很重要但不紧急,并且占据了大部分 aria-live
  • aria-live="assertive" 会指示辅助技术中断一切 并立即提醒用户这一变化这仅适用于 重要和紧急的最新动态,例如“已经有 服务器错误,且你的更改未保存;请刷新页面”或 由于用户操作(例如 按钮。
  • aria-live="off" 会让辅助技术暂停运行 aria-live 个打扰项。

您可以运用一些技巧确保活动区域正常工作。

首先,您的 aria-live 区域可能应在初始网页加载时设置。 这不是一条硬性规定,但如果您遇到困难, aria-live 区域,那么这可能就是问题所在。

其次,不同的屏幕阅读器对不同类型的 更改。例如,某些屏幕阅读器可能会触发提醒 将后代元素的 hidden 样式从 true 切换为 false。

适用于 aria-live 的其他属性可帮助您微调 。

aria-atomic 指示是否应将整个区域视为 。例如,如果一个包含 日期、月份和年份有 aria-live=truearia-atomic=true,而用户 使用步进控件仅更改月份的值、 系统会再次读出日期微件的样式。aria-atomic 的值可以是 truefalse(默认值)。

aria-relevant 用于指明应向用户显示哪些类型的更改。 有些选项可以单独使用或用作令牌列表。

  • additions,表示添加到活动区域的任何元素 非常重要。例如,将 span 附加到现有的状态日志 则消息意味着系统会向用户播报该 span(假设 aria-atomicfalse)。
  • text,表示添加到任何后代节点的文本内容 相关性。例如,修改自定义文本字段的 textContent 属性 会向用户显示修改后的文本。
  • removals,即移除任何文本或后代节点应该 传达给用户的信息
  • all,表示所有更改都相关。不过, aria-relevantadditions text,这意味着,如果未指定 aria-relevant 该元素会在有人向该元素添加任何内容时更新用户, 这也是您最可能想要的。

最后,aria-busy 会让您通知辅助技术它应该 暂时忽略对元素的更改,例如在加载内容时。一次 一切就绪,应将 aria-busy 设为 false,以标准化 读取器的操作