Cum testați un site după WCAG, pas cu pas

Testarea unui site după WCAG înseamnă verificarea lui după criteriile de succes din Web Content Accessibility Guidelines, de obicei la nivelul AA. Niciun instrument nu face totul singur. Un test de accesibilitate de încredere combină o scanare automată cu testarea manuală făcută de o persoană cu tastatura, zoom-ul browserului și un cititor de ecran. Mai jos este rutina pe care o recomandăm magazinelor, site-urilor de servicii și agențiilor, în ordinea care găsește cele mai multe probleme cu cel mai mic efort.

Sunt informații generale, nu consultanță juridică. Testele noastre sunt o verificare automată, nu un audit complet.

Pasul 0: alegeți ce testați (eșantionarea)

Rareori testați fiecare pagină. Metodologia W3C Website Accessibility Conformance Evaluation Methodology (WCAG-EM) descrie cinci pași: definiți domeniul, explorați site-ul, alegeți un eșantion reprezentativ, evaluați eșantionul și raportați rezultatele. Pentru eșantion combină un eșantion structurat cu câteva pagini alese aleatoriu.

Pentru un magazin online, un eșantion structurat include de obicei:

• pagina principală, o pagină de categorie, o pagină de produs, rezultatele căutării;
• fiecare pas al comenzii, de la coș până la confirmare, pentru că WCAG cere ca procesele complete să fie conforme;
• autentificarea, înregistrarea, resetarea parolei și contul de client;
• formularul de contact, paginile de ajutor și informațiile despre accesibilitate;
• pagini cu conținut special: video, hărți, configuratoare, PDF-uri de descărcat.

Notați versiunea și nivelul WCAG (de exemplu WCAG 2.2 AA), browserele și tehnologiile asistive folosite și data. Veți avea nevoie de ele pentru informațiile despre accesibilitate.

Pasul 1: scanarea automată

Începeți cu un instrument automat. Este rapid, repetabil și bun la problemele din cod: text alternativ lipsă, contrast scăzut al textului, câmpuri de formular fără etichete, butoane și linkuri fără nume, limba paginii lipsă, ARIA invalid, ținte de atingere mici.

• Testați gratuit o pagină cu WCAG checker-ul nostru sau toate paginile site-ului cu un abonament Pandus.
• Verificați paginile de după autentificare, coșul și comanda cu extensia noastră de browser.
• Alte instrumente sunt comparate în instrumente de testare a accesibilității.

Remediați mai întâi rezultatele automate. Sunt de obicei probleme de șablon: o singură corectură în temă elimină aceeași eroare de pe sute de pagini. Apoi continuați cu pașii manuali, pentru că studiile nu cad de acord asupra proporției de probleme pe care o găsește automatizarea, dar sunt de acord că nu le găsește pe toate.

Pasul 2: testul cu tastatura

Lăsați mouse-ul deoparte și folosiți doar tastatura:

Verificați că:

1. Totul funcționează cu tastatura — meniul, filtrele, opțiunile produsului, adăugarea în coș, comanda, bannerul de cookie-uri (2.1.1).
2. Focalizarea nu rămâne niciodată blocată într-un pop-up, într-un widget de chat sau într-un player încorporat (2.1.2).
3. Focalizarea este mereu vizibilă (2.4.7) și nu este ascunsă în spatele antetelor fixe sau al bannerelor (2.4.11).
4. Ordinea are sens și urmează ordinea vizuală (2.4.3).
5. Un link de salt sau reperele (landmarks) permit trecerea peste meniu (2.4.1).
6. Dialogurile primesc focalizarea când se deschid și o redau când se închid.

Pasul 3: zoom, reflow și spațierea textului

1. Măriți browserul la 200 %: niciun text tăiat, nimic suprapus, totul utilizabil în continuare (1.4.4).
2. Măriți la 400 % sau îngustați fereastra la 320 pixeli CSS: textul se rupe pe rânduri, nu este nevoie de derulare orizontală pentru citire (1.4.10).
3. Aplicați o spațiere a textului mai mare: nimic tăiat (1.4.12).
4. Rotiți telefonul: pagina funcționează în modul portret și peisaj.

Mai multe despre dimensiuni în dimensiunea fontului în WCAG.

Pasul 4: testul cu cititorul de ecran

Un cititor de ecran arată dacă pagina are sens fără să o vedeți. Folosiți cel puțin o combinație pe desktop și una pe mobil:

• NVDA (gratuit, Windows) cu Firefox sau Chrome;
• VoiceOver (inclus în macOS și iOS) cu Safari;
• TalkBack (inclus în Android) cu Chrome.

Urmăriți:

• un titlu al paginii cu sens și o structură a titlurilor prin care puteți sări (1.3.1);
• descrieri ale imaginilor care spun ce contează (1.1.1);
• butoane și linkuri care spun ce fac — „Adaugă în coș”, nu „Buton” (4.1.2);
• mesaje de stare, precum „Adăugat în coș” sau „3 rezultate”, anunțate fără mutarea focalizării;
• etichetele câmpurilor, câmpurile obligatorii și erorile, citite împreună cu câmpul.

Învățați mai întâi comenzile de bază: titlul următor, linkul următor, câmpul următor, citește tot. Utilizatorii de cititoare de ecran navighează cu ele, nu rând cu rând.

Pasul 5: formularele și comanda

Parcurgeți fiecare formular și faceți greșeli intenționat:

• fiecare câmp are o etichetă vizibilă, nu doar un text substituent (placeholder);
• erorile sunt descrise în text lângă câmp, cu o indicație despre cum se corectează (3.3.1);
• informațiile deja introduse nu sunt cerute din nou (3.3.7);
• autentificarea permite managerele de parole și lipirea, iar puzzle-urile au o alternativă (3.3.8);
• atributele autocomplete pentru nume, e-mail, adresă și telefon sunt setate;
• limitele de timp pot fi prelungite, iar comenzile pot fi verificate înainte de trimitere.

Pasul 6: conținut media, culoare și mișcare

• Videoclipurile au subtitrări (1.2.2); conținutul doar audio are o transcriere.
• Nimic nu redă sunet automat mai mult de trei secunde fără posibilitatea de a-l opri.
• Caruselele și animațiile pot fi puse pe pauză.
• Culoarea nu este singurul semnal pentru erori, disponibilitate sau linkuri în text.
• Textul și elementele de control au contrast suficient; verificați cazurile neclare cu verificarea contrastului.

Pasul 7: documentați și testați din nou

Notați fiecare problemă cu pagina, elementul, criteriul WCAG, o captură de ecran și o gravitate. Remediați în ordinea impactului: ce blochează o cumpărare sau o autentificare vine primul. Testați din nou după fiecare lansare, actualizare a temei sau aplicație nouă — regresiile de accesibilitate sunt frecvente după schimbări. Monitorizarea săptămânală prinde partea automatizabilă a acestora.

Când să comandați un audit de accesibilitate

Propriile teste sunt o rutină bună, dar nu sunt un audit. Luați în calcul un audit de accesibilitate profesionist când aveți nevoie de o declarație de conformitate, înainte de o lansare sau de o licitație publică, după o reclamație sau o somație ori când rezultatele sunt neclare. Un auditor testează manual toate criteriile nivelului, cu mai multe tehnologii asistive, și documentează metoda.

Întrebări frecvente

Ce este testarea WCAG?

Verificarea unui site după criteriile de succes din Web Content Accessibility Guidelines. Combină teste automate, care găsesc rapid problemele din cod, cu teste manuale făcute de o persoană cu tastatura, zoom-ul și un cititor de ecran.

Poate fi testarea WCAG complet automatizată?

Nu. Instrumentele automate găsesc doar o parte din probleme. Dacă textul alternativ are sens, dacă ordinea focalizării este logică sau dacă un mesaj de eroare este ușor de înțeles poate aprecia doar o persoană.

Cum testez accesibilitatea cu tastatura?

Lăsați mouse-ul deoparte. Deplasați-vă cu Tab și Shift+Tab, activați linkurile cu Enter și butoanele cu Enter sau Space, folosiți săgețile în meniuri și Esc pentru a închide dialogurile. Verificați că focalizarea este mereu vizibilă, urmează o ordine logică și nu rămâne niciodată blocată.

Cu ce cititor de ecran să testez?

NVDA cu Firefox sau Chrome pe Windows, VoiceOver cu Safari pe macOS și iOS și TalkBack cu Chrome pe Android. Testarea cu un cititor de ecran pe desktop și unul pe mobil găsește majoritatea problemelor.

Câte pagini trebuie să testez?

Un eșantion reprezentativ, așa cum descrie metodologia W3C WCAG-EM: pagina principală, câte o pagină din fiecare șablon, toți pașii proceselor importante, precum comanda și autentificarea, și câteva pagini alese aleatoriu.

Când am nevoie de un audit de accesibilitate profesionist?

Când aveți nevoie de o declarație de conformitate, înainte de o lansare publică sau de o licitație, după o reclamație sau o somație ori când propriile teste lasă întrebări deschise. Un audit acoperă manual toate criteriile; o verificare automată nu.

Surse

• W3C, WCAG-EM overview: https://www.w3.org/WAI/test-evaluate/conformance/wcag-em/
• W3C, Easy Checks — a first review of web accessibility: https://www.w3.org/WAI/test-evaluate/preliminary/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/