dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Stări de Accesibilitate și Atribute în Tailwind: aria-*, data-* și sr-only în Tailwind CSS

Accesibilitate și Atribute Tailwind CSS v4 Q&A / Distribuie cod

Ghid complet pentru accesibilitate în Tailwind: modificatori condiționali aria-expanded:*, aria-selected:*, atribute data-* și ascunderea vizuală a textelor pentru cititoarele de ecran cu sr-only.

Sintaxă 
class="aria-expanded:rotate-180 aria-selected:bg-blue-600 data-[state=open]:block"

Dezvoltarea aplicațiilor moderne impune respectarea standardelor WCAG (Web Content Accessibility Guidelines). Tailwind permite legarea stilurilor direct de atributele de accesibilitate ARIA și data-*, asigurând că componentele sunt atât frumoase vizual, cât și accesibile persoanelor cu deficiențe.

Acordeon accesibil stilizat prin aria-expanded
<!-- Săgeata se rotește automat doar dacă aria-expanded="true": -->
<button aria-expanded="true" class="group flex w-full items-center justify-between p-4 bg-gray-100 rounded-lg">
    <span class="font-medium text-gray-900">Ce este Tailwind CSS v4?</span>
    <svg class="w-5 h-5 transition-transform duration-300 group-aria-expanded:rotate-180" viewBox="0 0 20 20" fill="currentColor">
        <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
    </svg>
</button>

<!-- Text invizibil pe ecran, dar citit de Screen Readers (cititoare de ecran): -->
<button class="p-2">
    <svg class="w-6 h-6" ... />
    <span class="sr-only">Închide fereastra modală</span>
</button>
Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Stări de Accesibilitate și Atribute în Tailwind: aria-*, data-* și sr-only

Ai o nelămurire despre utilizarea comenzii Stări de Accesibilitate și Atribute în Tailwind: aria-*, data-* și sr-only sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.