Bootstrap 简明教程

Bootstrap - Visually hidden

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

This chapter discusses about classes provided by Bootstrap to visually hide any element, such as .visually-hidden and .visually-hidden-focusable.

  1. The .visually-hidden class in Bootstrap 5 is used to visually hide an element while keeping it accessible to screen readers and other assistive technologies.

  2. The .visually-hidden-focusable class is used to visually hide an element by default, but to display it when it’s focused, for example, on using a keyboard.

  3. The .visually-hidden-focusable class can also be used within a container :focus-within. The container will be displayed when any child element of the container receives focus.

Test focusability ：使用键盘导航来测试元素的可聚焦性。按 Tab 键来浏览可聚焦元素并按 Shift + Tab 返回。

Test focusability: Use keyboard navigation to test the focusability of elements. Press the Tab key to navigate through the focusable elements and Shift + Tab to move backward.

让我们看一个关于 .visually-hidden 和 .visually-hidden-focusable 类的用法示例：

Let’s see an example on the usage of the classes .visually-hidden and .visually-hidden-focusable:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!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>