Tailwind CSS - Screen Readers

Tailwind CSS Screen Readers 是一个实用类，用于提升屏幕阅读器的可访问性。它有两个类，因此分配的内容将仅支持屏幕阅读器或不支持屏幕阅读器。

Tailwind CSS Screen Readers 类

以下是 Tailwind CSS Screen Readers 类的列表，这些类提供了一种有效处理元素可访问性的方法。

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>