Cum testezi accesibilitatea unui site: tastatură și cititor de ecran

Cea mai bună metodă de a afla dacă un site este accesibil este să-l folosești așa cum îl folosesc oamenii cu nevoi diferite. Nu ai nevoie de un laborator: ai nevoie de o jumătate de oră, de o tastatură și, dacă vrei să mergi mai departe, de un cititor de ecran gratuit. Ghidul de mai jos te duce prin teste manuale simple, apoi prin instrumente automate și limitele lor.

Un avertisment cinstit de la început: testele de mai jos descoperă probleme, dar nu certifică nimic. Un site poate trece toate probele din acest articol și să aibă totuși bariere într-un colț pe care nu l-ai încercat. Gândește-le ca pe o igienă periodică, nu ca pe un certificat.

Ce testezi și de ce

Accesibilitatea se verifică pe mai multe direcții, pentru că oamenii folosesc site-urile în moduri foarte diferite:

• cine nu folosește mouse-ul (dizabilități motorii, mână rănită, preferință pentru tastatură) are nevoie de navigare completă cu tastatura;
• cine nu vede ecranul folosește un cititor de ecran, un program care citește cu voce tare sau transmite în braille ce se află pe pagină;
• cine vede puțin mărește pagina, schimbă culorile sau folosește lupa sistemului;
• cine are dificultăți cognitive sau de citire are nevoie de structură clară, limbaj simplu, spațiere și instrucțiuni explicite.

Dacă vrei să înțelegi criteriile după care se măsoară toate acestea, citește WCAG 2.2 explicat simplu.

Pregătirea: alege paginile și drumurile

Nu testa totul deodată. Alege 5–8 pagini sau „drumuri" reprezentative:

1. pagina de start;
2. o pagină de categorie sau de listare;
3. o pagină de produs sau de serviciu;
4. formularul de contact;
5. coșul și procesul de finalizare a comenzii (dacă ai magazin);
6. pagina de autentificare sau de cont;
7. o pagină cu conținut lung (articol, politică);
8. o pagină cu elemente speciale (hartă, galerie, video, pop-up).

Notează fiecare problemă cu: pagina, ce ai încercat să faci, ce s-a întâmplat și ce te-ai așteptat să se întâmple. Un tabel simplu cu patru coloane este suficient.

Testul 1: Navigarea cu tastatura

Este cel mai rapid și cel mai revelator test. Pune mouse-ul deoparte (chiar și fizic, ca să nu te tentezi) și navighează doar cu tastatura.

Tastele de bază

• Tab: mută focusul la următorul element interactiv (link, buton, câmp).
• Shift + Tab: înapoi.
• Enter: activează linkuri și butoane.
• Spațiu: bifează casete, apasă butoane, derulează pagina.
• Săgeți: se mișcă între opțiunile unui grup (butoane radio, meniuri, file).
• Esc: închide ferestre de dialog, meniuri, pop-up-uri.

Ce urmărești

1. Vezi mereu unde ești? Elementul selectat trebuie să aibă un contur sau o marcare vizibilă. Dacă pierzi cursorul, ai o problemă.
2. Ordinea este logică? Focusul ar trebui să urmeze ordinea vizuală: de sus în jos, de la stânga la dreapta (sau cum e firesc în limba paginii). Dacă sare în subsol și revine în antet, există o problemă de ordine.
3. Ajungi la tot? Meniuri, filtre, butoane de închidere a bannerului, glisoare, file, acordeoane: toate trebuie să poată fi atinse și folosite.
4. Există un link „Sari la conținut"? Apasă Tab imediat după încărcarea paginii. Un link de acest tip apare de obicei primul și permite să treci peste meniu.
5. Cazi într-o „capcană"? Dacă intri într-o fereastră pop-up și nu mai poți ieși cu tastatura, este o problemă gravă. Invers, când fereastra este deschisă, focusul trebuie să rămână în ea, iar după închidere să revină unde era.
6. Nu e acoperit focusul? Un banner de cookie-uri sau un antet fix poate ascunde elementul selectat. Acest caz a devenit un criteriu explicit în WCAG 2.2.
7. Fiecare acțiune are echivalent fără mouse? Dacă o listă se reordonează doar prin tragere sau un meniu apare doar la trecerea mouse-ului, trebuie să existe altă cale.

Despre ce înseamnă aceste cerințe în detaliu poți vedea și pagina navigare cu tastatura.

Testul 2: Cititorul de ecran

Un cititor de ecran transformă interfața în sunet. Nu e nevoie să devii expert; câteva minute de probă îți arată multe.

Ce cititoare poți folosi

• NVDA (gratuit, pentru Windows);
• Narrator (inclus în Windows);
• VoiceOver (inclus în macOS și iOS);
• TalkBack (inclus în Android);
• JAWS (comercial, folosit des de utilizatori profesioniști pe Windows).

Pentru o primă verificare, un cititor gratuit este suficient. Rezultatele pot diferi ușor între combinații de cititor și browser, așa că, dacă ai posibilitatea, încearcă cel puțin două.

Cum începi

1. Pornește cititorul, reduce viteza vocii la ceva confortabil și închide ochii sau oprește ecranul dacă vrei un test cinstit.
2. Navighează cu Tab și cu comenzile cititorului pentru titluri, linkuri și formulare. Majoritatea cititoarelor permit să sari de la un titlu la altul, ceea ce este exact modul în care utilizatorii „scanează" o pagină.
3. Ascultă ce spune la fiecare element.

Ce urmărești

• Titlurile au o structură logică (un h1, apoi h2, h3), iar lista de titluri ar trebui să dea o imagine a paginii.
• Linkurile au text clar. „Citește mai mult" repetat de zece ori, fără context, este inutilizabil într-o listă de linkuri. Preferă „Citește despre garanția produsului".
• Butoanele au un nume. Un buton cu doar o pictogramă (lupă, coș, X) trebuie să aibă o etichetă care se aude, de exemplu „Caută" sau „Închide".
• Imaginile informative au descriere, iar cele decorative sunt ignorate. Vezi ghidul despre text alternativ.
• Câmpurile de formular au etichete asociate. Când focusul ajunge într-un câmp, cititorul ar trebui să spună „Telefon" sau „Adresa de email", nu doar „câmp de editare".
• Erorile sunt anunțate. După o trimitere eșuată, utilizatorul trebuie să afle ce s-a întâmplat fără să caute vizual mesajul.
• Mesajele dinamice (ex. „Produs adăugat în coș") sunt anunțate fără să mute focusul.
• Meniurile și filele spun dacă sunt deschise sau închise, selectate sau neselectate.
• Limba paginii este declarată corect, altfel cititorul poate pronunța textul românesc cu reguli străine.

Dacă vrei să înțelegi tehnologiile din spatele acestor anunțuri (atributele ARIA, rolurile), vezi pagina compatibilitate screen reader.

Testul 3: Zoom, reflow și text mărit

Mulți oameni nu folosesc cititor de ecran, ci doar măresc pagina.

1. Setează zoom-ul browserului la 200%. Pagina trebuie să rămână utilizabilă, fără pierdere de conținut.
2. Mărește până la o lățime echivalentă cu 320 de pixeli CSS (cam 400% pe un monitor de laptop): conținutul trebuie să se rearanjeze pe o singură coloană, fără derulare orizontală, cu excepția unor conținuturi precum tabele mari sau hărți.
3. Schimbă dimensiunea fontului din setările browserului (doar textul). Pagina nu trebuie să se strice.
4. Verifică spațierea textului: dacă mărești distanța dintre linii, litere și cuvinte, textul nu ar trebui să dispară sau să se suprapună.

Testul 4: Contrast, culoare și mișcare

• Verifică contrastul textului cu un instrument de măsurare a contrastului. Minimul pentru nivelul AA este 4,5:1 pentru text normal și 3:1 pentru text mare. Mai multe în ghidul despre contrast și lizibilitate.
• Dezactivează culorile (sau pune ecranul pe alb-negru) și vezi dacă informația rămâne clară. Erorile, linkurile din text și starea butoanelor nu ar trebui să se bazeze doar pe culoare.
• Verifică animațiile: poți opri un carusel automat? Respectă pagina setarea sistemului „reducere mișcare"?

Testul 5: Instrumente automate

Instrumentele automate rulează sute de verificări în câteva secunde. Câteva categorii:

• extensii de browser care analizează pagina deschisă și listează probleme;
• instrumentele din browser (panourile de accesibilitate din uneltele pentru dezvoltatori), utile pentru a vedea numele și rolul unui element;
• scanere online care parcurg o adresă și raportează erori;
• teste integrate în procesul de dezvoltare, pentru echipele care publică des.

Ce găsesc bine: lipsa atributului de text alternativ, contrast insuficient la culori declarate, câmpuri fără etichetă, titluri sărite, limbă nedeclarată, ID-uri duplicate.

Limitele lor

Un instrument automat poate verifica dacă o imagine are text alternativ, dar nu dacă textul spune ceva util. Poate vedea că un buton există, dar nu că ordinea de focus are sens. Nu poate judeca dacă instrucțiunile sunt clare sau dacă un flux de plată este ușor de înțeles. Estimările despre ce procent din probleme prind astfel de instrumente variază de la sursă la sursă, așa că nu te baza pe un număr: tratează rezultatul „0 erori" ca pe un semn bun, nu ca pe o dovadă.

Un flux de lucru simplu

1. Rulează un test automat pe paginile alese și notează erorile.
2. Parcurge fiecare pagină cu tastatura.
3. Parcurge paginile-cheie cu un cititor de ecran.
4. Fă probele de zoom și contrast.
5. Prioritizează: întâi ce blochează o acțiune (buton inaccesibil, formular care nu se poate trimite), apoi ce încurcă (ordine ciudată), apoi ce e cosmetic.
6. Corectează, apoi repetă testul pe aceleași pagini.
7. Păstrează o evidență cu data, ce ai verificat și ce a rămas. Aceasta te ajută dacă vei întocmi o declarație de accesibilitate.

Greșeli frecvente

• Să te bazezi doar pe scorul unui scanner. Un „100" automat nu înseamnă un site fără bariere.
• Să testezi doar pe computer. Pe telefon apar probleme de ținte prea mici, gesturi și orientare.
• Să testezi o singură dată. Orice actualizare de temă, plugin sau conținut poate introduce regresii.
• Să ignori utilizatorii reali. Dacă ai ocazia, roagă persoane care folosesc zilnic tehnologii asistive să încerce site-ul și să-ți spună ce nu merge.
• Să corectezi simptomul, nu cauza. Dacă ascunzi un contur de focus ca „să arate mai curat", ai creat o problemă mai mare.
• Să încerci un cititor de ecran fără să înveți comenzile de bază. O primă impresie proastă poate veni din lipsa de practică, nu din site.

Întrebări frecvente

De câtă experiență am nevoie pentru a folosi un cititor de ecran?

Pentru un test de bază este suficient să înveți câteva comenzi: pornirea, oprirea, navigarea pe titluri și pe linkuri, citirea elementului curent. Nu vei avea viteza unui utilizator experimentat, dar vei observa problemele majore.

Ce fac dacă un instrument automat arată zero erori?

Înseamnă că nu a găsit erorile pe care știe să le detecteze. Continuă cu testele manuale cu tastatura, cu cititorul de ecran și cu zoom-ul.

Cât de des ar trebui să testez?

Un moment bun este după orice schimbare mare de design, de temă sau de funcționalități și, în plus, periodic, de exemplu o dată pe trimestru sau o dată la jumătate de an, pentru paginile cele mai importante.

Pot testa singur sau am nevoie de specialist?

Poți face singur o verificare de bază. Pentru o evaluare formală sau pentru situații cu implicații juridice, un auditor specializat poate oferi un raport mai complet.

Cum te ajută Leono Accessibility

Leono Accessibility include un audit de accesibilitate care ajută la identificarea problemelor frecvente din paginile WordPress, plus funcții pentru focus vizibil și ordine de citire. Auditul este un punct de plecare: completează-l cu probele manuale descrise mai sus. Mai multe despre audit și despre declarația de accesibilitate găsești la audit accesibilitate și declarație.

Concluzie

Testarea accesibilității nu este un ritual rezervat specialiștilor. Cu tastatura, un cititor de ecran gratuit, zoom-ul browserului și un instrument de contrast poți descoperi în scurt timp cele mai grave bariere. Instrumentele automate te scutesc de muncă repetitivă, dar nu înlocuiesc judecata omului. Începe mic, notează tot, corectează în ordinea impactului și repetă. Fiecare problemă rezolvată face site-ul mai ușor de folosit pentru mai mulți oameni.