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>

打印页面