Accesibilitatea site-ului înseamnă că îl pot folosi persoanele cu deficiențe de vedere, de auz, de motricitate sau de atenție, precum și toți cei care se află în condiții incomode: în soare puternic, cu o singură mână liberă, cu internet slab. Reperul este standardul WCAG, cu nivelurile A, AA, AAA; pentru majoritatea site-urilor, obiectivul realist este nivelul AA. Lucrurile de bază: contrastul, tastatura, etichetele, structura, textele alt.
Pe scurt
- WCAG se bazează pe patru principii (perceptibilitate, operabilitate, inteligibilitate, robustețe) și pe trei niveluri de conformitate: A, AA, AAA.
- Nivelul AA este luat cel mai des ca reper în documentele normative și în cerințele clienților.
- Baza: contrast suficient, mărirea textului, texte alt, titluri corecte, etichetele câmpurilor, funcționarea completă de la tastatură.
- Verificările automate găsesc o parte din probleme; verificarea manuală cu tastatura, cu mărirea paginii și cu un cititor de ecran le completează.
- Cerințele legii depind de țară și de domeniu, de aceea clarificați regulile actuale cu un jurist.
- Accesibilitatea se prevede în design și în șablon, pentru că a corecta un site gata este de obicei mai dificil.
Pentru cine este necesară accesibilitatea
Accesibilitatea este utilă unui cerc mai larg de oameni decât pare la prima vedere.
- Vederea: utilizatorii nevăzători și cei cu vedere slabă, persoanele cu daltonism.
- Auzul: persoanele surde și cele cu auz slab; un video fără subtitrări le rămâne inaccesibil.
- Motricitatea: controlul cu tastatura, cu vocea sau cu un comutator, tremorul mâinilor.
- Atenția și percepția: dislexia, tulburările de atenție, oboseala.
- Limitările de situație: o mână accidentată, soarele puternic, zgomotul, internetul slab, ecranul mic.
- Vârsta înaintată: fontul mic și contrastul scăzut creează dificultăți.
Pentru afacere, aceasta înseamnă un public mai larg, mai puține comenzi pierdute și comoditate pentru toți vizitatorii. O parte din cerințe coincid cu practica SEO: titluri logice, texte alt descriptive, linkuri clare. Acestea ajută motoarele de căutare să înțeleagă pagina, deși accesibilitatea nu oferă garanția pozițiilor.
Ce este WCAG: principii și niveluri
WCAG (Web Content Accessibility Guidelines) sunt recomandările internaționale ale consorțiului W3C. Sunt folosite pe larg versiunile 2.1 și 2.2; fiecare versiune nouă o completează pe cea anterioară. Cerințele sunt grupate după patru principii.
| Principiul | Ce înseamnă | Exemple de cerințe |
|---|
| Perceptibilitate | Informația poate fi percepută în moduri diferite | Texte alt, subtitrări, contrast suficient |
| Operabilitate | Interfața poate fi controlată în moduri diferite | Funcționarea de la tastatură, focus vizibil, timp suficient |
| Inteligibilitate | Textul și comportamentul site-ului sunt previzibile | Etichetele câmpurilor, erori clare, limba paginii |
| Robustețe | Conținutul funcționează în browsere și tehnologii de asistare diferite | Marcaj semantic, roluri corecte ale elementelor |
Fiecare cerință are un nivel: A – minimul de bază, AA – nivelul practic principal, AAA – cel mai înalt, aplicat de obicei la elemente separate. Pentru un site tipic de companie sau de magazin, obiectivul rezonabil este nivelul AA.
Lista de bază pentru verificare
Culoarea, contrastul și textul
- Contrastul textului obișnuit față de fundal – cel puțin 4,5 la 1, al textului mare – 3 la 1 (nivelul AA); chenarele câmpurilor și pictogramele au nevoie și ele de 3 la 1.
- Informația nu se transmite doar prin culoare: eroarea are text și o pictogramă pe lângă culoarea roșie.
- Textul se mărește până la 200 % fără pierderea conținutului; pe un ecran cu lățimea de aproximativ 320 de pixeli nu există derulare orizontală.
Tastatura și focusul
- Meniul, butoanele, formularele, ferestrele modale și sliderele se controlează cu tastele Tab, Enter, spațiu, Esc.
- Focusul curent se vede bine; chenarul de evidențiere nu se elimină fără o înlocuire de calitate.
- Un link de salt la începutul paginii duce la conținutul principal, astfel încât nu este nevoie să parcurgeți toată lista meniului.
- Ordinea focusului coincide cu ordinea vizuală.
Structura paginii
- Un singur titlu H1, apoi H2 și H3, fără salturi în ierarhie.
- Elemente semantice (header, nav, main, footer), liste, butoane pentru acțiuni și linkuri pentru navigare.
- Limba paginii este indicată prin atributul lang, iar pe un site multilingv – separat pentru fiecare versiune.
- Titlurile filelor (title) sunt unice, textele linkurilor sunt clare în afara contextului.
Imaginile, video și mișcarea
- Textul alt transmite pe scurt conținutul sau funcția imaginii; imaginile decorative au alt gol.
- Video are subtitrări, audio – transcriere; redarea automată cu sunet este dezactivată.
- Animația poate fi oprită, site-ul ține cont de setarea de sistem pentru reducerea mișcării; nu se folosesc elemente care clipesc de mai mult de trei ori pe secundă.
Formularele
- Fiecare câmp are o etichetă asociată (label); placeholder-ul se folosește pentru exemplu.
- Erorile sunt descrise prin text lângă câmp și sugerează cum se corectează.
- Atributul autocomplete îi indică browserului tipul datelor: nume, e-mail, telefon.
- Țintele de atingere sunt suficient de mari: WCAG 2.2 nivelul AA stabilește un minim de 24 pe 24 de pixeli CSS, cu anumite excepții, iar pentru deget este mai comodă o dimensiune mai mare.
Lizibilitatea textului
- Paragrafe și propoziții scurte, liste în loc de un bloc compact de text.
- Abrevieri explicate și termeni de specialitate lămuriți.
- Alinierea la stânga și un spațiu generos între rânduri.
- Linkurile sunt evidențiate prin subliniere sau printr-un alt semn, în afară de culoare.
Dispozitivele mobile
- Mărirea paginii cu degetele este permisă, site-ul funcționează în ambele orientări ale ecranului.
- Între butoane și linkuri există spații, ca să nu fie apăsat elementul vecin.
- Gesturile (glisare, tragere) au o alternativă sub formă de butoane.
- Ferestrele pop-up și bannerele nu acoperă conținutul principal și se închid cu un buton clar.
Cum verificați singuri accesibilitatea
- Parcurgeți paginile-cheie doar cu tastatura: Tab, Shift+Tab, Enter, spațiu, Esc. Focusul trebuie să fie vizibil și să nu se blocheze nicăieri.
- Măriți pagina la 200 % și deschideți site-ul pe ecranul îngust al unui telefon.
- Măsurați contrastul textului și al elementelor de interfață cu verificatorul de contrast din instrumentele pentru dezvoltatori ale browserului.
- Rulați verificările automate: Lighthouse, axe sau WAVE. Ele găsesc, de exemplu, textele alt și etichetele câmpurilor care lipsesc, dar calitatea conținutului textelor o evaluează doar omul.
- Ascultați paginile-cheie cu un cititor de ecran: NVDA sau Narrator în Windows, VoiceOver pe Mac și iPhone, TalkBack pe Android.
- Parcurgeți formularul de solicitare și plasarea comenzii, provocând intenționat erori.
- Alcătuiți lista problemelor după importanță: mai întâi ce blochează acțiunea (butonul nu este accesibil de la tastatură), apoi chestiunile de comoditate.
Accesibilitatea și legea
În multe țări, cerințele de accesibilitate sunt fixate în legi și standarde pentru sectorul public și pentru anumite servicii private. În UE se aplică Actul european privind accesibilitatea, care acoperă o serie de produse și servicii, inclusiv o parte din serviciile de comerț electronic. Cerințele, termenele și excepțiile depind de țară, de mărimea afacerii și de domeniu, iar regulile se schimbă.
Dacă clienții dumneavoastră se află în UE, clarificați cu un jurist dacă aceste cerințe se aplică afacerii dumneavoastră. Este util să aveți pe site o scurtă declarație de accesibilitate și un contact prin care se poate semnala o problemă.
Cum prevedeți accesibilitatea în proiect
- Alegeți un șablon sau un design system cu culori, fonturi și componente verificate.
- Calculați contrastul paletei înainte de începerea codării machetei.
- Adăugați cerințele de accesibilitate în caietul de sarcini și în criteriile de recepție a lucrărilor.
- Instruiți editorii: texte alt, titluri, linkuri clare, subtitrări.
- Verificați accesibilitatea după actualizările mari, după adăugarea formularelor și a widgeturilor noi.
- Widgeturile-suprapunere afișate peste site, de regulă, nu elimină cauzele problemelor din cod; mai sigur este să corectați marcajul și designul.
Greșeli tipice
- Text gri-deschis pe alb. Contrastul scăzut îngreunează citirea chiar și pentru oamenii cu vedere bună.
- Chenarul de focus eliminat. Utilizatorul tastaturii își pierde reperul pe pagină.
- Meniuri și butoane construite din elemente arbitrare. Adesea ele nu sunt accesibile de la tastatură.
- Texte alt formale. Etichete de tipul image1 sau o înșiruire de cuvinte-cheie nu explică nimic.
- Formulare fără etichete. Cititorul de ecran nu comunică ce trebuie introdus.
- Video cu redare automată și fără subtitrări. Îi deranjează pe unii și le rămâne inaccesibil altora.
- Fereastră modală care nu se închide cu tasta Esc. Utilizatorul tastaturii rămâne blocat.
- Bazarea pe un singur test automat. O notă verde încă nu garantează comoditatea.
Întrebări și răspunsuri
Este WCAG obligatoriu pentru o afacere mică?
Depinde de țară, de domeniu și de piețele pe care lucrați. Pentru multe site-uri mici, WCAG servește drept standard practic de calitate; regulile se schimbă, de aceea clarificați cerințele actuale cu un jurist.
Ce nivel WCAG să alegeți?
Pentru majoritatea site-urilor – AA. Acesta acoperă nevoile principale: contrastul, tastatura, etichetele, structura. Nivelul A este util ca primă etapă, iar nivelul AAA se aplică la elemente separate.
Este suficientă verificarea automată?
Nu, instrumentele automate găsesc doar o parte din probleme. Ele evaluează prezența atributelor, dar calitatea textului alt, logica ordinii focusului și claritatea mesajelor le verifică omul. Combinați instrumentele cu parcurgerea manuală.
Influențează accesibilitatea SEO?
O parte din practici coincid: structura titlurilor, textele alt descriptive, linkurile clare, viteza. Acestea îi ajută atât pe oameni, cât și motoarele de căutare. Accesibilitatea nu oferă o garanție directă a creșterii pozițiilor.
Ajută un widget de accesibilitate care se adaugă cu un singur rând de cod?
Astfel de suprapuneri pot adăuga funcții auxiliare, de exemplu mărirea fontului, dar de obicei nu corectează cauzele problemelor din marcaj și design. Calea mai sigură este să corectați site-ul însuși.
Concluzie
Accesibilitatea este alcătuită din practici simple: contrast suficient, funcționare completă de la tastatură, etichete pentru câmpuri, o structură logică și texte clare. Este avantajos să le prevedeți la începutul proiectului și să le verificați după fiecare actualizare. Îmbunătățirile mici dau un efect vizibil: un contrast mai mare, focusul vizibil și etichetele exacte ale câmpurilor nu necesită de obicei schimbarea întregului design. Alcătuiți o listă scurtă de corectări după prioritate și realizați-o pe etape. Nivelul AA al standardului WCAG se potrivește bine ca obiectiv pentru majoritatea site-urilor de companii și de magazine. Dacă aveți nevoie de ajutor, LightSEO poate ține cont de aceste cerințe în timpul creării unui site corporativ și poate verifica bazele tehnice ale site-ului în cadrul unui audit SEO.
Citiți și
