Categorii: Nivel A
Ce înseamnă acest criteriu?
Toate componentele de interfață (cum ar fi butoanele, câmpurile de formular, meniurile etc.) trebuie să aibă:
- Un nume accesibil (etichetă clară pentru cititoarele de ecran),
- Un rol definit (de exemplu, „buton” sau „checkbox”),
- Și o valoare actualizabilă, dacă este cazul (pentru componente interactive precum slider-ele sau toggle-urile).
Aceste informații trebuie să fie disponibile programatic – adică în cod, pentru a putea fi interpretate corect de tehnologiile asistive.
De ce este important?
Utilizatorii care se bazează pe cititoare de ecran sau alte tehnologii asistive trebuie să înțeleagă ce face un element și cum pot interacționa cu el. Fără aceste atribute corecte, o persoană nevăzătoare, de exemplu, ar putea să „vadă” doar o formă fără sens.
Exemple de aplicare corectă:
- Un buton personalizat făcut cu JavaScript are atributul role=”button” și aria-label=”Trimite mesaj”.
- Un slider are definită aria-valuemin, aria-valuemax și aria-valuenow.
- Etichetele câmpurilor de formular sunt asociate corect cu inputurile folosind label for sau aria-labelledby.
Ce greșeli apar frecvent?
- Componente personalizate fără roluri sau etichete.
- Elemente interactive care nu anunță modificarea valorii.
- Lipsa asocierii între eticheta vizuală și câmpul de input.
Accesibilitatea nu înseamnă doar „să arate bine pentru toți”, ci și „să se înțeleagă corect pentru toți”. Iar asta începe din cod, prin definirea clară a numelui, rolului și valorii fiecărui element.
Please follow and like us:
