Peste 1.3 miliarde de oameni suferă din cauza unei dizabilități – astfel aproximativ 16% din populația lumii suferă de o formă de dizabilitate. Asta înseamnă că mai mult de un miliard de persoane nu se pot bucura de o experiență online construită pentru nevoile lor.
Dacă brand-urile nu au considerat asta o prioritate la început, trend-ul a început să se schimbe drastic tocmai pentru a implementa principii de incluziune ce oferă acces persoanelor cu dizabilități la experiențe online care nu mai sunt limitative.
Ghidul de accesibilitate pentru conținut web (WCAG 2.2) este o prevedere care încearcă să extindă accesul persoanelor cu dizabilități în mediul digital. Aceste prevederi încep să se restrângă și legal precum se poate observa și prin Actul Americani cu Dizabilități (Americans with Disabilities Act) creat în cadrul Departamentului Drepturilor Civile din cadrul Departamentului de Justiție al Statelor Unite ale Americii.
Pentru Uniunea Europeană directiva poartă denumirea ”Web Accesibility Directive” și obligă toate sectoarele publice din UE să își facă website-urile și aplicațiile mai accesibile.
Ce înseamnă accesibilitatea din punct de vedere al design-ului?
TOTUL mai MARE
Deficiențele de vedere sunt principala afecțiune care afectează navigarea unui site. Claritatea mai mare în vizualuri poate remedia experiența online a acestor utilizatori.
Conform standardelor WCAG 2.2 o mărime minimă care nu este de fapt “minimă” i-ar ajuta să citească mai ușor textul, iar un contrast puternic va evidenția mai bine informația.
Asistență text to speech
Pentru persoanele cu deficiențe grave de vedere există opțiunea de tehnologii asistate: tablete în Braille sau opțiunile de text to speech care lecturează conținutul site-ului pentru utilizatorii nevăzători.
Cele mai folosite două soft-uri sunt în acest moment NVDA (NonVisual Desktop Access) și JAWS (Jobs Access With Speech), deci este recomandat ca implementarea design-ului și lectura conținutului să fie testată și adaptată pentru aceste două aplicații, iar navigarea verificată înainte de lansarea site-ului.
Contrast
Contrastul pe care îl cunoaștem noi este relativ dacă luăm în considerare că nu toată lumea percepe culoarea în același mod: peste 300 de milioane de oameni suferă de o formă de daltonism – astfel diferențierea prin culoare nu este tot timpul suficientă pentru o experiență online accesibilă.
Recomandări accesibilitate în design
Standardul WCAG 2.2 recomandă ca elmentele construite să fie spațiate corect și să nu se suprapună, pentru a se putea interacționa corect cu ele.
- Spațiul dintre icon-uri/elemente/butoane să fie de cel puțin 4 pixeli. Există situații în care utilizatorul poate accesa un buton alăturat din greșeală. Astfel, poziționând elementele la o distanță generoasă asigurăm o accesare mai ușoară pentru utilizatori în general.Mai multe modalități de a ajunge de pe o pagină pe alta, butoane clare, similar, pentru a fi distinctive de restul informațiilor și să testăm ca pagina să poată fi parcursă ușor fără un mouse.
În cazul navigării unui website cu mai multe pagini interne este recomandată integrarea navigării prin “breadcrumbs” pentru a ajuta o mai bună integrare a navigării și înțelegerii locației în site de către utilizatori.
- Butoanele sau secțiunile pe care poate da click un utilizator trebuie să aibă o dimensiune minimă de 24×24 CSS pixeli. Astfel, zona este mult mai ușor de accesat. În design se poate acorda atenție ca butoanele să nu fie de dimensiuni mici în pagină.
- În cazurile în care avem secțiune de FAQ sau chatbox, orice fel de asistență în cadrul website-ului. Când este construită paginația trebuie să se respecte poziția secțiuni de FAQ sau chiar a unui număr de telefon în toate paginile următoare. Aceste mecanisme de ajutor vor fi ușor de observat de către utilizator și va face o parcurgere mai ușoară a acțiunilor în website.
Acest lucru poate fi respectat și între elementele grafice, componentele, fundal din website. Informațiile trebuie să fie la îndemână: în construcția paginii ne asigurăm că există mai multe căi prin care utilizatorul ajunge la diferite informații din site. Ce poate fi adăugat?
- Să existe o bară de search în header (astfel poate rămâne vizibilă în toate paginile).
- Să existe breadcrumbs (sunt în special de ajutor în website-urile de tip magazine online).
- Să existe o secțiune la finalul paginii unde este adăugat conținut asemănător/conținut relevant cu pagina în care se află utilizatorul.
- Contrast potrivit de culoare pentru text, icon-uri și fundal. Un contrast minim de culoare trebuie să se încadreze într-un raport de 3:1.Un text dintr-un paragraf și fundal trebuie să aibă contrastul de 4.5:1, având în vedere detaliile caracterelor, acesta are nevoie să fie lizibil.
Iar un text pentru titlu/subtitlu cu o dimensiune de peste 14 puncte se poate încadra în 3:1.
- Nu este recomandat să fie utilizat text relevant/informațional sub formă de imagine. Excepțiile fiind evident logo-urile sau elemente de branding.
- Când utilizăm o imagine care conține și text trebuie clarificat mesajul/conținutul pe care îl transmite imaginea.
- De limitat utilizarea acestor imagini atunci când utilizatorul poate ajusta dimensiunea fontului, spațierea etc., astfel încât să corespundă nevoilor lui și să le poată citi (să existe o coerență/logică în paragraf).
- Dacă există o imagine care include text, trebuie adăugat text ALT sau o descriere lângă imagine.
- Nu separăm informația numai prin culoare. Bineînțeles, distincția dintre elemente prin culoare este binevenită, însă această modalitate nu poate fi singura din design-ul website-ului – deoarece nu va fi o soluție evidentă pentru toți utilizatorii.
În pagină trebuie să existe multiple soluții prin care o persoană primește aceeași informație.
De exemplu – lângă butoanele roșii de anulare comandă să existe și o descriere alăturată sau instrucțiuni pentru pașii viitori sau un icon care sugerează acțiunea respectivă.
Un alt exemplu ar fi ca un grafic să fie separat prin culoare, text, dimensiuni, formă și/sau pattern/textură. Există cazul în care avem un link în cadrul unui paragraf – secțiunea respectivă de text va ieși în evidență și prin culoare și prin greutatea fontului sau prin sublinierea textului.
- În construcția unui formular de contact nu ar trebui să mai fie poziționat un text de tip etichetă/titlu descriptiv/label (cum sunt „Nume” „Telefon” „E-mail”) în casetă ca text de tip placeholder.Eticheta va dispărea atunci când într-un câmp din formular este adăugat text și va deveni greu de urmărit ce anume trebuie completat.
Persoanele care folosesc cititoare de ecran navighează de obicei printr-un formular folosind tasta „Tab” pentru a trece prin câmpurile formularului – câmpurile care nu dețin acest label(etichetă) nu vor mai fi citite și nici completate.
- Indicatori pentru parcurgerea ușoară în website (focus indicators): aceste elemente ajută persoanele care folosesc doar tastatura pentru a naviga. Prin semnalizarea unui element, utilizatorul știe unde mai exact se află în pagină.
Elemente care pot fi semnalizate sunt: link-uri, tab-uri, formulare, butoane, pagini din meniu. Ele pot fi semnalizate prin sublinierea elementelor, prin schimbarea culorii de fundal, prin adăugarea unui contur, prin modificarea unei culori etc. – important este să respecte unitatea vizuală, brand-ul și să fie ușor de observat pe lângă restul informației.
Imagini: cum le poți vedea ca nevăzător?
O mare parte din imagini cu sau fără text ajung pe internet într-o formă sau alta, fie că sunt bannere, ad-uri, imagini descriptive pentru un text sau în altă formă.
Dar cum ar putea o persoană cu deficiențe vizuale să înțeleagă sau să interacționeze cu această imagine? Dacă stăm să ne gândim, soluția este destul de simplă: putem descrie clar imaginea.
Pentru standardul WCAG 2.2 intervine ideea de “ALT”, un mod bun de a introduce o descriere bună asupra imaginii. Există un număr foarte mare care folosesc hardware și software pentru text-to-speech, iar o descriere bună a imaginii ar fi foarte benefică pentru ei.
Un exemplu de urmat poate fi website-ul Federației Naționale a nevăzătorilor din Statele Unite care abordează această soluție pentru audiența pentru care site-ul este creat.
La fel și butoanele sau imaginile care trimit pe o altă pagină internă sau externă ar trebui să aibă un hyperlink concret cu o denumire clară pentru a fi anticipate acțiunea și destinația acestora, la fel și informația prin care se determină dacă accesul se face în aceeași pagină sau o pagină nouă, dacă este un link intern al site-ului sau unul extern.
Videoclipuri: ghid de bune practici pentru nevăzători
Dar în cazul unui video? Ce facem dacă utilizatorul suferă de deficiențe de auz?
Cea mai concretă soluție ar fi evident, subtitrări clare care să se axeze atât pe interpretarea dialogului dar și pe redarea altor sunete adiacente.
Putem merge un pas mai departe prin incorporarea a cât mai multe traduceri pentru a integra în nivelul de accesibilitate un număr cât mai divers de vorbitori a mai multor limbi, nu numai o grupă. Astfel putem extinde nivelul de accesibilitate a informației relatate în videoclip.
Există și posibilitatea implementării unui transcript în cazul documentelor audio, pentru a putea fi interpretate de persoanele cu dizabilități.
Concluzie
Standardul WCAG 2.2 și accesibilitatea online nu sunt numai despre respectarea unor norme sau directive.
Ele creează experiențe digitale inclusive de care se pot bucura toți utilizatorii indiferent de abilități.
De la contraste corecte la navigare intuitivă și compatibilitate cu diferite aplicații-suport, modificări aparent mici pot avea un impac enorm – accesibilitate nu este o opțiune, este o necesitate.