Accesibilitate pentru designeri: Creează design vizual și de interacțiune incluziv

Un site web accesibil începe cu un design accesibil. Multe dintre cele mai frecvente erori de accesibilitate — contrast insuficient al culorilor, navigare neclară, layout-uri confuze, indicatori de focus lipsă — provin din decizii luate în faza de design. Odată ce codul este scris, aceste probleme sunt încorporate, iar remedierea lor necesită reproiectare, nu simple ajustări de cod.

Ca designer, ai mai multă influență asupra accesibilității decât aproape oricine altcineva din echipă. Alegerile pe care le faci privind culoarea, tipografia, spațierea, tiparele de navigare și modelele de interacțiune determină dacă milioane de utilizatori pot interacționa eficient cu produsul tău.

Contrastul culorilor

Contrastul insuficient al culorilor este una dintre cele mai răspândite probleme de accesibilitate de pe web. WCAG necesită un raport de contrast minim de 4,5:1 între text și fundalul său pentru text normal și 3:1 pentru text mare (definit ca 18pt normal sau 14pt bold). La nivel AAA, cerința crește la 7:1 pentru text normal și 4,5:1 pentru text mare.

Aceste raporturi există deoarece persoanele cu vedere slabă, ochi îmbătrâniți sau deficiențe de percepție a culorilor au nevoie de contrast suficient pentru a distinge textul de fundal. Textul gri deschis pe fundal alb poate arăta elegant într-un mockup de design, dar devine ilizibil pentru un procent semnificativ de utilizatori.

Elementele non-text au și ele cerințe de contrast. Componentele interfeței utilizatorului — butoane, câmpuri de formular, icoane, indicatori de focus — și obiectele grafice semnificative trebuie să mențină cel puțin un raport de contrast de 3:1 față de culorile adiacente. Aceasta asigură că utilizatorii pot identifica elementele interactive și înțelege grafica informațională.

Folosește instrumente de verificare a contrastului pe parcursul procesului de design, nu doar la final. Instrumente precum WebAIM Contrast Checker sau Colour Contrast Analyser îți permit să verifici rapoartele de contrast înainte de a finaliza paleta de culori.

Culoarea ca informație

Culoarea nu trebuie niciodată să fie singurul mijloc vizual de transmitere a informației. Dacă folosești roșu pentru a indica erori și verde pentru a indica succes, utilizatorii daltonici ar putea să nu poată distinge între cele două stări. Completează întotdeauna culoarea cu indicatori suplimentari — icoane, etichete text, modele sau sublinieri.

Acest lucru se aplică și linkurilor. Dacă linkurile dintr-un bloc de text diferă doar prin culoare, trebuie să îndeplinească un raport de contrast de 3:1 față de textul înconjurător sau să fie completate cu un alt indicator vizual, cum ar fi o subliniere.

Tipografie și dimensiunea textului

Tot textul de pe site-ul tău trebuie să poată fi mărit până la 200% fără pierderea conținutului sau funcționalității. Aceasta înseamnă că trebuie să proiectezi cu unități flexibile, relative, în loc de dimensiuni fixe în pixeli, și să te asiguri că layout-urile se adaptează elegant atunci când textul este mărit.

WCAG 2.2 conține și cerințe privind spațierea textului. Utilizatorii trebuie să poată ajusta înălțimea liniei la cel puțin 1,5 ori dimensiunea fontului, spațierea paragrafelor la cel puțin 2 ori dimensiunea fontului, spațierea literelor la 0,12 ori dimensiunea fontului și spațierea cuvintelor la 0,16 ori dimensiunea fontului — fără pierderea conținutului sau funcționalității.

Designul linkurilor

Linkurile trebuie să fie vizual distincte de textul înconjurător. Trebuie să fie descriptive și concise, spunând utilizatorilor ce vor găsi când urmează linkul. Nu folosi niciodată „click aici" sau „citește mai mult" ca text de link fără context suplimentar, deoarece aceste formulări sunt lipsite de sens pentru utilizatorii de cititoare de ecran care navighează prin liste de linkuri.

Navigare și consecvență

Navigarea trebuie să fie consecventă pe toate paginile site-ului. Utilizatorii care depind de navigarea prin tastatură sau de cititoarele de ecran își construiesc un model mental al structurii site-ului, iar schimbările neașteptate perturbă acel model. WCAG cere ca mecanismele de navigare care apar pe mai multe pagini să apară în aceeași ordine relativă de fiecare dată și ca componentele cu aceeași funcționalitate să fie identificate consecvent.

Indicatorii de focus

Când un utilizator navighează pe site-ul tău cu tastatura, trebuie să existe un indicator vizibil care arată ce element are în prezent focus. Acest indicator de focus trebuie să fie clar vizibil — WCAG 2.2 cere ca acesta să nu fie ascuns de alt conținut (SC 2.4.11), iar la nivel AAA, ca întregul indicator de focus și elementul focalizat să fie complet vizibile (SC 2.4.12).

Proiectează indicatorii de focus în mod deliberat. Conturul implicit al browserului este adesea insuficient sau este eliminat de resetările CSS. Proiectează un stil de focus personalizat care are contrast suficient și este vizual proeminent.

Dimensiunile țintelor tactile

Elementele interactive trebuie să fie suficient de mari pentru a fi activate fără dificultate. WCAG 2.2 cere ca țintele interactive să aibă cel puțin 24×24 pixeli CSS (SC 2.5.8), inclusiv orice spațiu alb din jurul țintei. La nivel AAA, cerința crește la 44×44 pixeli (SC 2.5.5). Aceasta beneficiază utilizatorii cu dizabilități motorii, tremurături sau dexteritate limitată, precum și oricine folosește un dispozitiv mobil într-un mediu instabil.

Designul formularelor

Formularele sunt una dintre cele mai critice zone pentru design accesibil. Fiecare câmp de formular necesită o etichetă vizibil clară care spune utilizatorului ce informație trebuie introdusă. Mesajele de eroare trebuie să fie specifice, vizibile și plasate aproape de câmpul la care se referă. Oferă instrucțiuni acolo unde este necesar și evită utilizarea exclusivă a textului substituent ca etichetă — textul substituent dispare când utilizatorul începe să scrie și are adesea contrast insuficient.

Proiectează pentru prevenirea erorilor. Oferă utilizatorilor posibilitatea de a revizui și corecta datele introduse înainte de trimitere, în special pentru acțiuni cu consecințe semnificative, cum ar fi tranzacțiile financiare sau acordurile juridice. Când sunt detectate erori, oferă sugestii clare despre cum pot fi corectate.

Mișcare și animație

Unii utilizatori experimentează convulsii, migrene sau amețeli din cauza conținutului animat sau care clipește. Nimic de pe site-ul tău nu ar trebui să clipească de mai mult de trei ori pe secundă. Oferă controale pentru a pune pe pauză, opri sau ascunde conținutul care se mișcă, clipește sau derulează mai mult de cinci secunde. Respectă setarea „prefers-reduced-motion" a sistemului de operare și oferă alternative cu mișcare redusă pentru animații.

Imagini cu text

Evită utilizarea imaginilor cu text pe site-ul tău. Textul real poate fi mărit, reformatat și citit de tehnologiile asistive. Imaginile cu text nu pot. Singurele excepții sunt logourile și situațiile în care o prezentare vizuală specifică a textului este esențială pentru informația transmisă.

Lista de verificare a designerului pentru accesibilitate

Înainte de a preda un design pentru dezvoltare, verifică: rapoartele de contrast îndeplinesc cerințele pentru tot textul și toate elementele interactive; culoarea nu este niciodată singurul indicator al informației; stările de focus sunt proiectate pentru toate elementele interactive; țintele tactile îndeplinesc cerințele de dimensiune minimă; navigarea este consecventă pe toate paginile; stările de eroare și mesajele sunt proiectate clar; textul poate fi mărit fără a deteriora layout-urile; animațiile respectă preferințele utilizatorilor; și tot conținutul non-textual are alternative text planificate.