隐藏和更新内容

向辅助技术隐藏内容

爱丽丝·博克斯霍尔
Alice Boxhall
X
戴夫·加什
Dave Gash
梅金·卡尼
Meggin Kearney

aria 隐藏

优化辅助技术用户体验的另一个重要方法是确保仅向辅助技术公开页面的相关部分。您可以通过多种方法确保不向无障碍功能 API 公开 DOM 的某一部分。

首先，任何向 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 建立一个实时区域。

例如，动态区域可能是因用户操作而显示的状态消息。如果消息非常重要，足以吸引视力正常的用户的注意，则有必要通过设置其 aria-live 属性来引导辅助技术用户的注意。比较这个普通的div

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

与其“活动”版本相对应

<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，以规范读取器的操作。