Verifică ordinea și vizibilitatea focusului

Folosește Tab și Shift+Tab de la începutul paginii. Ordinea ar trebui să urmeze sensul conținutului, iar elementul activ să fie ușor de văzut. Încearcă meniul mobil în același fel. Butonul trebuie să transmită dacă meniul e deschis, iar la închidere focusul să revină într-un loc previzibil.

Verifică linkurile din apropierea unei bare fixe. Antetul, bannerul sau butonul flotant pot acoperi elementul care primește focus. Măsoară și zonele de atingere. WCAG 2.2 cere în general cel puțin 24 pe 24 de pixeli CSS la criteriul de nivel AA, cu excepții definite pentru spațiere și alte situații.

Dă câmpurilor etichete și erorilor o destinație

Eticheta rămâne vizibilă când începi să scrii. Pune instrucțiunea lângă câmpul care are nevoie de ea și folosește o descriere clară pentru butonul de trimitere. Pentru un câmp opțional, precizează asta acolo unde omul trebuie să aleagă. Întrebările au sens când răspunsul lor intră într-o decizie ulterioară.

Testează o adresă de email incompletă și un câmp obligatoriu gol. Mesajul explică ce s-a întâmplat și cum se repară, iar focusul sau un rezumat de erori îți permite să ajungi la câmp. Păstrează răspunsurile deja valide. Pe telefon, verifică dacă tastatura virtuală lasă eticheta și mesajul accesibile.

Controlează imaginile, contrastul și rearanjarea

Pentru un proiect vizual, textul alternativ explică informația care contează în context. Dacă imaginea este link și textul din jur îi explică destinația, evită repetarea aceleiași informații. Imaginile pur decorative pot avea text alternativ gol. Pentru o diagramă, oferă datele esențiale și în conținutul paginii.

Verifică contrastul textului peste gradient și peste fotografie în zona cea mai slabă. Pentru textul obișnuit, reperul WCAG AA este 4,5 la 1. La o lățime de 320 de pixeli CSS, urmărește dacă secțiunile, meniul și formularul se rearanjează și păstrează conținutul disponibil. Elementele cu format bidimensional pot necesita o tratare separată.

În practică

Alege un flux cu meniu, proiect și formular. Parcurge-l cu tastatura, la zoom și cu o valoare invalidă introdusă intenționat. Notează elementul, poziția și rezultatul pentru fiecare blocaj, apoi repetă traseul după corecții. Un test automat poate completa lista cu probleme de contrast sau semnificație HTML.

Surse și lecturi

Web design & dezvoltare