Sobes.tech
Junior

Ce proprietate CSS ai folosi pentru a asigura accesibilitatea?

sobes.tech AI

Răspuns de la AI

aria-hidden: Ascunde un element de tehnologiile de asistență (cititoare de ecran) dacă prezența sa este vizuală, dar redundantă din punct de vedere semantic sau dăunătoare pentru înțelegerea conținutului.

tabindex: Controlează ordinea de focus a elementelor interactive în timpul navigării cu tastatura. -1 exclude elementul din ordinea standard, 0 îl include, iar valorile pozitive stabilesc o ordine explicită (nu recomandat în cele mai multe cazuri).

outline: Setează o margine în jurul elementului atunci când acesta este în focus. Este important să păstrați sau să stilizați această margine pentru ca utilizatorii de tastatură să poată vedea elementul activ.

visually-hidden: Ascunde vizual elementul, dar păstrează accesibilitatea pentru cititoarele de ecran. Este adesea folosit pentru a ascunde etichetele de formular (label) atunci când controlul este vizibil (de exemplu, un buton cu pictogramă).

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

pointer-events: none: Dezactivează interacțiunea cu elementul prin mouse, dar nu afectează accesibilitatea pentru tastatură și cititoare de ecran. Poate fi folosit pentru elemente decorative suprapuse peste zone active.

cursor: pointer: Schimbă aspectul cursorului la trecerea peste elemente interactive, indicând că sunt clicabile.

color și background-color: Sunt importante pentru asigurarea unui contrast suficient între text și fundal, ceea ce este critic pentru utilizatorii cu deficiențe de vedere. Se recomandă utilizarea instrumentelor de verificare a contrastului conform standardelor WCAG.