向辅助技术隐藏内容
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 建立一个活动区域。](https://web.dev/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=0000&hl=zh-cn)
例如,实时区域可能是因
用户操作。如果信息足够重要,足以抓住视力正常用户
因此引导辅助技术用户
通过设置其 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,以标准化
读取器的操作