视觉隐藏
通过这里提供的工具类可以在视觉上隐藏 HTML 元素,但通过辅助技术可以访问到这些元素。更新于: 2023-04-30 14:28:21 查看: 418
发布于: 2021-9-10 19:51 发布者: 大米
通过 .visually-hidden
类在视觉上隐藏某个元素的同时,仍然能够被辅助技术(例如屏幕阅读器)识别。通过 .visually-hidden-focusable
类可以在视觉上隐藏某个元素,但是在获得焦点时能够显示该元素(例如,只使用键盘的用户)。也可以将 .visually-hidden-focusable
类应用到包含其他元素的容器元素上,幸亏有 :focus-within
,当容器元素 中的任何子元素获得焦点时,该容器元素将被显示出来。
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">这是一个容器元素,包含<a href="#">可获得焦点的元素。</a></div>
visually-hidden
和 visually-hidden-focusable
都可以作为 mixin 使用。
// 作为 mixin 使用
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}
扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。