O analiză detaliată a primului pilon WCAG, cu reguli și sfaturi tehnice pentru un site cu adevărat incluziv.
Bun venit la prima parte a seriei noastre dedicate accesibilității web! În următoarele patru articole, vom explora în profunzime principiile WCAG (Web Content Accessibility Guidelines), cunoscute sub acronimul POUR. Acestea stau la baza creării unor experiențe digitale deschise tuturor și se traduc în: Perceptibilitate, Operabilitate, Ușurință de înțelegere și Robustete.
Astăzi, ne concentrăm pe piatra de temelie a accesibilității: Perceptibilitatea.
Ce Înseamnă ca un Site să fie Perceptibil?
Principiul Perceptibilității impune ca informația și componentele interfeței să fie prezentate utilizatorilor în moduri pe care aceștia le pot percepe prin văz, auz sau tactil. Cu alte cuvinte, conținutul nu trebuie să fie nedetectabil pentru simțurile unui utilizator. Dacă o persoană cu deficiențe de vedere nu poate accesa informația dintr-o imagine sau un utilizator cu deficiențe de auz nu poate înțelege un material video, atunci site-ul tău nu este perceptibil.
Nivelurile de Conformare WCAG
Înainte de a intra în detalii tehnice, este important să înțelegem cum sunt clasificate regulile WCAG. Pentru fiecare principiu, acestea aparțin uneia din următoarele trei categorii, care indică gradul de accesibilitate atins:
- Nivel A: Reprezintă nivelul de conformare minimă. Nerespectarea acestor reguli creează bariere semnificative pentru utilizatorii cu dizabilități.
- Nivel AA: Include toate cerințele de la Nivelul A, plus altele suplimentare. Acesta este standardul de referință pentru majoritatea legislațiilor globale, inclusiv pentru Actul European privind Accesibilitatea (EAA), oferind un grad mediu și robust de accesibilitate.
- Nivel AAA: Cel mai înalt și mai complex nivel de conformare. Include toate cerințele de la A și AA și este, de obicei, adoptat de organizații specializate sau pentru conținut destinat unui public cu nevoi specifice.
Ghid Tehnic Detaliat pentru Principiul Perceptibilității
Mai jos, am preluat și structurat regulile și sfaturile tehnice exact așa cum sunt ele definite în ghidurile oficiale, pentru a oferi un instrument practic dezvoltatorilor și creatorilor de conținut.
1.2. Furnizare de alternative text pentru orice conținut non-text
1.2.1. [AAA] Conținut non-text
- Toate imaginile și butoanele-imagini trebuie să aibă text alternativ sugestiv.
- Imaginilor de fundal le sunt preferate fundaluri generate folosind CSS. În cazul în care se folosesc imagini pentru fundal, acestea trebuie să aibă un text alternativ nul marcat explicit.
- Butoanele formularelor trebuie să aibă o valoare descriptivă.
- Intrările într-un formular trebuie să aibă etichete text descriptive.
- Conținutul multimedia trebuie să fie identificat prin text accesibil descriptiv.
- Orice frame folosit trebuie să poarte un titlu.
Ponturi:
- ARIA: Utilizați aria-label, aria-labelledby sau aria-describedby pentru a adăuga etichete sau alternative text.
- General: Pentru un grup de imagini care trebuie interpretate colectiv, se poate adăuga un alt non-nul primei imagini pentru a descrie grupul, pentru toate celelalte fiind adăugate explicit texte alternative nule.
- HTML/XHTML: Pentru creșterea accesibilității, este recomandat ca legăturile să aibă atât o reprezentare textuală, cât și una grafică. Recomandarea este să utilizați un singur element care să conțină atât textul, cât și imaginea, dar imaginea să aibă alt explicit nul.
- HTML/XHTML: Ca o variantă a cazului anterior, este posibil ca textul alternativ al imaginii să fie non-nul, în cazul în care imaginea este o iconiță care transmite un mesaj vizual. De exemplu, dacă iconița sugerează că accesarea link-ului duce la deschiderea unui fișier PDF, atunci alt al imaginii ar trebui să avertizeze utilizatorii nevăzători asupra acestui lucru.
- HTML/XHTML: Pentru elemente de tip applet, alternativa de text va fi creată atât folosind atributul alt, cât și prin furnizarea unui text în interiorul elementului applet. Ambele sunt necesare deoarece suportul oferit pentru elementul de tip applet variază între agenții de utilizare.
- HTML/XHTML: Pentru imagini folosite pe post de butoane pentru formulare, textul alternativ va fi furnizat prin intermediul atributului alt al elementului input de tip img.
- HTML/XHTML: Elemente input de tip text, checkbox, radio, file, password, precum şi elementele textarea şi select pot fi asociate cu o etichetă utilizând un element de tip label al cărui atribut for trebuie să ia aceeaşi valoare cu atributul id al elementului etichetat. Nu pot fi etichetate în acest fel elemente input de tip submit şi reset, img sau button.
- HTML/XHTML: Pentru cazurile când nu poate fi utilizat un element de tip label (fie nu este loc, fie nu are sens), se poate folosi atributul title pentru a eticheta câmpurile de interacțiune cu un formular.
- HTML/XHTML: Elementele object pot conține alternativa textuală chiar în interiorul corpului lor sau pot conține o imagine/un video care la rândul său să aibă alternativa textuală oferită prin intermediul propriului atribut alt.
1.3. Furnizarea de alternative pentru conținut media temporal
1.3.1. [A] Conținut audio (fără video) sau conținut video (fără audio)
- Orice conținut audio trebuie să fie însoțit de o transcriere augmentată de elemente descriptive (legate de elemente necesare înțelegerii).
- Orice conținut video trebuie însoțit de o descriere audio sau text.
Ponturi:
- General: Alternativa textuală pentru un podcast poate fi scenariul (dacă acesta există), îmbogățit cu descrierea elementelor sonore de fundal.
- General: Alternativa textuală pentru o prezentare ppt transformată în video fără sunet va conține atât descrierea conținutului slide-urilor, cât și eventualele animații/efecte care sunt necesare înțelegerii.
- General: Alternativa audio pentru o prezentare ppt transformată în video fără sunet va descrie conținutul slide-urilor, precum și explicații pe care prezentatorul le-a adus în sprijinul anumitor puncte de pe acele slide-uri.
- HTML/XHTML: Elemente de tip video pot fi asociate cu elemente de tip track în HTML5. Atributul src al elementului track poate specifica un fișier care conține descrierea audio a filmului sincronizată cu evenimentele din film.
1.3.2. [A] Subtitrări (preînregistrat)
- Orice conținut audio-video preînregistrat trebuie să aibă subtitrări sincronizate, cu excepția cazului în care acel conținut audio-video este el însuși o alternativă media la text (trebuie marcat ca atare).
Ponturi: - HTML/XHTML: Elementul track poate fi folosit pentru a furniza subtitrări unui element video.
1.3.3. [A] Descriere audio sau altfel de alternativă la media (preînregistrat)
- Pentru orice conținut audio-video preînregistrat trebuie să existe o alternativă - o descriere textuală (care este mai mult decât o subtitrare) sau una audio.
1.3.4. [AA] Subtitrări (live)
- Orice conținut media în direct, cu o componentă audio, trebuie însoțit de subtitrări sincronizate.
Ponturi: - General: Există servicii de traducere în timp real care pot fi folosite pentru a genera astfel de subtitrări.
1.3.5. [AA] Descriere audio (preînregistrat)
- Pentru orice conținut audio-video preînregistrat trebuie să existe posibilitatea selectării unei coloane sonore alternative, care să conțină descrierea audio a imaginilor prezentate.
1.3.6. [AAA] Limbajul semnelor (preînregistrat)
- Pentru orice conținut audio trebuie oferită și interpretarea folosind limbajul semnelor.
1.3.7. [AAA] Descriere audio extinsă (preînregistrat)
- Pentru orice conținut audio-video în care fundalul sonor nu are pauze suficient de lungi pentru a permite o descriere audio sincronizată care să fie suficient de cuprinzătoare, trebuie oferită o variantă media segmentată adecvat pentru a face loc unei descrieri audio extinse.
1.3.8. [AAA] Media alternativă (preînregistrat)
- Pentru orice conținut audio-video sau exclusiv video trebuie să fie oferită și o alternativă descriptivă (text care să poată fi citit de un cititor de ecran).
1.3.9. [AAA] Exclusiv audio (live)
- Pentru orice conținut exclusiv audio trebuie să fie oferită și o alternativă media care se bazează pe văz (subtitrări în timp real, video live cu echivalentul în limbajul semnelor etc).
1.4. Crearea de conținut adaptabil
1.4.1. [A] Informații și relații
- Marcajul semantic în codul HTML va fi folosit adecvat (pentru titluri, liste, emfaze etc.).
- Datele tabulare vor fi structurate în tabele cu titluri și sumare.
- Intrările în formulare vor fi marcate cu etichete textuale și grupate adecvat.
1.4.2. [A] Succesiune logică
- Ordinea de citire și navigare a paginii trebuie să fie logică; cititoarelor de ecran li se va oferi acces la informații privind ordinea blocurilor din pagină.
1.4.3. [A] Caracteristici senzoriale
- Instrucțiunile pentru înțelegerea și operarea conținutului trebuie să nu se bazeze pe caracteristici vizuale ale acestui conținut (e.g., „se găsește pe coloana din stânga” sau „faceți click pe pătratul roșu”).
- Instrucțiunile pentru înțelegerea și operarea conținutului trebuie să nu se bazeze pe stimuli auditivi (e.g., „așteptați semnalul sonor”).
1.5. Augmentarea percepției
1.5.1. [A] Utilizarea culorilor
- Culorile nu vor fi folosite ca mijloc unic de transmitere a informațiilor sau de administrare a interacțiunilor cu acestea.
- Pentru a distinge legăturile de restul textului, nu este suficient doar să aibă altă culoare, cu excepția cazurilor în care contrastul cu fundalul este de minim 3:1 și acțiunea de selectare sau gravitare în jurul legăturii este însoțită de apariția unui diferențiator (precum sublinierea).
1.5.2. [A] Controlul audio
- Dacă o pagină conține audio care rulează automat, trebuie puse la dispoziție mecanisme incluse în pagină prin care sunetul să poată fi oprit, suspendat, ajustat sau amuțit.
1.5.3. [AA] Contrastul minim
- Textul și imaginile textelor vor avea contrast minim de 4.5:1.
- Textul cu dimensiunea cel puțin 18 sau textul aldin cu dimensiunea cel puțin 14 va avea un contrast minim de 3:1.
- Se exceptează textul de fundal sau textul din logo-uri de la îndeplinirea acestor condiții.
1.5.4. [AA] Redimensionarea textului
- Pagina trebuie să rămână funcțională și în cazul în care este mărită până la 200% din dimensiunea inițială.
1.5.5. [AA] Imagini ale unor texte
- Dacă o informație poate fi transmisă utilizând doar text (eventual formatat), se va evita folosirea unor imagini care să conțină acel text.
- Se exceptează de la această regulă cazurile în care imaginea textului poate fi generată dinamic și individualizată pentru cerințele utilizatorului.
1.5.6. [AAA] Contrastul accentuat
- Textul și imaginile textelor vor avea un contrast minim de 7:1.
- Textul cu dimensiunea cel puțin 18 sau textul aldin cu dimensiunea cel puțin 14 va avea un contrast minim de 4.5:1.
- Se exceptează textul de fundal sau textul din logo-uri de la îndeplinirea acestor condiții.
1.5.7. [AAA] Zgomot de fundal redus sau estompat
- Zgomotul de fundal al unei conversații trebuie să nu existe sau să poată fi estompat pentru a nu cauza probleme de înțelegere a cuvintelor.
- Dacă zgomotul de fundal nu poate fi ajustat, atunci acesta trebuie să aibă un volum cu cel puțin 20 dB mai redus decât cel al conversației.
1.5.8. [AAA] Prezentare vizuală
- Pentru prezentarea vizuală a blocurilor de text trebuie să existe un mecanism care să permită ajustarea astfel încât următoarele reguli să fie respectate:
- Fundalul și culoarea textului pot fi selectate de utilizator.
- Lățimea să poată fi setată la maximum 80 de caractere pe rând.
- Alinierea textului să NU fie făcută simultan la dreapta și la stânga (justified).
- Spațierea între liniile unui paragraf trebuie să fie cel puțin 1.5, iar între paragrafe cel puțin 2.5.
- Redimensionarea textului până la 200% din dimensiunea inițială nu trebuie să introducă obligativitatea derulării orizontale a paginii.
- Fundalul și culoarea textului pot fi selectate de utilizator.
1.5.9. [AAA] Imagini ale unor texte (eliminarea excepțiilor)
- Nu se vor folosi niciodată imagini ale unor texte în locul acelor texte.
Simplificarea Perceptibilității cu Wawsome
Implementarea manuală a acestor reguli poate fi un proces laborios și predispus la erori. Wawsome este conceput pentru a automatiza și simplifica acest efort.
- AI-Powered Fixes: Platforma noastră adaugă automat texte alternative (alt-text) descriptive imaginilor și etichete ARIA esențiale, asigurând că niciun conținut non-text nu rămâne invizibil pentru tehnologiile asistive.
- Personalizare pentru Utilizator: Widget-ul Wawsome le oferă vizitatorilor controlul. Aceștia pot ajusta contrastul, culorile, spațierea și dimensiunea textului, pot activa filtre pentru daltonism sau pot alege profiluri predefinite pentru diverse nevoi, asigurând o lizibilitate optimă pentru toată lumea.
Explorați aceste funcționalități principale și multe altele, începând astăzi un trial gratuit de 7 zile!
Concluzie
Perceptibilitatea este mai mult decât o listă de cerințe tehnice; este fundamentul pe care se construiește o experiență digitală cu adevărat incluzivă. Asigurându-vă că toți utilizatorii pot percepe conținutul, deschideți ușa către o comunicare eficientă și demonstrați un angajament real față de fiecare membru al audienței dumneavoastră.
În articolul următor, vom aborda cel de-al doilea principiu WCAG: Operabilitate. Vă vom arăta cum să vă asigurați că toți utilizatorii pot naviga și interacționa cu site-ul dumneavoastră, indiferent de dispozitivul sau metoda de input pe care o folosesc.