Bootstrap - 視覺隱藏

本章討論了 Bootstrap 提供的用於視覺隱藏任何元素的類，例如.visually-hidden 和.visually-hidden-focusable。

Bootstrap 5 中的.visually-hidden 類用於視覺隱藏元素，同時保持其對螢幕閱讀器和其他輔助技術的可訪問性。
.visually-hidden-focusable 類用於預設情況下視覺隱藏元素，但在聚焦時顯示它，例如使用鍵盤。
.visually-hidden-focusable 類也可以在:focus-within 容器內使用。當容器的任何子元素獲得焦點時，容器將顯示。

測試可聚焦性：使用鍵盤導航測試元素的可聚焦性。按Tab鍵遍歷可聚焦元素，按Shift + Tab鍵向後移動。

讓我們看看一個關於.visually-hidden 和.visually-hidden-focusable 類用法的示例。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!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://bootstrap.tw/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>

列印頁面