Cum să ai un website accesibil pentru toată lumea? – Accesibilitate în mediul online

Context: despre accesibilitate în mediul online

La noi în țară, se discută prea puțin despre accesibilitate în mediul online. Aici, în marea de biți și pixeli, fenomenul de incluziune socială prinde contur, cel mai adesea, din întâmplare. Cum dezvolți un website accesibil, la modul real, pentru toată lumea – indiferent de capacitățile vizuale, auditive, motrice etc? Cum creezi un conținut care să faciliteze cunoașterea și obținerea de informații în mod egal pentru toți cei interesați de produsele sau serviciile companiei tale? 

„Puterea internetului este dată de universalitatea sa. Accesul tuturor persoanelor, indiferent de dizabilitățile acestora, este un aspect esențial.” – Tim Berners-Lee, inventator al World Wide Web (WWW) și director al World Wide Web Consortium (W3C).

Marile companii și platforme internaționale, precum Facebook, Youtube, Google sau WordPress, pun la dispoziția utilizatorilor o serie de instrumente menite să crească nivelul de accesibilitate a mesajelor transmise în mediul online. Uneori, obiectivele de marketing online se suprapun ca execuție tehnică pe bunele practici de accesibilizare a conținutului. Un foarte bun exemplu ar fi importanța textelor alternative în cazul imaginilor folosite pe un website. Acestea sunt relevante atât din punct de vedere SEO, cât și din perspectiva accesibilizării conținutului vizual. 

Totuși, deși uneltele există, ele sunt prea puțin valorificate. Ne-am propus să le aducem atât în atenția publicului larg, cât și a partenerilor noștri și… a noastră. Adoptarea unor noi obiceiuri și standarde necesită timp, însă primul pas constă în conștientizarea necesității lor. 

De ce să încerci să aplici principiile de accesibilizare pe website-ul afacerii tale? 

Utilizarea acestor instrumente cu intenție, în mod strategic și consecvent, poate să genereze schimbări cu dublu impact: 

• în viețile potențialilor tăi clienți…
• dar și în cifrele tale de afaceri. 

Persoanele cu deficiențe de vedere sau de auz, cei care întâmpină probleme de sănătate, fie și temporar, și nu pot naviga pe website-uri așa cum ar fi făcut-o în mod obișnuit, dar și cei care utilizează echipamente hardware, software sau chiar browsere considerate a fi nu tocmai compatibile cu norma reprezintă un public pe care afacerile din România tind să îl neglijeze. Un website de calitate înseamnă, dincolo de un aspect vizual atractiv, un website accesibil și ușor de utilizat de către toți vizitatorii săi – indiferent de cele menționate mai sus.

Avantajele pot fi înțelese de la sine. Dacă respectă principiile de accesibilitate în mediul online, website-ul afacerii tale devine mai vizibil, mai ușor de găsit (căci apare în lista rezultatelor de căutare) și, evident, devine accesibil pentru o audiență mai mare, pentru utilizatori care vor aprecia eforturile depuse de compania ta pentru a le pune la dispoziție informațiile de care au nevoie. 

Accesibilitate în mediul online: recomandări pentru un website accesibil

La nivel internațional, există o serie de recomandări cu un caracter oficial privind măsurile de accesibilitate în cazul site-urilor web, precum recomandările World Wide Web Consortium – despre care puteți citi în detaliu pe paginile Web Content Accessibility Guidelines, Web Accessibility Initiative sau Accessible Rich Internet Applications. 

La nivel național, există un Ghid pentru accesibilizarea paginilor web ale instituțiilor publice din România (linkul se deschide în browser, într-o fereastră nouă, format PDF) dezvoltat de către Ministerul Consultării Publice și Dialogului Social, în parteneriat cu Ministerul Comunicațiilor și Societății Informaționale, în conformitate cu strategiile naționale în curs de implementare. Considerăm că aceste obiective și recomandări pot fi preluate și în sectorul privat, iar dezvoltatorii de website-uri din România aplică deja o bună parte din aceste măsuri tehnice. 

Criteriile și standardele de accesibilitate sunt dinamice, acestea depinzând de tehnologia de acces disponibilă în prezent. Dincolo de aspectele tehnice, care nu sunt ușor de implementat în totalitate și reprezintă un deziderat pentru mulți creatori de site-uri web, există o serie de acțiuni ce nu implică un efort suplimentar prea mare, nici cunoștințe avansate în domeniu. Implică însă conștientizarea și implementarea lor cu intenție, în mod sistematic. 

Recomandările noastre pot fi un set minim de măsuri ce pot fi luate în considerare de către orice companie. Unele aspecte, mai tehnice, trebuie doar solicitate sau comunicate înspre echipa care se ocupă de website. Altele necesită o minimă documentare și puțin exercițiu. Majoritatea celor care administrează și publică conținut pe un website se pot familiariza cu aceste procese fără prea mari dificultăți. 

1. Heading-urile sunt importante. Asigură-te că sunt setate corespunzător! 

Conform unui sondaj de opinie realizat de către WebAIM în octombrie 2017, în rândul utilizatorilor de cititoare de ecran, în momentul în care este accesată o pagină web de dimensiuni mai mari, 67.5% dintre respondenți navighează utilizând heading-urile. 

Conform aceluiași sondaj, peste 60% dintre respondenți preferă ca pagina web să aibă un singur <h1>, în care să fie prezent titlul paginii respective sau titlul articolului – nu denumirea site-ului. După acest prim heading, este important ca textul sau conținutul principal al paginii să înceapă imediat. Fără alte elemente în plus precum titluri și linkuri înspre alte articole, fără meniuri suplimentare, fără elemente de navigare înspre alte pagini etc. Acestea îngreunează navigarea și experiența utilizatorului unui cititor de ecran. 

Dacă anumite setări au fost deja făcute, în acest sens, de către dezvoltatorul site-ului, în momentul publicării unui articol sau a unei pagini noi pe site, este important ca textul să fie formatat ca atare. Așadar, dacă deja există un H1 (Heading 1) setat corespunzător pe site, în momentul publicării unui articol, de exemplu, subtitlurile trebuie selectate și setate ca atare, ca heading-uri, nu doar formatate vizual. Uneori, se mărește fontul, se colorează sau se îngroașă textul, însă aceste măsuri au doar funcție estetică și vizuală. Din opțiunile de formatare, acolo unde ne apare standard opțiunea „Paragraf”, se va selecta în cazul subtitlurilor un H2, H3 sau H4 (în română: Subtitlu 2, Subtitlu 3 etc), în funcție de structura textului. 

Conținutul unei pagini sau al unui articol trebuie să aibă o structură clară, similară oricărui cuprins al unei cărți. Setarea subtitlurilor, pe lângă evidențierea lor din punct de vedere vizual, ajută utilizatorii să navigheze cu ușurință și eficiență pe website. 

2. Exprimă-te clar și publică textul ca text, nu ca imagine

O regulă de bază: nu înlocui textul cu imagini în care apare textul. Cel mai frecvent, această practică apare în două situații. Fie avem un text scanat sau fotografiat pe care nu avem timp sau chef să îl transcriem, așa că îl urcăm pe site ca imagine, fie am inclus toate informațiile într-un afiș sau altă formă de design grafic, pe care o găsim mai atractivă vizual.  Deși pare tentant și eficient, evită să faci aceste greșeli. Imaginile nu pot fi descifrate în totalitate de către cititoarele de ecran. La fel cum nici motoarele de căutare nu vor considera imaginea ca fiind text, iar conținutul nu va fi indexat ca atare. Dacă nu vrei să renunți la design, poți să afișezi informațiile atât ca text, cât și ca afiș sau imagine. 

Apoi, evită pe cât posibil abrevierile sau prescurtările pe care cititoarele de ecran nu le pot interpreta optim întotdeauna. Exprimarea clară, detaliată, care oferă context și se folosește de un limbaj familiar este preferabilă. 

3. Oferă fișiere accesibile pentru descărcare

Dacă dorești să pui la dispoziția utilizatorilor conținut suplimentar, în forma unor fișiere ce pot fi descărcate de pe site, recomandarea generală este ca documentele să fie într-un format doc, docx sau txt și să conțină text, nu scanări sau fotografii ale textului. În ceea ce privește fișierele xls, xlsx sau csv, ai grijă ca acestea să conțină tabele simple, cu o structură care poate fi ușor de înțeles și de parcurs. 

4. Cum să formatezi linkurile? 

În ceea ce privește linkurile, există câteva reguli simple pentru a asigura accesibilitate în mediul online. 

Bifează opțiunea pentru deschidere a linkurilor într-o nouă fereastră. Deschiderea unui link în aceeași fereastră în care utilizatorul parcurgea deja un conținut poate fi enervantă pentru cei mai mulți dintre vizitatorii unui website. Poate fi însă de-a dreptul provocatoare pentru un anumit segment din publicul tău. Revenirea la pagina precedentă, în funcție de tehnologia de acces utilizată, poate fi greoaie și poate genera confuzie în parcurgerea conținutului. Dacă linkul se deschide într-o altă fereastră, utilizatorul poate parcurge în continuare conținutul principal, având la îndemână și noua fereastră deschisă. 

Inserează linkuri pe cuvinte clare, care sunt reprezentative și când nu sunt citite în context. Nevăzătorii, de exemplu, pot naviga pe o pagină web, așa cum am discutat mai devreme, utilizându-se de heading-uri. În aceeași manieră, cu ajutorul tastei Tab, aceștia pot sări de la un link la altul pe pagină, pentru a găsi informațiile necesare. În momentul în care cititoarele de ecran ajung la un link, este important ca eticheta acestuia sau cuvintele pe care a fost inserat să aibă un sens de sine stătător și să exprime clar natura legăturii.

Evită inserarea unui link în forma lui brută. Cititoarele de ecran le vor transmite înspre utilizatori așa, indiferent de cât sunt de lungi sau dacă au sau nu sens ca text.

Cum să NU inserezi un link?
Exemplu 1: Pentru mai multe detalii despre SEO 365, click aici!
Exemplu 2: Dacă vrei să afli cum să-ți atingi obiectivele cu ajutorul cuvintelor, accesează https://seo365.ro/articole-seo/.
Acesta este un exemplu fericit, în care linkul este totuși unul scurt și la subiect. De cele mai multe ori, însă, linkurile nu vor avea această structură. De evitat așadar atât inserarea linkurilor în forma lor brută, cât și inserarea lor pe formulări vagi de tipul „click aici”, „acest articol”, „pe site-ul lor” etc. 

Cum să inserezi un link?
Exemplu 1: Accesează pagina SEO 365 pentru a afla mai multe detalii!
Exemplu 2: Dacă vrei să afli cum să-ți atingi obiectivele cu ajutorul cuvintelor, accesează articolul nostru în care discutăm despre articole SEO.

Când inserezi un link ce permite descărcarea unui fișier, specifică formatul și dimensiunea acestuia. Ai grijă să inserezi linkul inclusiv pe explicația aceasta suplimentară. Exemplu: Descarcă acest „Ghid de bune practici”, DOC, 5MB. Unele fișiere pot fi deschise în mod automat de către anumite programe, precum pot fi deschise automat și de către un plug-in al browser-ului. Specificând tipul de fișier în așa manieră încât informația să fie accesibilă tuturor utilizatorilor, le dai acestora oportunitatea de a alege cum să le gestioneze. Unii vor prefera să salveze documentele pe calculator, evitând deschiderea lor automată în browser. 

5. Oferă explicații pentru imagini și materiale video sau audio

Imaginile, filmările sau înregistrările audio pot fi unelte extrem de utile pentru a asigura o accesibilitate sporită în mediul online. Dacă sunt folosite într-o manieră inteligentă, pot aduce un plus de valoare pentru toți vizitatorii website-ului. 

Pentru hărți, grafice sau diagrame, adaugă și un text descriptiv. Acest tip de imagini oferă, de obicei, informații valoroase, uneori de natură științifică, având rolul de a susține informațiile oferite în text. Când folosești astfel de imagini, se recomandă adăugarea unui text descriptiv. De exemplu, dacă prezinți o hartă, descrie pe scurt etapele prin care se poate ajunge la locul marcat pe hartă. Dacă prezinți un grafic sau o diagramă, descrie ce reprezintă acestea, ce informații apar și care sunt posibilele concluzii. 

Adaugă atribute alt pentru imagini – fără excepție. Cum spuneam și la începutul acestui articol, adăugarea textelor alternative sau atributelor alt pentru imagini reprezintă nu doar o manieră prin care te aliniezi principiilor de accesibilitate în mediul online, ci și o manieră prin care poți respecta principiile de optimizare SEO. Atributele alt reprezintă modul tău de a-i comunica unui motor de căutare sau unui cititor de ecran despre ce este vorba în imagine. O denumire de tipul IMG_0505 nu este deloc relevantă. Prin urmare, când urci o imagine pe website, recomandarea noastră este să o redenumești încă din calculator. Apoi, ajunsă în biblioteca media de pe site, adaugă-i acel text alternativ sau atribut alt.

Dacă imaginea are rol decorativ și estetic, textul alternativ poate conține o scurtă explicație descriptivă a imaginii care să includă și cuvinte-cheie relevante din punct de vedere SEO. Dacă pe imagine sau pictogramă inserezi un link, este mai degrabă important ca atributul alt să descrie natura linkului.

Adaugă subtitrări pentru conținutul video. Dacă adaugi conținut de tip video, asigură-te că acesta are și subtitrări disponibile. Dacă realizezi chiar tu o scurtă filmare, încearcă să incluzi și realizarea subtitrărilor în proces. Mulți utilizatori consumă conținutul video având activat modul fără sunet. Subtitrările sunt utile așadar pentru un segment mare din publicul general. 

Ai un podcast? Fă scenariul acestuia disponibil și sub formă de text. Există programe de transcriere automată, dacă podcastul nu are un scenariu inițial. Poți opta pentru o variantă mai scurtă, tip rezumat, a acestuia. Sau poți transcrie întregul episod, dacă dorești ca informația să ajungă nealterată la toți vizitatorii website-ului. Nu uita să adaugi și texte descriptive ale elementelor nonverbale sau paraverbale, căci acestea completează și personalizează conținutul.

Creează conținut pe mai multe planuri. Într-o variantă ideală și provocatoare pentru orice minte creativă, orice conținut de pe un website poate fi publicat și adaptat în format diferit, ca text, imagini, filmări și înregistrări audio. Cu alte cuvinte, orice text poate fi înregistrat și audio. Orice filmare poate veni cu subtitrări. Orice podcast poate veni cu scenariul sub formă de text. Orice imagine poate fi descrisă și în cuvinte. Deși necesită mai multă implicare, creativitate și resurse, rezultatele sunt complementare și aduc un plus de valoare pentru toți vizitatorii website-ului. 

6. Renunță la melodiile de fundal redate automat

În ultimii ani, acest curent a cam dispărut, însă mai poți întâlni website-uri care te întâmpină cu o melodie de fundal redată automat. În unele cazuri, melodia sau sunetele respective pot reda fidel, într-adevăr, personalitatea sau valorile unei companii. De cele mai multe ori, însă, aceste sunete îi iau pe nepregătite pe utilizatori, îi sperie sau le perturbă activitățile. Cam toată lumea știe cât de neplăcut poate fi să accesezi un website care începe de îndată să-ți cânte într-un moment nepotrivit. Te afli, poate, într-un mijloc de transport în comun. Poate deja ascultai muzică sau un podcast. Poate ești într-un mediu unde liniștea predomină și îi deranjezi astfel pe cei din jurul tău.

Este cu atât mai neplăcut pentru cei care se folosesc de cititoare de ecran pentru a accesa un website. Melodiile și sunetele de fundal se suprapun în mod deranjant peste vocea cititorului de ecran. Astfel, navigarea și accesarea conținutului sunt considerabil îngreunate.

Dacă nu vrei să renunți cu totul la melodia de fundal de pe website-ul tău, poți să îi dezactivezi redarea automată. Astfel, vizitatorii website-ului au opțiunea de a porni singuri, dacă doresc, sunetul. Din același spectru, recomandăm ca orice tip de conținut care se mișcă, se derulează sau se actualizează în mod automat, să vină cu opțiunea pentru utilizator de a opri temporar sau permanent animația. 

7. Nu te folosi de culori și capacități senzoriale pentru a oferi explicații

Cei mai mulți dintre noi ne folosim de simțul vizual pentru a da explicații. Dacă nu suntem conștienți de această tendință, riscăm să nu fim înțeleși de persoanele cu deficiențe de vedere. Butonul albastru devine, în acest context, o explicație inutilă, nu? La fel cum acțiunea de a colora un subtitlu cu roșu sau mov va rămâne nesesizată dacă nu îl formatăm și tehnic. 

Când dorești să evidențiezi anumite elemente de pe website, nu te baza exclusiv pe culori, dimensiuni, forme sau pe poziționarea lor în pagină. Evidențiază-le tehnic și descriptiv, folosindu-te de explicații specifice. Indicații de tipul „la dreapta”, „în imaginea din stânga” sau „mai jos”, atât de uzuale în textele publicate pe website-uri, pot fi înlocuite cu explicații specifice. Menționează exact și specific textul la care faci referire. Menționează atributele alt când e vorba de imagini, subtitlurile setate sau etichetele folosite pentru linkuri. 

Culorile sunt relevante însă din aceste două perspective: 

• Contrastul între culori: un contrast puternic între culoarea textului și fundalul paginii web asigură o accesibilitate sporită pentru persoanele cu vederea slabă. Renunță la eventuale imagini de fundal care îngreunează citirea textului. 
• Relația dintre culori: alege culori care pot fi diferențiate cu ușurință unele de altele, inclusiv de către persoanele cu daltonism, de exemplu, care s-ar putea să nu distingă un text de culoare roșie pe anumite fundaluri. 

Cele mai frustrante elemente ale unui website

Sperăm că aceste informații sunt utile și pot fi puse în practică de către cei care dețin un website.  Încheiem cu o listă de elemente care ridică cele mai mari dificultăți și frustrări pentru respondenții sondajului de opinie realizat de WebAIM. În ordine, cele mai problematice elemente de pe un website sunt: 

1. Funcția CAPTCHA – cu imagini care prezintă un text pentru a verifica dacă utilizatorul este o persoană;
2. Pagini sau elemente de pe pagină care se modifică în mod neașteptat;
3. Linkuri sau butoane care nu au sens;
4. Prezența unui conținut de tip Flash inaccesibil;
5. Lipsa accesibilității pentru tastatură;
6. Formulare prea complexe sau dificile;
7. Imagini care nu au descrieri sau ale căror descrieri sunt necorespunzătoare;
8. Subtitluri absente sau necorespunzătoare;
9. Prea multe linkuri sau elemente de navigare;
10. Tabele prea complicate;
11. Opțiune de căutare inaccesibilă sau nefuncțională;
12. Absența linkurilor care te sar la conținutul principal sau care te sar peste elementele de navigare. 

Idei și surse bibliografice:

• Pe lângă platformele internaționale și ghidurile naționale specificate în articol, ne-au ajutat câteva idei și informații găsite pe site-urile Wishdesk și Dreamhost.
• De departe, cel mai complet articol în limba română pe care l-am găsit este articolul publicat pe Kosson.ro articol pe care îl recomandăm și care, deși are ceva vechime (anul 2014), include informații relevante din punct de vedere tehnic pentru cei care creează website-uri.
• Fotografie realizată de Sigmund pe Unsplash.

Dacă îți dorești un website care să vină cu adevărat în întâmpinarea potențialilor tăi clienți, contactează-ne cu încredere. Specialiștii noștri oferă CONSULTANȚĂ GRATUITĂ pentru a-ți prezenta, personalizat, care sunt cele mai eficiente strategii de marketing online la ora actuală!