Accesibilitatea pe web: contrast, text alternativ, tastatură

Trei verificări simple prind o mare parte din problemele de accesibilitate ale unui site mic: dacă textul are destul contrast, dacă imaginile au text alternativ potrivit și dacă site-ul se poate folosi doar cu tastatura. Toate trei vin din WCAG 2.1, standardul W3C pentru accesibilitate, și le poți face singur într-o după-amiază.

Contrastul: textul trebuie să se vadă

WCAG 2.1 cere un raport de contrast de cel puțin 4,5:1 între textul normal și fundal. Pentru textul mare (cam 24 px, sau 18,5 px dacă e îngroșat), pragul coboară la 3:1. Fonturile foarte subțiri au nevoie de mai mult decât minimul.

Unde greșesc cele mai multe site-uri:

• text gri deschis pe alb, ales pentru că „arată elegant”;
• text alb peste o fotografie luminoasă, fără un strat mai închis dedesubt;
• textul din câmpurile formularului (exemplul gri din căsuță), care dispare pe ecran în soare;
• butoane în culoarea brandului (galben, verde deschis) cu text alb pe ele.

Verificarea e simplă: iei culoarea textului și a fundalului și le treci printr-un verificator de contrast. Dacă nu trece, închizi textul sau fundalul, nu schimbi brandul.

Tot aici intră o regulă înrudită: culoarea nu trebuie să fie singurul semn al unei informații. Un link care se deosebește de restul textului doar prin culoare sau un câmp greșit marcat doar cu roșu scapă celor care nu deosebesc bine culorile. Adaugi o subliniere, o iconiță sau un mesaj scris.

Textul alternativ: ce spune imaginea

Textul alternativ (atributul alt) e citit cu voce tare de cititoarele de ecran și apare în locul imaginii când aceasta nu se încarcă. W3C are un arbore de decizie simplu:

Exemple pentru un restaurant: fotografia cu un fel din meniu primește „Paste cu fructe de mare și roșii cherry”, nu „imagine1.jpg” și nici „cea mai bună mâncare din oraș”. Logoul din colț, care duce la prima pagină, primește numele firmei și „prima pagină”.

Un caz frecvent: afișul unui eveniment pus ca imagine, cu data și ora scrise pe el. Fără text alternativ sau fără aceleași informații scrise pe pagină, o parte din vizitatori nu află niciodată când e evenimentul.

Tastatura: site-ul trebuie să meargă fără mouse

WCAG 2.1 cere ca toate funcțiile site-ului să poată fi folosite de la tastatură (criteriul 2.1.1, nivel A). Mai cere ca locul unde te afli să se vadă: elementul selectat trebuie să aibă un contur sau un semn vizibil (criteriul 2.4.7, nivel AA).

Testul durează cinci minute. Deschizi site-ul, lași mouse-ul deoparte și apeși Tab, apoi Enter și săgețile:

1. Vezi tot timpul unde ești? Dacă un designer a scos conturul de focus din cod, nu mai vezi nimic.
2. Poți închide bannerul de cookie-uri?
3. Poți deschide meniul și ajunge la fiecare pagină?
4. Poți completa și trimite formularul de contact?
5. Poți închide o fereastră care se deschide peste pagină (pop-up) și te întorci unde erai?
6. Ordinea în care sari prin pagină are sens, de sus în jos?

Unde te blochezi, se blochează și cine folosește doar tastatura sau un dispozitiv care o imită.

De ce te interesează și ca firmă mică

Pe lângă clienții pe care îi pierzi când nu pot citi sau folosi site-ul, mai e un motiv. Actul european privind accesibilitatea (Directiva (UE) 2019/882) se va aplica serviciilor oferite consumatorilor după 28 iunie 2025, iar printre ele sunt și serviciile de comerț electronic. Microîntreprinderile care prestează servicii (sub 10 angajați, cu cifra de afaceri sau bilanțul sub pragul din directivă) sunt scutite, dar dacă vinzi online și crești, e mai simplu să construiești corect de acum decât să refaci site-ul în 2025.

Dacă ai trecut deja prin cele 10 verificări pe telefon, adaugă testele de mai sus pe aceeași listă. Iar dacă vrei un site construit de la început cu ele în minte, vezi serviciile de web design.