Lectores de pantalla Tailwind CSS

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se utiliza para mejorar la accesibilidad con lectores de pantalla.

Clases de lectores de pantalla:

sr-only: esta clase se usa para ocultar un elemento visualmente sin ocultarlo de los lectores de pantalla
not-sr-only: esta clase se utiliza para deshacer el efecto de clase sr-only .

Sintaxis:

<svg class="sr-only|not-sr-only">...</svg>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
<head>     
    <link href= 
    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
<center> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Screen Readers Class</b> 
    <div class="bg-green-200 p-4 mx-16 space-y-4"> 
          <span class="sr-only">sr-only</span>
          <span class="not-sr-only">not-sr-only</span>
    </div> 
</center> 
</body> 
  
</html>

Producción:

lectores de pantalla

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta