笙亿网络策划

Bootstrap Visually Hidden 怎么用？实现视觉隐藏效果有哪些技巧？

约 4 分钟读完 0 阅
文章导读
Previous Quiz Next 本章讨论 Bootstrap 提供的用于视觉隐藏任何元素的 class，例如 .visually-hidden 和 .visually-hidden-focusable。
A A

Bootstrap - 视觉隐藏

Previous
Quiz
Next

本章讨论 Bootstrap 提供的用于视觉隐藏任何元素的 class，例如 .visually-hidden 和 .visually-hidden-focusable。

  • Bootstrap 5 中的 .visually-hidden class 用于视觉隐藏一个元素，同时保持其对 screen readers 和其他辅助技术的可访问性。

  • .visually-hidden-focusable class 用于默认视觉隐藏一个元素，但在获得焦点时显示它，例如使用键盘时。

  • .visually-hidden-focusable class 也可以在容器内的 :focus-within 中使用。当容器的任何子元素获得焦点时，容器将被显示。

测试焦点能力：使用键盘导航来测试元素的焦点能力。按 Tab 键在可焦点元素之间导航，按 Shift + Tab 向后移动。

让我们看一个使用 .visually-hidden 和 .visually-hidden-focusable class 的示例：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Visually hidden</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Visually hidden</h4><br><br>
        <h4 class="visually-hidden">Hidden title for screen readers</h4>
        <a class="visually-hidden-focusable" href="#content">Skip to home page</a>
        <div class="visually-hidden-focusable">A container with an <a href="#">element that is focusable</a>.</div>
    </body>
</html>