Tailwind CSS - Screen Readers

Previous
Quiz
Next

Tailwind CSS Screen Readers is a utility class, and used to iprove accessibility with screen readers. There are two class so the assgined content will be screen reader only or opposite.

Tailwind CSS Screen Readers Classes

The following is the list of Tailwind CSS Screen Readers Classes that provides an effective way of handling elements accessibility.

Class CSS Properties
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;

Functionality of Tailwind CSS Screen Readers Classes

  • sr-only: This class is used to hide an element visually without hiding it from screen readers.
  • not-sr-only: This class is used to undo the effect of sr-only class effetc.

Tailwind CSS Screen Reader Class Examples

The following examples will illustrate the Tailwind CSS Screen Reader class utility.

Setting Screen Reader Only on Element

In the following example we will create two element and apply `sr-only` on the second element that will hide the element visually without hiding it from screen readers

Example

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

Revoke Screen Reader Only Effect

Here in this example we will apply condition on the element, we will trigger not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers on small screen.

Example

<!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>
Print Page
Previous
Next