Tailwind CSS - 螢幕閱讀器

Tailwind CSS 螢幕閱讀器是一個實用程式類，用於透過螢幕閱讀器提高可訪問性。有兩個類，因此分配的內容將僅是螢幕閱讀器內容或相反。

Tailwind CSS 螢幕閱讀器類

以下是提供有效處理元素可訪問性的Tailwind CSS 螢幕閱讀器類的列表。

類	CSS 屬性
sr-only	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
not-sr-only	position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

Tailwind CSS 螢幕閱讀器類的功能

sr-only: 此類用於在視覺上隱藏元素，而不會將其隱藏在螢幕閱讀器中。
not-sr-only: 此類用於撤消 sr-only 類的效果。

Tailwind CSS 螢幕閱讀器類示例

以下示例將說明 Tailwind CSS 螢幕閱讀器類實用程式。

在元素上設定僅螢幕閱讀器

在以下示例中，我們將建立兩個元素，並在第二個元素上應用`sr-only`，這將視覺上隱藏元素，而不會將其隱藏在螢幕閱讀器中

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Screen Readers Class
    </h2>
    <div class="flex">
        <p class="bg-green-500 m-4 p-2">
            This is Element One
        </p>
        <p class="sr-only bg-green-500 m-4 p-2">
            This is Element One
        </p>
    </div>
<body>

</html>

撤消僅螢幕閱讀器效果

在此示例中，我們將對元素應用條件，我們將觸發 not-sr-only 來撤消 sr-only，使元素對視力正常的使用者和螢幕閱讀器在小螢幕上可見。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Screen Readers Class
    </h2>
    <div class="flex">
        <p class="sr-only sm:not-sr-only 
                  border-black bg-green-500">
            Now it is Visually Visibile
        </p>
        
    </div>
<body>

</html>

列印頁面