Definiție
Un buton vizibil este un element interactiv care este ușor de identificat ca funcție activă și ușor de utilizat, indiferent de contextul vizual, dispozitivul folosit sau nivelul de experiență al utilizatorului. Vizibilitatea unui buton nu se referă doar la faptul că este „la vedere” pe ecran, ci și că are o formă, o culoare, o dimensiune și o poziție care îl fac clar diferențiat față de alte elemente și îl semnalează ca fiind un punct de acțiune.
În accesibilitatea web, butoanele trebuie să fie percepute, înțelese și folosite fără efort de către toți utilizatorii – inclusiv cei care navighează cu tastatura, cu un cititor de ecran sau în condiții vizuale dificile (oboseală oculară, ecrane mici, contrast slab).
Exemple concrete
- Un buton „Trimite” într-un formular are o culoare de fundal distinctă, text contrastant și o formă clară de buton (nu un link simplu subliniat).
- Butonul „Închide” al unui popup este poziționat previzibil (colțul dreapta sus), are o iconiță + text, și poate fi activat cu tasta Esc sau Tab → Enter.
- Pe mobil, un buton „Cumpără acum” are dimensiuni minime de 44×44 pixeli și spațiu liber în jur, pentru a preveni apăsările greșite.
Bune practici
- Asigură-te că butoanele au un contrast de cel puțin 3:1 între culoarea textului și cea a fundalului.
- Nu te baza exclusiv pe culoare pentru a semnala interactivitatea (de exemplu, un buton doar gri deschis fără contur devine invizibil pentru mulți).
- Etichetează clar fiecare buton cu un text care descrie exact ce se întâmplă („Vezi detalii”, „Salvează schimbările”, nu doar „OK”).
- Nu ascunde butoanele esențiale în hover sau după interacțiuni neașteptate (cum ar fi doar la scroll complet).
Pentru un utilizator cu deficiențe de vedere sau pentru cineva aflat într-o situație stresantă (precum completarea unui formular important), un buton prost vizibil poate însemna frustrare, abandon sau chiar blocarea accesului la o funcționalitate importantă. Vizibilitatea este, de fapt, o formă de incluziune.
