隐藏和更新内容

向辅助技术隐藏内容

Alice Boxhall

Dave Gash

Meggin Kearney

Aria 隐藏

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

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

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

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

此外，正如我们所见，可通过 aria-label、aria-labelledby 或 aria-describedby 属性引用 元素。

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

最后，ARIA 提供了一种将内容从辅助内容中排除的机制。 使用 aria-hidden 属性实现不视觉隐藏的技术。 对某个元素应用此属性可有效移除该元素及其所有 后代。唯一的例外是 由 aria-labelledby 或 aria-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 属性来关注它。比较这个简单的 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 有三个允许的值：polite、assertive 和 off。

• 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=true 和 aria-atomic=true，而用户 使用步进控件仅更改月份的值、 系统会再次读出日期微件的样式。aria-atomic 的值可以是 true 或 false（默认值）。

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

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

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