Cuprins

• Ce înseamnă site accesibil
• Cum accesează nevăzătorii un site web
• Lista recomandărilor
• Rezumatul recomandărilor privind accesibilitatea
• Detalii despre recomandările privind accesibilitatea

Ce înseamnă site accesibil

Un site web accesibil înseamnă un site web de calitate care poate fi utilizat de către orice persoană, indiferent ce echipament hardware sau browser foloseşte, indiferent care este limba sa nativă sau dacă el are o dizabilitate, o problemă de sănătate care îl impiedică să folosească site-ul în mod obişnuit. În acest articol nu vom intra în detalii legate de crearea unui site care să ofere conţinutul în mai multe limbi pentru a fi accesibil şi pentru cei care nu sunt vorbitori de limba română.

Oferirea unui site accesibil pentru toată lumea, inclusiv persoane cu dizabilităţi, face diferenţa între un site care eventual doar arată bine vizual şi un site de calitate din toate punctele de vedere.

Acest articol le este util specialiştilor în IT care au suficiente cunoştinţe profesionale care să le permită aplicarea recomandărilor. Nu le este util celor care nu cunosc limbajul HTML şi nici celor care folosesc o tehnologie pe care nu o stăpânesc îndeajuns de bine, cum ar fi în cazul utilizării unui CMS a cărui structură internă le este necunoscută. În România nu există o legislaţie care să impună nimănui să creeze site-uri web accesibile tuturor, nici firmelor care au contracte cu statul şi nici chiar instituţiilor statului, acest ghid fiind util doar celor care din proprie iniţiativă vor să creeze un site de calitate care le este accesibil cât mai multor persoane, nu pentru că i-ar obliga cineva.

Îmbunătăţirea accesibilităţii site-urilor oferă însă şi alte beneficii pe lângă faptul că ele vor putea fi accesate de un număr mai mare de persoane. Cu cât un site este mai accesibil pentru nevăzători, cu atât este mai prietenos şi pentru motoarele de căutare, deoarece şi robotul care analizează paginile web în mod automat foloseşte aceleaşi tehnici de preluare a datelor pe care le foloseşte şi un cititor de ecran.

Acest ghid va prezenta criteriile de accesibilitate pentru persoanele cu diverse dizabilităţi, în special pentru nevăzători şi slab văzători, deoarece această categorie are cele mai numeroase probleme legate de accesarea site-urilor web.

Există câteva seturi de recomandări oficiale cu privire la accesibilitatea site-urilor web, cum ar fi recomandările World Wide Web Consortium despre care puteţi citi în paginile Web Content Accessibility Guidelines, Web Accessibility Initiative, Accessible Rich Internet Applications sau recomandările cuprinse în aşa numita Section 500 din legislaţia americană, însă unele dintre aceste recomandări sunt fie prea generale fiind dificil de aplicat, fie prezentate într-un mod prea teoretic sau recomandă oferirea unor soluţi accesibile şi pentru tehnologii mai vechi care în practică sunt rareori folosite. Este bine totuşi să consultaţi acele recomandări dacă intenţionaţi să fiţi într-adevăr bine pregătit în ceea ce înseamnă crearea unui site web de calitate.

Este bine să vă informaţi periodic cu privire la recomandările privind accesibilitatea. Nivelul de accesibilitate oferit de browsere, sisteme de operare sau tehnologia de acces folosită de persoanele cu dizabilităţi se modifică în timp şi de aceea anumite criterii de accesibilitate necesare în prezent nu vor mai fi probabil necesare şi peste mai mulţi ani, însă este posibil să fie necesară respectarea altor criterii privind accesibilitatea. Din acest motiv am afişat data la care a fost scris acest articol.

Acest ghid le este util celor care crează site-uri web utilizând controale HTML standard sau folosesc diverse controale complexe Javascript create de către alte persoane. Nu le este foarte util celor care doresc să creeze controale complexe ei înşişi dacă doresc să se asigure că ele sunt accesibile. În acel caz este foarte utilă citirea informaţiilor despre standardul ARIA.

↑ către cuprins

Cum accesează nevăzătorii un site web

După cum am mai spus, cele mai mari probleme în accesarea site-urilor web le au nevăzătorii şi slab văzătorii care sunt nevoiţi să folosească programe speciale de acces. Voi încerca să prezint în câteva cuvinte modul în care accesează nevăzătorii un site web, pentru a vă putea face o imagine cum ar trebui să fie un site web pentru a fi accesibil şi pentru ei.

Nevăzătorii folosesc un program denumit cititor de ecran care preia informaţia textuală utilă din interfaţa grafică oferită de programe şi de sistemul de operare. Există câteva cititoare de ecran, dintre care cel mai performant şi cel mai utilizat de către nevăzătorii din întreagă lume, inclusiv din România este JAWS (Job Access With Speech). Deşi acest program este scump, se poate descărca şi instala gratuit, şi se poate folosi o perioadă nelimitată în variantă de testare, funcţionând timp de 40 de minute, după care computerul trebuie repornit pentru a funcţiona din nou. Cei care doresc pot descărca acest cititor de ecran şi pot testa singuri cât de accesibilă este o anumită pagină de web pe care au creat-o.

Cititoarele de ecran pot trimite textul către o sinteză vocală care să îl transforme în voce electronică sau către un afişaj braille care să îl afişeze în alfabetul braille. Afişajele braille sunt dispozitive hardware separate care au un cost foarte mare, aşa încât majoritatea utilizatorilor unui cititor de ecran preferă o sinteză vocală, şi datorită costurilor, şi datorită vitezei de citire mai mari. Cititoarele de ecran, inclusiv JAWS, au de obicei o sinteza vocală inclusă, astfel încât după instalarea lor nu mai este nevoie de nimic altceva pentru a face accesibil computerul. Cu alte cuvinte, diferenţa între un computer obişnuit folosit de către o persoană validă şi un computer accesibilizat pentru a putea fi utilizat de către un nevăzător este un singur program care trebuie instalat, plus o pereche de căşti.

Slab văzătorii folosesc de obicei programe de mărire a ecranului. Aceste programe oferă ca principală facilitate o lupă electronică care măreşte foarte mult o anumită parte din ecran.

Am descris mai jos cum accesează în mod practic nevăzătorii un site web pentru a vă putea face cât de cât o imagine despre problemele de accesibilitate pe care le pot întâmpina. Orice utilizator de computer îşi are propriile preferinţe şi mod de lucru şi este la fel şi în cazul nevăzătorilor, aceasta fiind deci o descriere orientativă.

Pentru a accesa un anumit site web, primii paşi pe care îi face un nevăzător sunt similari cu cei pe care îi face şi o persoană validă. Mai întâi deschide browserul, apăsând enter pe pictograma de pe desktop, sau din Start Menu, sau folosind o combinaţie de taste configurată anterior. Apoi scrie în address bar adresa paginii dorite şi apasă enter, sau caută ceva cu motorul de căutare Google şi de acolo accesează pagina respectivă. Notă: Conform rezultatelor sondajului de opinie privind accesibilitatea făcut pe site-ul webaim.org, majoritatea nevăzătorilor preferă să utilizeze Internet Explorer, deoarece acest browser oferă cel mai bun nivel de accesibilitate.

Din acest moment încep diferenţele. În timp ce persoanele valide pot utiliza un mouse şi pot face click pe orice element care apare pe pagina web chiar dacă pagina nu s-a încărcat în întregime, nevăzătorii pot accesa pagina web doar cu ajutorul tastaturii.

În editoarele de text native ca MS Word există un cursor care poate fi manipulat cu ajutorul tastaturii, cititorul de ecran citind linia curentă dacă acest cursor este mutat pe linia următoare sau linia anterioară, sau poate citi textul cuvânt cu cuvânt dacă se sare de la un cuvânt la altul cu Control+tastele săgeţi, sau poate citi literă cu literă dacă cursorul este manipulat utilizând doar tastele săgeţi stânga-dreapta. Într-un browser web nu există în mod obişnuit un cursor deoarece nu se poate scrie într-o pagină web în mod direct. Din acest motiv, cititorul de ecran JAWS crează în memorie o imagine a paginii web cu toate elementele ei aşa cum sunt ele organizate în Document Object Model (DOM), oferind un cursor virtual cu care se poate accesa conţinutul paginii aproximativ ca într-un editor de text. În plus, cititorul de ecran mai oferă multe combinaţii de taste cu care se poate sări la un tabel, listă, imagine, link, câmp de formular, frame, heading, element div sau span, landmark, sau se poate genera o lista cu toate elementele de un anumit tip care se pot accesa pe pagina curentă.

Iată mai jos care sunt principalele taste şi combinaţii de taste care pot fi utilizate de către nevăzătorii care folosesc cititorul de ecran JAWS pentru a putea accesa o pagină web. Le puteţi folosi pentru a testa accesibilitatea site-ului dumneavoastră. Notă: Unele dintre aceste combinaţii de taste funcţionează doar atunci când utilizaţi o tastatură standard. Dacă utilizaţi un laptop există alte combinaţii de taste mai potrivite pentru tastatura laptopului. Dacă nu intenţionaţi să utilizaţi cititorul de ecran JAWS pentru a verifica accesibilitatea unui site, puteţi sări peste detaliile despre combinaţiile de taste care pot fi utilizate.

Tastele săgeţi sus-jos

Cu ajutorul acestor taste se pot trece în revistă toate elementele de pe pagină în ordinea în care apar în codul HTML şi se poate citi linie cu linie întreg conţinutul paginii. Dacă într-o linie de text apar unul sau mai multe linkuri, fiecare link va fi citit separat când se apasă una dintre aceste taste, ca şi când fiecare link s-ar afla singur pe un rând, ceea ce uşurează utilizarea lui. Înainte de a citi eticheta unui link, cititorul de ecran JAWS citeşte textul "link" anunţând astfel ca acea etichetă este un link, nu un simplu text, informându-i pe nevăzători că îl pot accesa apăsând tasta Enter sau tasta Spaţiu. Dacă la apăsarea tastelor săgeată sus sau jos cursorul virtual va ajunge la o imagine, se va citi textul "image" urmat de conţinutul atributului alt care a fost definit pentru acea imagine. Dacă cursorul virtual va ajunge la un tabel cu date, se va citi textul "table" urmat de o informaţie privind numărul de linii şi de coloane ale tabelului, nevăzătorii ştiind că vor putea începe să folosească acolo combinaţiile de taste pentru navigarea în tabel. Dacă cursorul virtual va întâlni o listă cu elemente, va citi textul "list" şi va spune numărul de elemente ale acelei liste sau dacă va întâlni un heading, înainte de a citi conţinutul său va citi un text de genul "heading level 2", unde 2 este nivelul headingului respectiv. Dacă cursorul virtual va întâlni un frame, fie un frame standard sau iframe, va citi textul "frame" împreună cu titlul frame-ului respectiv. Dacă cursorul virtual va întâlni sfârşitul unui tabel, listă, frame... va citi un text de genul "table end", "frame end", "list end".

Tastele săgeţi stânga-dreapta

Aceste taste se pot folosi pentru a citi întreg textul paginii literă cu literă. Acest lucru poate fi foarte util în cazul unor termeni sau nume care nu se pot înţelege uşor la o citire linie cu linie sau cuvânt cu cuvânt.

Control+săgeţi sus-jos

Cu aceste combinaţii se poate sări de la un paragraf la altul, la fiecare apăsare de taste fiind citit paragraful anterior sau următor.

Control+săgeţi stânga-dreapta

Cu aceste combinaţii se poate sări de la un cuvânt la altul, la fiecare apăsare de taste fiind citit cuvântul anterior sau următor.

Insert+Săgeată în jos

Cu această combinaţie de taste cititorul de ecran JAWS începe să citească întreg conţinutul paginii web din locul în care se află cursorul virtual până la sfârşitul paginii.

Control

Cu ajutorul acestei taste se poate opri în orice moment citirea textului de către cititorul de ecran.

Tab sau Shift+Tab

Se poate folosi pentru a sări la următorul sau la anteriorul element activ din pagină. Elementele active standard sunt linkurile, butoanele si câmpurile de formular. Cu această tastă se va putea sări şi la alte elemente care au definit atributul tabindex cum este de obicei cazul controalelor complexe create cu Javascript. Când se apasă această tastă se muta şi cursorul virtual şi este citită şi eticheta linkului, butonului sau a elementului de formular.

Litera H sau Shift+H

Se poate folosi pentru a sări la următorul sau anteriorul heading, indiferent de nivelul lui. Textul headingului respectiv este citit în mod automat.

Litera T sau Shift+T

Se poate folosi pentru a sări la următorul sau anteriorul tabel. Numărul de linii şi coloane ale tabelului sunt citite în mod automat.

Litera L sau Shift+L

Se poate folosi pentru a sări la următoarea sau anterioara listă. Se va citi automat numărul de elemente ale listei.

Litera M sau Shift+M

Se va folosi pentru a sări la următorul sau anteriorul frame. Se va citi automat titlul respectivului frame.

Litera F sau Shift+F

Se va folosi pentru a sări la următorul sau anteriorul element de formular.

Pe lângă aceste combinaţii de taste mai există şi altele cu care se poate sări la următorul buton radio (R), următorul check box (X), următorul element dintr-o listă (I), următorul link vizitat (V), următorul link nevizitat (U), următorul câmp de editare (E) şi multe altele.

Pentru a se putea naviga într-un tabel se folosesc combinaţii de taste Control+Alt+tastele săgeţi pentru a se putea muta cursorul şi citi celulele la fel ca într-un program de calcul tabelar.

După cum aţi observat, unele dintre aceste combinaţii de taste sunt reprezentate doar de o singură literă. Pentru a putea scrie într-un formular iar literele să fie considerate simple litere şi nu comenzi pentru a muta cursorul virtual, trebuie activat aşa numitul mod formular. În mod implicit, cititorul de ecran JAWS este configurat ca atunci când se navighează cu tastele săgeată sus-jos iar cursorul virtual întâlneşte un câmp de editare, să activeze automat modul formular şi să anunţe acest lucru printr-un mesaj sonor. Dacă modul formular nu este activat în mod implicit, se poate activa în momentul în care cursorul se afla peste un câmp de editare apăsând tasta Enter sau tasta Spaţiu. Din acel moment nu se mai foloseşte cursorul virtual, ci cursorul standard denumit cursor PC, cu care se poate scrie în câmpurile de editare. Când cursorul PC este activ, se poate muta focusul de la un câmp la altul folosind tasta Tab sau Shift+Tab exact ca şi atunci când nu se foloseşte un cititor de ecran. Dacă cursorul PC este activ şi focusul se află într-un câmp de editare, formularul se poate trimite apăsând tasta Enter. Pentru a dezactiva modul formular şi deci de a utiliza din nou cursorul virtual, trebuie apăsată tasta Plus de pe blocul numeric.

Butoanele radio şi check box-urile pot fi marcate sau demarcate apăsând tasta spaţiu când aceste elemente deţin focusul şi nu este necesar ca modul formular să fie activ. Pentru a selecta un element dintr-un combo box sau listă trebuie în general apăsată doar tasta săgeata în jos după ce acest element deţine focusul şi după ce a fost activat modul formular. Uneori este însă nevoie să se folosească combinaţia de taste Alt+Săgeată în jos pentru a se afişa lista cu elemente şi apoi Alt+Săgeată în sus pentru a o închide. Pentru a selecta un element dintr-o listă sau combo box se folosesc tastele săgeţi sus-jos.

Când un nevăzător accesează o pagină cunoscută, cum este de exemplu a motorului de căutare Google, sau a unui forum frecventat, ştie care este structura respectivei pagini şi foloseşte combinaţiile de taste potrivite pentru a sări la tabelul dorit, sau formularul dorit, sau la conţinutul textual al articolelor care apar în acea pagină etc. Dacă însă este o pagină a cărei structură nu o cunoaşte încă bine, foarte mulţi nevăzători apasă tasta H pentru a muta cursorul virtual la primul heading, ştiind că paginile bine structurate afişează întotdeauna un heading, de obicei de nivelul 1, în care apare titlul paginii sau titlul articolului curent, după care speră că va începe textul respectivului articol, sau conţinutul de bază al acelei pagini. Este mai puţin plăcut dacă constată că pe pagină nu există nici un heading, sau că există o mulţime de heading-uri dar care nu reprezintă titluri sau subtitluri aşa cum ar trebui, ci doar simple texte formatate într-un mod diferit de restul textului. Conform sondajului de opinie de care am amintit, mai mult de 65% dintre respondenţi preferă să navigheze utilizând heading-urile de pe pagina web.

Există o recomandare ca la începutul paginii să se afişeze linkuri cu care se poate sări direct la începutul conţinutului paginii sau la începutul meniului ori panoului de navigare. Acele linkuri sunt utile, însă nu sunt utilizate de un număr prea mare de nevăzători, datorită faptului că din experienţă au observat că uneori acele linkuri erau doar de formă dar nu funcţionau, sau nu mutau cursorul virtual unde trebuia, sau dacă pagina era de dimensiune mai redusa iar punctul ţintă era vizibil în primul ecran cursorul nu se muta deloc, sau uneori acele linkuri pur si simplu deschideau o nouă pagina şi creau doar confuzie. De aceea, este mult mai utilizată încercarea de a sări la primul heading cu tasta H.

După ce focusul muta cursorul virtual la primul heading, nevăzătorii încep să apese de mai multe ori tasta săgeată în jos, pentru a citi pagina element cu element, unde element aici înseamnă o linie de text, sau un link, sau o celulă dintr-un tabel ori camp de formular. Aceste elemente dacă sunt citite folosind tasta săgeată în jos apar ca şi cum ar apărea unul sub altul. Este foarte neplăcut dacă după heading-ul cu titlul paginii curente sau titlul articolului curent în loc să apară conţinutul de bază al paginii sau textul articolului apar o mulţime de titluri către alte articole, diverse meniuri, elemente de navigare catre diverse pagini etc, fiindca nevăzătorul va trebui să apese uneori tasta săgeată în jos de zeci şi zeci de ori şi la un moment dat s-ar putea gândi că poate chiar a sărit cumva peste conţinutul principal al paginii, fiindcă normal ar fi ca heading-ul cu titlul paginii sau articolului curent să apară chiar înainte de text şi nu la mare distanţă. Chiar dacă o astfel de pagină web ar respecta absolut toate criteriile de accesibilitate ar fi totuşi considerată o pagină greu accesibilă, o pagină de calitate slabă. În unele cazuri o astfel de pagină este considerată de calitate slabă pentru toată lumea, nu doar pentru nevăzători, fiind neplăcut ca textul articolului sau conţinutul de bază al paginii să fie flancat şi întrerupt de o mulţime de reclame şi linkuri care să promoveze alte pagini, alte servicii, intenţia proprietarului site-ului fiind tocmai de a oferi un conţinut cât mai greu accesibil, care să necesite cât mai multe clickuri şi accesarea cât mai multor pagini.

După ce conţinutul de bază al paginii este localizat, el este accesat în funcţie de tipul lui, folosindu-se combinaţiile de taste adecvate oferite de cititorul de ecran. Nevăzătorii trebuie în continuare să poată accesa elemente din meniuri pentru a putea naviga către alte pagini, să completeze şi să trimită formulare pentru a căuta informaţii, pentru a se abona la buletine informative, pentru a contacta proprietarii site-ului etc.

↑ către cuprins

Lista recomandărilor

În acest articol am grupat criteriile de accesibilitate în funcţie de importanţa lor în două categorii. Criteriile de importanţă majoră sunt acelea care dacă nu sunt respectate pot impiedica total sau parţial accesul la un site web, iar criteriile secundare sunt acelea care dacă nu sunt respectate pot îngreuna accesul, sau pot împiedica accesul utilizatorilor care nu au cunoştinţe foarte bune privind utilizarea computerului cu tehnologia de acces aferentă. Despre criteriile de importanţă majoră am oferit mai multe detalii, iar pentru criteriile secundare am făcut doar un scurt rezumat. Am ordonat criteriile privind accesibilitatea aproximativ în funcţie de importanţa lor, primele fiind cele mai importante. Unele dintre criterii au fost grupate şi în funcţie de domeniul lor, pentru a fi mai uşor de urmărit, de exemplu recomandările legate de tabele şi cele legate de formulare apar grupate, chiar dacă de exemplu unele recomandări legate de formulare sunt mai importante decât unele recomandări legate de tabele.

Criterii de importanţă majoră

1. Nu folosiţi niciodată Captcha!
2. Afişaţi textul întotdeauna ca text, nu sub formă de imagini!
3. Oferiţi o versiune text pentru clipurile audio/video!
4. Dacă folosiţi controale Javascript, asiguraţi-vă că ele sunt accesibile pentru cititoarele de ecran!
5. Nu folosiţi niciodată sunete de fundal redate în mod implicit!
6. Oferiţi pentru descărcare fişiere cu un conţinut accesibil!
7. Descrieţi hărţile, graficele şi diagramele astfel încât ele să poată fi înţelese şi de către nevăzători!
8. Nu asociaţi anumite elemente pe ecran doar în mod vizual!
9. Folosiţi întotdeauna tabele pentru afişarea de date tabelare!
10. Nu includeţi niciodată un tabel cu date într-un alt tabel cu date!
11. Nu afişaţi titlurile coloanelor sau liniilor unui tabel într-un alt tabel!
12. Folosiţi ori titluri pentru coloane, ori pentru rânduri, ori pentru ambele în tabelele cu date!
13. Folosiţi <th> pentru titlurile liniilor şi coloanelor şi <td> pentru celulele cu date!
14. Nu includeţi titlul tabelului într-o celulă din tabel ci în <caption>!
15. Dacă folosiţi tabele pentru aranjarea paginii, folosiţi-le corect!
16. Adăugaţi întotdeauna un atribut alt pentru imagini!
17. Asociaţi întotdeauna elementele din formulare cu etichetele folosind elementul <label>!
18. Creaţi formulare care nu se trimit automat la activarea unui eveniment Javascript!
19. Creaţi elemente active care sunt deplin accesibile şi pentru cititoarele de ecran!
20. Dacă utilizaţi butoane imagine în formulare, folosiţi şi atributul alt!
21. Utilizaţi elementele <fieldset> şi <legend> pentru a grupa mai multe câmpuri asociate!
22. Nu vă bazaţi exclusiv pe diferenţele de culoare!
23. Nu oferiţi indicaţii relative de genul "la stânga", "mai jos"!
24. Mărimea caracterelor trebuie să poată fi modificată!
25. Oferiţi posibilitatea opririi conţinutului care se mişcă, derulează sau actualizează automat!
26. Utilizaţi linkuri directe care se pot deschide într-o nouă fereastră!
27. Adăugaţi cel puţin un heading pe fiecare pagină înaintea conţinutului principal!
28. Utilizaţi culori cu un contrast puternic între text şi fundal!
29. Utilizaţi linkuri cu etichete clare şi când nu sunt citite în context!

Criterii secundare

• Evitaţi să lăsaţi celule goale în liniile sau coloanele în care sunt definite titluri!
• Evitaţi tabelele cu titluri de linii şi coloane pe mai multe niveluri!
• Folosiţi atributul <abbr> în câmpurile cu titluri foarte lungi de linii sau coloane!
• Evitaţi să lăsaţi linii sau coloane în întregime goale!
• Evitaţi să utilizaţi liste care permit selecţia multiplă!
• Marcaţi corespunzător câmpurile din formular care trebuie completate obligatoriu!
• Dacă folosiţi frame-uri, adăugaţi-le atributul title!
• Oferiţi o hartă a site-ului cu linkuri directe către toate paginile importante!
• Când se afişează linkuri pentru descărcarea unor fişiere, specificaţi tipul lor în eticheta linkului!
• Asiguraţi-vă că paginile sunt valide pentru a putea fi interpretate corect şi de către cititoarele de ecran!
• Evitaţi să folosiţi noile caractere cu diacritice!
• Nu scrieţi doar cu majuscule!

↑ către cuprins

Rezumatul recomandărilor privind accesibilitatea

Nu folosiţi niciodată Captcha!

Sistemul Captcha pretinde că diferenţiază fiinţele umane de programele robot, însă nu îi consideră pe nevăzători drept fiinţe umane deoarece aceştia nu pot vedea imaginile pe care trebuie să le recunoască, deci le blochează complet accesul întotdeauna. Pentru majoritatea site-urilor sunt suficiente alte sisteme de protecţie detaliate mai jos. Chiar şi pentru site-urile cu foarte mulţi utilizatori, sistemul Captcha nu este unul infailibil şi există de asemenea mai multe metode de ocolire a lui, după cum am arătat mai jos, nefiind un motiv suficient de puternic pentru a bloca accesul nevăzătorilor.

Dacă totuşi folosiţi Captcha, utilizaţi cel puţin o versiune care oferă o variantă sonoră alternativă, ca de exemplu sistemul gratuit Google reCAPTCHA.

↑ către lista cu recomandări      ↓ către detalii

Afişaţi textul întotdeauna ca text, nu sub formă de imagini!

La fel cum cititoarele de ecran utilizate de nevăzători nu pot recunoaşte textul dintr-o imagine Captcha, nu pot să recunoască textul nici din alte imagini. Din acest motiv textul prezentat sub formă de imagine pentru a nu putea fi copiat, nu va putea fi accesibil deloc nevăzătorilor. Dacă chiar şi adresa de email de contact va fi oferită sub formă de imagine, nevăzătorii nici măcar nu vă vor putea contacta.

↑ către lista cu recomandări      ↓ către detalii

Oferiţi o versiune text pentru clipurile audio/video!

Dacă oferiţi pe site-ul dumneavoastră un clip audio/video cu un conţinut informaţional util, oferiţi respectiva informaţie şi sub formă de text, deoarece în caz contrar informaţia respectivă nu va fi accesibilă persoanelor cu deficienţe de auz.

↑ către lista cu recomandări       ↓ către detalii

Dacă folosiţi controale Javascript, asiguraţi-vă că ele sunt accesibile pentru cititoarele de ecran!

Din punctul de vedere al accesibilităţii este preferabil să utilizaţi controale HTML standard. În cazul în care folosiţi însă şi controale create cu Javascript, cum ar fi meniurile derulante, controalele de tip tab, acordeon, campuri de editare cu o listă derulantă, check box-uri sau butoane radio speciale, structuri arborescente etc, trebuie să testaţi întotdeauna dacă acestea sunt accesibile şi cu ajutorul tastaturii şi dacă sunt accesibile pentru cititoarele de ecran. Am oferit mai jos detalii despre cum se poate face testarea accesibilităţii cu ajutorul celui mai utilizat cititor de ecran.

↑ către lista cu recomandări      ↓ către detalii

Nu folosiţi niciodată sunete de fundal redate în mod implicit!

Melodiile de fundal sau sunetele activate în mod implicit îi pot deranja şi pe utilizatorii valizi atunci când nu se aşteaptă ca pagina pe care o accesează să le redea, însă nevăzătorilor le poate bloca complet accesul fiindcă nu vor mai auzi cititorul de ecran. Trebuie deci să nu utilizaţi niciodată astfel de sunete decât pe un site special destinat acestui scop, unde acestea nu vor fi o surpriză.

↑ către lista cu recomandări      ↓ către detalii

h3 id="fisiere_accesibile">Oferiţi pentru descărcare fişiere cu un conţinut accesibil!

Chiar dacă site-ul este accesibil dar se oferă pentru descărcare fişiere cu un conţinut informativ într-un format inaccesibil nevăzătorilor, în final informaţia oferită de site nu le va fi accesibilă acestora. Se recomandă să oferiţi documente în format txt, doc, sau docx care să conţină text, nu imagini scanate cu text. Se recomandă de asemenea să oferiţi fişiere xls, xlsx şi csv care să conţină tabele simple.

↑ către lista cu recomandări      ↓ către detalii

Descrieţi hărţile, graficele şi diagramele astfel încât ele să poată fi înţelese şi de către nevăzători!

Dacă pe site afişaţi informaţii prin intermediul hărţilor, graficelor şi diagramelor, ele nu vor fi deloc accesibile nevăzătorilor. În acest caz se recomandă să adăugaţi şi un text descriptiv în care să arătaţi modul în care se poate ajunge la locul descris pe hartă sau ce anume reprezintă graficul din imagine şi concluzia la care ar trebui să ajungă cei care analizează vizual respectivul grafic.

↑ către lista cu recomandări      ↓ către detalii

Nu asociaţi anumite elemente pe ecran doar în mod vizual!

Când asociaţi două sau mai multe elemente pe ecran, de exemplu un câmp de editare cu eticheta respectivului câmp, sau două grupuri de text care apar pe aceeaşi linie sau pe aceeaşi coloană, nu folosiţi doar o aranjare vizuală care să permită asocierea, ci folosiţi o asociere structurală utilizând elementele puse la dispoziţie de limbajul HTML.

↑ către lista cu recomandări      ↓ către detalii

Folosiţi întotdeauna tabele pentru afişarea de date tabelare!

Datele tabelare sunt acele date între care există diverse asocieri vizuale fiind aranjate pe linii şi coloane. Când se analizează astfel de date este întotdeauna important să poată fi determinate aceste legături pentru a putea şti ce reprezintă datele dintr-o linie sau coloană. Când astfel de date sunt analizate de către utilizatori valizi, ele pot să fie afişate oricum, fie ca tabel, fie sub formă de imagine, fie ca text preformatat în care coloanele sunt despărţite de spaţii sau alte caractere deoarece raporturile dintre datele afişate va fi evident. După cum am amintit deja, nu este suficient să se facă o asociere vizuală între date, ci este nevoie şi de o asociere structurală care în acest caz se poate face doar utilizând elementul HTML standard <table>.

↑ către lista cu recomandări      ↓ către detalii

Nu includeţi niciodată un tabel cu date într-un alt tabel cu date!

Se recomandă să nu se introducă niciodată un tabel cu date într-o celulă dintr-un alt tabel cu date, deoarece la navigarea in interiorul acestor tabele nu va fi clar dacă o celulă face parte din primul tabel sau din al doilea, fiind foarte dificil sau imposibil de înţeles structura respectivelor tabele.

↑ către lista cu recomandări      ↓ către detalii

Nu afişaţi titlurile coloanelor sau liniilor unui tabel într-un alt tabel!

Atunci când titlurile coloanelor unui tabel apar într-un tabel iar datele apar într-un alt tabel, cititoarele de ecran nu vor putea face o asociere între cele două tabele. Datele dintr-un tabel şi titlurile coloanelor şi liniilor corespunzătoare trebuie întotdeauna să apară într-un singur tabel.

↑ către lista cu recomandări      ↓ către detalii

Folosiţi ori titluri pentru coloane, ori pentru rânduri, ori pentru ambele în tabelele cu date!

Când afişaţi un tabel cu date, el trebuie întotdeauna să aibă cel puţin un set de titluri, fie pentru coloane, fie pentru rândurile tabelului, fie pentru ambele.

↑ către lista cu recomandări      ↓ către detalii

Folosiţi <th> pentru titlurile liniilor şi coloanelor şi <td> pentru celulele cu date!

În tabelele cu date celulele în care apar titlurile rândurilor şi coloanelor trebuie să fie create cu ajutorul elementului <th> iar celulele cu date cu ajutorul elementului <td> datorită faptului că ele sunt utilizate în mod diferit de cititoarele de ecran.

↑ către lista cu recomandări      ↓ către detalii

Nu includeţi titlul tabelului într-o celulă din tabel ci în <caption>!

Titlul tabelului trebuie fie să fie incluse în elementul <caption> în interiorul tabelului, fie să apară ca simplu text în afara tabelului, eventual formatat ca heading. Dacă titlul apare într-o celulă din tabel ar putea crea confuzie deoarece cititoarele de ecran ar putea să îl citească ca titlu pentru coloanele tabelului. Uneori ar putea fi evident ca este vorba despre titlul tabelului, dar ar putea fi citit de fiecare data pentru toate celulele fiind considerat titlu de coloană, ceea ce ar fi neplăcut.

↑ către lista cu recomandări      ↓ către detalii

Dacă folosiţi tabele pentru aranjarea paginii, folosiţi-le corect!

Deşi World Wide Web Consortium recomandă să nu se folosească tabele pentru formatarea paginii, ci CSS, dacă totuşi utilizaţi CSS pentru formatare şi nu pentru prezentarea de date tabelare, este recomandat să respectaţi următoarele două reguli:

• Toate elementele din tabel trebuie să aibă sens dacă sunt citite în ordinea în care apar în codul HTML, deoarece în această ordine vor fi citite când se utilizează un cititor de ecran.
• Nu utilizaţi elemente <th>, <thead>, <tbody> sau <tfoot> în tabele folosite pentru aranjarea în pagină deoarece cititoarele de ecran le vor considera tabele cu date şi ar putea citi conţinutul unor celule drept titluri pentru coloane ceea ce ar crea confuzie.

↑ către lista cu recomandări      ↓ către detalii

Adăugaţi întotdeauna un atribut alt pentru imagini!

Trebuie să adăugaţi întotdeauna un atribut alt pentru elementele <img> pentru ca ele să fie accesibile şi nevăzătorilor. Adăugarea acestui atribut este absolut necesară în cazul imaginilor care sunt etichete pentru linkuri, caz în care ele vor trebui să descrie ce face linkul, nu ce afişează imaginea. Dacă imaginile au doar un rol decorativ atributul alt trebuie să fie nul, de forma alt="".

↑ către lista cu recomandări      ↓ către detalii

Asociaţi întotdeauna elementele din formulare cu etichetele folosind elementul <label>!

Este recomandat să utilizaţi întotdeauna elementul <label> pentru a asocia un câmp de formular cu eticheta sa. Dacă nu se poate sau nu se doreşte utilizarea acestui element, este recomandabil cel puţin să se amplaseze întotdeaună eticheta în stânga câmpurilor, cu excepţia butoanelor radio şi check box-urilor la care eticheta se amplasează în dreapta. Dacă se foloseşte un element <label> însă, eticheta câmpurilor poate fi amplasată oriunde.

↑ către lista cu recomandări      ↓ către detalii

Creaţi formulare care nu se trimit automat la activarea unui eveniment Javascript!

Toate formularele trebuie să aibă un buton pentru expediere şi ele trebuie să fie expediate doar în momentul în care utilizatorul decide să le expedieze şi nu ca urmare a activării unui eveniment Javascript cum ar fi selectarea unui element dintr-un combo box.

↑ către lista cu recomandări      ↓ către detalii

Creaţi elemente active care sunt deplin accesibile şi pentru cititoarele de ecran!

Elementele active, adică acele elemente cu care utilizatorii pot acţiona cum ar fi linkurile, butoanele şi alte elemente de formular trebuie să poată fi accesate şi cu ajutorul tastaturii şi cu un cititor de ecran.

↑ către lista cu recomandări      ↓ către detalii

Dacă utilizaţi butoane imagine în formulare, folosiţi şi atributul alt!

La fel ca atunci când utilizaţi o imagine ca etichetă pentru un link, şi când folosiţi o imagine ca etichetă într-un buton pentru expedierea unui formular trebuie să specificaţi scopul acelui buton folosind atributul alt.

↑ către lista cu recomandări      ↓ către detalii

Utilizaţi elementele <fieldset> şi <legend> pentru a grupa mai multe câmpuri asociate!

Când într-un formular trebuie să grupaţi mai multe câmpuri, de exemplu mai multe butoane radio, folosiţi elementul <fieldset> pentru a le include, iar în cadrul acestui grup adăugaţi elementul <legend> cu care specificaţi ce reprezintă grupul respectiv.

↑ către lista cu recomandări      ↓ către detalii

Nu vă bazaţi exclusiv pe diferenţele de culoare!

Când anumite elemente pe pagina web trebuie evidenţiate, acest lucru nu trebuie niciodată făcut strict prin intermediul culorilor, deoarece nevăzătorii nu vor putea găsi acele elemente. Trebuie să faceţi întotdeauna şi o evidenţiere textuală.

↑ către lista cu recomandări      ↓ către detalii

Nu oferiţi indicaţii relative de genul "la stânga", "mai jos"!

Când daţi indicaţii despre poziţia anumitor elemente în cadrul paginii web, furnizaţi întotdeauna textul care trebuie căutat sau conţinutul atributului alt dacă este vorba despre o imagine şi nu poziţii relative de genul "mai la stânga" sau "mai jos" fiindcă ele nu vor putea fi găsite de către nevăzători.

↑ către lista cu recomandări      ↓ către detalii

Mărimea caracterelor trebuie să poată fi modificată!

În multe cazuri utilizatorii doresc să modifice mărimea caracterelor cu care este afişat site-ul în mod implicit, fie că s-a folosit un text foarte mic, fie că persoanele respective au probleme de vedere. Nu este neapărat necesar ca site-ul să ofere facilitatea modificării mărimii textului, însă este neapărat necesar ca această modificare să se poată face folosind opţiunile puse la dispoziţie de browsere, deoarece în caz contrar accesibilitatea este diminuată pentru anumite persoane.

↑ către lista cu recomandări      ↓ către detalii

Oferiţi posibilitatea opririi conţinutului care se mişcă, derulează sau actualizează automat!

Dacă pagina web afişează elemente care se mişcă, clipesc, derulează sau care se actualizează automat, oferiţi utilizatorilor posibilitatea de a opri temporar sau chiar permanent această animaţie.

↑ către lista cu recomandări      ↓ către detalii

Utilizaţi linkuri directe care se pot deschide într-o nouă fereastră!

Se recomandă ca toate linkurile să aibă atributul href şi acesta să conţină adresa către pagina care va fi accesată de ele. Acest lucru permite utilizatorilor să deschidă pagina curentă într-o nouă fereastră dacă doresc. Excepţie pot fi linkurile a caror scop nu este deschiderea unei pagini web, ci care execută de exemplu un apel AJAX care actualizează pagina curentă.

↑ către lista cu recomandări      ↓ către detalii

Adăugaţi cel puţin un heading pe fiecare pagină înaintea conţinutului principal!

Din punctul de vedere al accesibilităţii paginilor web, este recomandat ca fiecare pagină să conţină titlul ei definit ca heading, iar acest heading să fie amplasat chiar înainte de conţinutul de bază al paginii.

↑ către lista cu recomandări      ↓ către detalii

Utilizaţi culori cu un contrast puternic între text şi fundal!

Se recomandă să se aleagă astfel culorile textului şi fundalului paginii web încât între ele să existe un contrast suficient de puternic pentru ca textul să poată fi accesibil şi pentru persoanele cu vederea slabă. Este recomandat să nu se folosească imagini de fundal care să reducă contrastul sau care să îngreuneze citirea textului.

↑ către lista cu recomandări      ↓ către detalii

Utilizaţi linkuri cu etichete clare şi când nu sunt citite în context!

Când nevăzătorii accesează o pagină web sărind de la un link la altul cu tasta Tab, în momentul în care focusul ajunge la un link, cititorul de ecran citeşte eticheta lui. În acel moment trebuie să fie clar ce reprezintă linkul respectiv chiar fără a citi textul care apare înainte şi dupa acel link.

↑ către lista cu recomandări      ↓ către detalii

Evitaţi să lăsaţi celule goale în liniile sau coloanele în care sunt definite titluri!

Dacă într-o linie dintr-un tabel aţi definit titluri de coloană pentru respectivul tabel, folosind elementul <th>, evitaţi să lăsaţi celule libere în acea linie. De asemenea, dacă într-o coloană aţi definit titluri pentru linii, nu lăsaţi celule goale în acea coloană.

↑ către lista cu recomandări

Evitaţi tabelele cu titluri de linii şi coloane pe mai multe niveluri!

Dacă sunt marcate corespunzător, tabelele care au definite titluri de coloană pe mai multe rânduri, sau care au definite titluri de linie pe mai multe coloane sunt accesibile pentru cititoarele de ecran, însă rareori headerele care definesc titlurile respective sunt definite corect. În plus, nu toate cititoarele de ecran pot înţelege structura unor astfel de tabele. Din acest motiv, este recomandat să se evite pe cât posibil definirea unor titluri de coloană complexe, pe mai multe niveluri.

↑ către lista cu recomandări

Folosiţi atributul <abbr> în câmpurile cu titluri foarte lungi de linii sau coloane!

Dacă într-un tabel titlurile anumitor coloane sau linii sunt foarte lungi, adăugaţi în elementele care definesc acele câmpuri atributul abbr, cu o variantă mai scurtă pentru titlurile respective. În acest mod, când navighează în tabel, nevăzătorii nu vor trebui să asculte de fiecare dată titlul lung al coloanei înainte de a auzi valoarea celulei curente.

↑ către lista cu recomandări

Evitaţi să lăsaţi linii sau coloane în întregime goale!

Pentru a îmbunătăţi aspectul unui tabel se recomandă să utilizaţi CSS, nu să modificaţi structura tabelului adăugând linii şi coloane goale deoarece acestea pot crea confuzie, iar nevăzătorii vor începe să verifice dacă nu există date rând pe rând în toate celulele din aceste linii şi coloane. Indiferent dacă înălţimea unei linii este redusă foarte mult pentru a fi folosită eventual doar ca o linie cu un colorit diferit între alte linii cu date, nevăzătorii o vor vedea ca pe orice altă linie obişnuită din tabel.

↑ către lista cu recomandări

Evitaţi să utilizaţi liste care permit selecţia multiplă!

Dacă într-un formular trebuie să se ofere posibilitatea selectării mai multor elemente dintr-o listă de opţiuni, se recomandă să folosiţi check box-uri, nu liste care să permită selecţia multiplă.

↑ către lista cu recomandări

Marcaţi corespunzător câmpurile din formular care trebuie completate obligatoriu!

Dacă într-un formular anumite câmpuri trebuie completate în mod obligatoriu, ele trebuie marcate ca atare folosind atributul aria-required="true". Când un utilizator nevăzător completează un formular folosind cititorul de ecran JAWS, este activ modul formular care face ca literele tastate să fie introduse în câmpurile formularului şi nu folosite drept comenzi pentru cititorul de ecran. Când acest mod este activ, cursorul se poate muta de la un câmp la altul folosind tasta Tab sau combinaţia Shift+Tab, dar nu se poate citi ce scrie în afara elementelor din formular. Din acest motiv, chiar dacă o persoană validă poate vedea că după un câmp s-a specificat că trebuie completat în mod obligatoriu, utilizatorii nevăzători nu vor fi informaţi despre acest lucru şi ar putea omite completarea câmpului respectiv, considerând că ar putea fi opţională. Dacă însă se adaugă atributul aria-required="true" în câmpul respectiv, cititorul de ecran va anunţa că este un câmp care trebuie completat obligatoriu.

↑ către lista cu recomandări

Dacă folosiţi frame-uri, adăugaţi-le atributul title!

Dacă site-ul foloseşte frame-uri clasice sau iframe-uri, se recomandă ca ele să aibă definit atributul title fiindca cititorul de ecran va citi acest titlu în momentul în care cursorul virtual va găsi respectivul frame, fiind un bun element de orientare.

↑ către lista cu recomandări

Oferiţi o hartă a site-ului cu linkuri directe către toate paginile importante!

Alături de meniuri sau diverse linkuri folosite pentru navigarea pe site se recomandă să oferiţi şi o hartă a site-ului care să conţină linkuri directe către cele mai importante pagini ale site-ului. Acest lucru este foarte util şi pentru motoarele de căutare.

↑ către lista cu recomandări

Când se afişează linkuri pentru descărcarea unor fişiere, specificaţi tipul lor în eticheta linkului!

Când pe site se afişează linkuri către fişiere care pot fi descărcate, este bine să specificaţi tipul acestor fişiere în eticheta linkurilor, în special dacă este vorba despre fişiere care ar putea fi deschise în mod automat în anumite programe, cum este cazul fisierelor doc, docx, pdf, xls, torrent. Chiar dacă unele fişiere au o accesibilitate foarte bună când sunt deschise în programe ca MS Word, MS Excel sau Adobe Reader, ele ar putea fi chiar foarte slab accesibile când sunt deschise de către un plug-in al browserului. Din acest motiv nevăzătorii ar putea dori să evite deschiderea acelor fişiere în browser şi ar putea alege direct salvarea lor pe hard disk. De asemenea, în unele cazuri dacă un astfel de document a fost deschis în browser, este dificil sau imposibil de revenit la pagina anterioară folosind combinaţia de taste Alt+Săgeată stânga, fiind încă un motiv pentru a evita deschiderea acestor fişiere în browser.

↑ către lista cu recomandări

Asiguraţi-vă că paginile sunt valide pentru a putea fi interpretate corect şi de către cititoarele de ecran!

Pentru a avea un site de calitate este recomandat să verificaţi în ce măsură respectă recomandările World Wide Web Consortium, folosind programul de validare online gratuit din pagina validator.w3.org. Dacă un site este creat corect, există în mod implicit şanse mai mari să fie mai bine înţeles de către cititoarele de ecran.

↑ către lista cu recomandări

Evitaţi să folosiţi noile caractere cu diacritice!

Pentru nevăzători care folosesc o sinteză vocală pentru limba romană este preferabil ca textele să fie scrise cu diacritice, fiindcă atunci textul va fi citit corect. Datorită însă înlocuirii caracterelor tradiţionale cu sedilă cu cele noi cu virgulă, caractere care nu sunt disponibile în niciun set de caractere pe 8 biţi ci doar în codul Unicode, aceste noi caractere sunt imposibil de utilizat în programele care nu suportă Unicode. Cititorul de ecran JAWS are de asemenea probleme în citirea textelor scrise cu noile diacritice atunci când este folosită o sinteză vocală care nu le suportă. Din punctul de vedere al accesibilităţii cea mai bună soluţie este aceea de a scrie cu caracterele tradiţionale, cu diacritice cu sedilă, iar dacă acest lucru nu este posibil, următoarea preferinţă este de a scrie fără diacritice. Va mai trece foarte mult timp până când vor exista variante alternative pentru toate programele care nu suportă Unicode pentru a justifica utilizarea noilor caractere.

Pentru a putea scrie cu caracterele româneşti tradiţionale care sunt compatibile atât cu programele care suportă Unicode cât şi cu cele care nu suportă decât seturi de caractere pe 8 biţi, trebuie să descărcaţi şi instalaţi driverul de tastatură pentru sistemele de operare Windows Vista, Windows 7 sau alte versiuni mai noi de la adresa http://secarica.ro/html/info_winvista.html.

↑ către lista cu recomandări

Nu scrieţi doar cu majuscule!

Citirea textelor scrise exclusiv cu majuscule este mai dificilă şi pentru persoanele valide, datorită faptului că recunoaşterea textului se face după forma cuvintelor, nu literă cu literă. Într-un text scris doar cu majuscule, toate cuvintele au acelaşi format, fiindcă toate literele au aceeaşi bază şi aceeaşi înălţime, textul fiind mai greu de citit astfel. Pentru nevăzători citirea unui text scris exclusiv cu majuscule este de asemenea mai dificilă, datorită faptului că cititoarele de ecran consideră cuvintele ca fiind acronime şi le citesc pe unele dintre ele pe litere. Spre deosebire de vremurile când se foloseau maşini de scris care aveau ca posibilităţi de evidenţiere a textului doar sublinierea şi scrierea cu majuscule, pe computer se pot folosi alte metode cum ar fi schimbarea fontului folosit sau scrierea cu caractere aldine (bold), metode preferate deoarece nu îngreunează citirea la fel de mult ca scrierea exclusiv cu majuscule.

↑ către lista cu recomandări

↑ către cuprins

Detalii despre recomandările privind accesibilitatea

Nu folosiţi niciodată Captcha!

Una dintre cele mai importante probleme de accesibilitate pentru nevăzători este cauzată de folosirea Captcha. Captcha înseamnă Completely Automated Public Turing test to Tell Computers and Humans Apart. Are numele dupa renumitul om de ştiinţă Alan Turing. Acest sistem de protecţie reprezintă un test care ar trebui să îi diferenţieze pe utilizatori umani de programele robot care încearcă să acceseze o pagină pentru a trimite mesaje spam sau pentru a descărca date, însă datorită faptului că nevăzătorii nu pot citi ce scrie în imaginea Captcha, nevăzătorii nu sunt consideraţi fiinţe umane şi drept urmare li se interzice accesul în mod intenţionat.

Sistemul Captcha protejează împotriva atacurilor a două tipuri de programe robot.

Primul tip este reprezentat de roboţi generali care lucrează la fel ca programele de indexare ale motoarelor de căutare. Aceşti roboţi accesează rând pe rând toate paginile de pe un site accesând toate linkurile găsite şi trimiţând toate formularele găsite în paginile web. Acest tip de robot este folosit exclusiv pentru trimiterea de mesaje spam şi pentru culegerea de adrese de email, care sunt ulterior folosite tot pentru expedierea mesajelor spam. Pentru preluarea structurată de date se folosesc programe robot dedicate.

Acest prim tip de robot completează automat toate câmpurile din formularele cu date care ar fi putut fi introduse şi de către un utilizator uman. De exemplu dacă un formular va avea câmpuri cu denumiri ca first_name, last_name, name, el va fi completat cu un nume de persoană, dacă un câmp se numeşte email_address, sau email, el va fi completat cu o adresă de email şi aşa mai departe, iar pentru câmpurile care nu pot fi încadrate într-o anumită categorie roboţii completează de obicei un număr, de exemplu cifra 1, creatorii lor gândindu-se că ar putea exista posibilitatea ca anumite câmpuri să accepte doar numere, nu şi litere. Aceste programe nu lasă de obicei câmpuri necompletate, ştiind că în unele formulare anumite câmpuri ar putea fi absolut necesare.

Dacă formularele conţin şi câmpuri de tip <textarea>, ele fiind utilizate pentru trimiterea de texte mai largi, în aceste câmpuri programele robot vor introduce de obicei mesajele spam, în idea că acele mesaje vor fi publicate undeva într-un forum sau că vor fi trimise prin email unui număr mare de persoane etc.

Al doilea tip de programe robot este constituit de roboţii dedicaţi pentru un anumit site sau pentru o anumită pagină de pe un anumit site. Aceşti roboţi pot fi de două feluri în funcţie de scopurile creatorilor lor, şi anume roboţi cu care se pot trimite mesaje spam pe site-ul ţintă şi roboţi cu care se pot descărca date de pe acel site în vederea introducerii lor într-o bază de date pentru a putea fi apoi reutilizate eventual pe alte site-uri.

În mod evident, cele mai multe accesări din partea unor programe robot sunt cele făcute de roboţii generali care pornesc de la câteva site-uri ţintă şi utilizând linkurile de pe acele site-uri accesează apoi noi şi noi site-uri încercând să trimită mesaje spam prin intermediul tuturor formularelor găsite. Acele programe lucrează identic indiferent de site-ul ţintă şi crearea şi utilizarea lor este foarte facilă.

Crearea şi utilizarea unor programe robot dedicate pentru un anumit site ţintă este ceva mai complexă şi implică ceva mai multă muncă. Aceste programe ştiu ce reprezintă cu exactitate fiecare câmp din formular şi fac de obicei eforturi suplimentare pentru a depăşi obstacolele adăugate de către cei care au creat site-ul ţintă. Din acest motiv, programele robot dedicate sunt create de obicei doar pentru a trimite mesaje spam pe site-uri ţintă foarte populare, care au un număr foarte mare de vizitatori, pentru ca mesajele spam trimise să fie apoi văzute de cât mai multe persoane. Exemple de astfel de site-uri sunt site-urile Google, Facebook, Amazon, Ebay...

Eforturile creării unui robot dedicat pentru un site mai puţin important nu ar fi răsplătite, deci este puţin probabil ca cineva să creeze un astfel de robot dedicat pentru un site de importanţă mai redusă. De asemenea, chiar dacă un site este foarte important şi are mulţi vizitatori, nu va crea nimeni un program robot dedicat pentru a trimite un formular, dacă prin intermediul acelui formular nu se poate trimite un mesaj către un număr mare de persoane. De exemplu dacă un site afişează un formular de contact prin intermediul căruia publicul larg îi poate trimite mesaje proprietarului site-ului, cu siguranţă că nu va face nimeni un efort de a crea un program robot dedicat pentru a îi trimite mai multe mesaje doar unei singure persoane, fiindcă ar fi un efort fără nici un efect benefic pentru cel care l-ar face.

Concluzia este că în cele mai multe cazuri formularele trebuie protejate împotriva roboţilor generali şi nu împotriva celor dedicaţi. În continuare vom arăta câteva mijloace simple de protejare împotriva roboţilor generali care nu blochează accesul nevăzătorilor.

Metode de protecţie împotriva roboţilor generali

Utilizarea unui câmp capcană

După cum am arătat, roboţii generali completeaza câmpurile găsite în formular, fără să ştie dacă unul dintre câmpuri trebuie lăsat gol în mod intenţionat. Pentru a induce în eroare programul robot, putem adăuga un câmp obişnuit în formular, specificând că acel câmp trebuie lăsat necompletat. Dacă vom primi formularul cu acel câmp completat, înseamnă că respectivul formular a fost trimis de către un program robot şi nu trebuie luat în considerare.

De exemplu pe lângă celelalte câmpuri din formular, se poate adăuga următorul:

Vă rugăm să nu completaţi următorul câmp: <input type="text" name="email_required">

Site-ul trebuie apoi doar să verifice dacă a fost completat câmpul email_required, iar dacă a fost completat, să nu ţină cont de datele expediate prin intermediul formularului.

Dacă dorim ca formularul să arate şi mai bine, neafişând deloc acel câmp, se poate adăuga chiar un cod Javascript care să îl ascundă. Dacă se foloseşte metoda ascunderii câmpului, este recomandabil ori să se folosească un cod Javascript în pagina web sau într-un fişier extern, ori un cod CSS care să fie amplasat într-un fişier extern fiindcă acestea nu vor fi analizate de către robotul general. Dacă se va ascunde un element adăugând atributul style în interiorul câmpului respectiv, unele programe robot ar putea descoperi că este un câmp ascuns şi nu l-ar lua în seamă.

De exemplu se poate folosi următorul script care este rulat automat la încărcarea paginii datorită evenimentului onload() al elementului <body>:

<body onload="hide()">
<script>function hide() {document.getElementById('eml').style.display = 'none';}</script>
<form>
Name: <input type="text" name="name"><br>
<div id="eml">
Nu completati: <input type="text" name="email_required"><br>
</div>
<input type="submit" name="Trimite">
</form>

Formularul anterior va afişa doar câmpul name şi butonul de expediere, iar conţinutul elementului <div> cu id="eml" va fi ascuns pentru vizitatori. Dacă din întâmplare unii vizitatori au Javascript dezactivat, vor vedea conţinutul acestui element, deci şi câmpul email_required, însă vor vedea de asemenea şi mesajul care le spune să nu îl completeze. În concluzie, această metodă funcţionează indiferent dacă Javascript este activat sau nu.

Programele robot nu vor şti însă că undeva există un script Javascript care ascunde un element HTML care conţine unul dintre câmpurile formularului, aşa că vor completa toate câmpurile, iar dacă se va vedea că şi acest câmp a fost completat, se va şti că a fost completat de un program robot.

Tot în categoria câmpuri capcană se pot folosi şi alte metode mai avansate dacă se doreşte, de exemplu se poate adăuga un câmp suplimentar în formular cu ajutorul unui cod Javascript, câmp care va trebui completat în mod obligatoriu, iar robotul nu va şti că trebuie trimis şi acel câmp, sau ar putea fi adăugat un câmp ascuns gata completat cu o anumită valoare, dar înainte de trimiterea formularului un cod Javascript ar putea modifica acea valoare, dar robotul va trimite câmpul cu valoarea implicită, iar site-ul va şti când formularul a fost trimis de către un robot. Toate aceste tehnici pot fi combinate.

Iată un exemplu de formular care afişează un câmp ascuns gata completat cu valoarea "123", dar care în momentul încărcării paginii este modificat de un simplu cod Javascript pentru a avea valoarea "zzz". Dacă formularul este trimis cu valoarea implicită "123", înseamnă că formularul a fost trimis probabil de către un program robot.

<body onload="change()">
<script>function change() {document.getElementById('code').value = 'zzz';}</script>
<form>
Name: <input type="text" name="name">
<input type="hidden" name="code" value="123">
<input type="submit" name="Trimite">
</form>

Text Captcha

Deşi nu este vorba despre Captcha, datorită faptului că metoda de lucru este oarecum similară din punctul de vedere al vizitatorilor, am denumit aceasta metodă "Text Captcha". Text Captcha constă în solicitarea vizitatorilor să completeze un anumit câmp text cu un cuvânt oarecare sau cu rezultatul unui simplu calcul etc.

Această metodă blocheaza toţi roboţii generali, fiindcă respectivele programe nu ştiu cu ce trebuie să completeze câmpul respectiv. Multe variante de Text Captcha folosesc o variantă de lucru mai complicată, solicitând utilizatorii să răspundă la o întrebare simplă, să facă un simplu calcul aritmetic etc, însă de fapt nici măcar de atat nu este nevoie pentru a avea parte de o protecţie foarte bună. Este suficient ca formularul să solicite completarea unui simplu cuvânt, iar acel cuvânt nici nu trebuie să fie unul care se modifică, ci poate fi unul care să trebuiască a fi completat întotdeauna de toţi utilizatorii. Un câmp din formular poate de exemplu să aibă o etichetă de genul:

Vă rugăm să completaţi cuvântul CONTINUARE în următorul câmp pentru a continua:
<input type="text" name="camp">

Întotdeauna ar trebui folosite mai întâi metodele de protecţie arătate mai sus. Dacă după aceasta vor începe să apară mesaje spam, ceea ce înseamnă că cineva a creat un program robot dedicat pentru a le trimite prin intermediul formularului respectiv, abia atunci ar trebui luate măsuri pentru protecţia împotriva programelor robot dedicate. Trebuie să se ţină cont şi de numărul de mesaje spam primite, fiindcă dacă se primesc doar două trei mesaje nu înseamnă că s-a folosit neapărat un program robot, ci este posibil ca mesajele să fi fost trimise de cineva manual, prin completarea formularului, iar trimiterea de mesaje spam de către o persoană nu poate fi blocată decât prin acceptarea manuala a mesajelor primite sau prin ştergerea mesajelor spam dupa ce au fost publicate, în urma unei monitorizări manuale.

Metode de protecţie împotriva roboţilor dedicaţi

Programele robot dedicate pot face tot ce face şi un operator uman care foloseşte un browser, deci nu se pot folosi diverse tehnici de inducere a lui în eroare. Adică se pot folosi unele metode de îngreunare a accesului, dar ele vor fi totuşi depăşite de aceşti roboţi.

În general pentru protecţia împotriva programelor robot dedicate se foloseşte Captcha, însă nici Captcha nu este o problemă prea mare pentru aceste programe. Există multe programe Captcha, iar majoritatea lor oferă o variantă accesibilă doar persoanelor văzătoare, neoferind şi o alternativă pentru cei care nu pot vedea imaginile. Dacă textul afişat în imaginea Captcha este uşor de descifrat, atunci respectiva imagine poate fi prelucrată în mod automat cu diverse programe care acceptă parametrii în linia de comandă, cum ar fi programul convert din pachetul ImageMagick, iar după ce imaginea este curăţată textul poate fi recunoscut optic cu un program ca tesseract care acceptă şi el parametrii tot în linia de comandă. Aceste programe ruleaza rapid şi pot încerca să descifreze multe imagini Captcha într-un timp foarte scurt, astfel încât nu contează dacă reuşesc doar după multe încercări.

Dacă programele Captcha afişează imagini extrem de dificil de recunoscut şi de către o persoană, cum este de exemplu cazul Google reCAPTCHA, atunci imaginile nu vor putea fi recunoscute optic şi se vor folosi alte metode.

O metodă simplu de pus în aplicare este crearea unui program robot dedicat care să fie rulat manual, iar persoana care îl rulează va recunoaşte manual imaginea Captcha şi va introduce manual textul recunoscut, după care programul îşi va continua munca de trimitere automată de mesaje spam sau de preluare a datelor. Se poate adăuga o facilitate la acest robot ddedicat astfel încât dacă după o anumită perioadă site-ul va solicita din nou recunoaşterea unei imagini Captcha, ea să fie preluată şi prezentată din nou pentru a fi recunoscută manual, dupa care programul îşi va continua munca.

Există unele site-uri care pentru a îşi proteja datele impun recunoaşterea unei imagini Captcha după vizualizarea fiecărei înregistrări sau după trimiterea fiecărui mesaj, ceea ce este foarte neplăcut pentru utilizatorii de bună credinţă. Pentru acele site-uri este dificil de creat un program robot dedicat cu care sa se recunoască toate imaginile manual, deoarece ar trebui ca o persoană să recunoască non stop imagini Captcha, aşa că probabil nu ar fi o activitate rentabilă. Pentru a se rezolva această problemă au apărut unele firme care oferă acest serviciu de recunoaştere imagini Captcha la preţuri extrem de reduse, ele oferind de obicei o interfaţă pentru programe (API) prin intermediul căreia se trimite o imagine şi se primeşte rapid textul recunoscut. Dacă apelează la un astfel de serviciu, cei care se ocupă cu trimiterea de mesaje spam pot accesa în programul robot acea interfaţă în mod automat şi programul robot va funcţiona ca şi cum nu ar exista niciun fel de protecţie Captcha. Firmele care ofera servicii de recunoaştere Captcha au de obicei colaboratori la distanţă din ţări foarte sărace care nu trebuie să ştie decât să utilizeze cât de cât un computer, putând obţine venituri care în respectivele ţări poate însemna un venit decent.

Aşadar, după cum am putut vedea, împotriva roboţilor generali metoda Text Captcha funcţionează întotdeauna, dar împotriva roboţilor dedicaţi nu există absolut nicio protecţie imbatabilă care să se poată face în mod automat. Să nu uităm însă că doar site-urile importante au această problemă. Cea mai bună protecţie care să dea întotdeauna rezultate este o verificare manuală a mesajelor primite înainte de a fi postate. Dacă numărul de mesaje care ar trebui astfel administrate este foarte mare şi deci această metodă nu se poate aplica, se poate aplica metoda verificării automate a mesajelor în funcţie de anumite criterii, iar mesajele care ar putea conţine spam să nu fie publicate automat, ci doar după o aprobare manuală. De exemplu dacă mesajul conţine o adresă web sau o adresă de email sau un număr care ar putea fi un număr de telefon, sau anumite cuvinte, mesajul ar putea fi trecut în lista celor care trebuie aprobate automat, restul mesajelor putând fi afişate automat pe site. Dacă şi în acest caz numărul mesajelor care ar trebui administrate manual ar fi prea mare, s-ar putea permite în mod implicit afişarea tuturor mesajelor, urmând ca mesajele care ar putea conţine spam să fie afişate separat, putandu-le şterge manual doar pe ele.

Pentru majoritatea site-urilor utilizarea Captcha este o soluţie absolut inutilă deoarece nu se vor crea probabil niciodată programe robot dedicate pentru ele. Una dintre soluţiile de blocare a roboţilor generali ar fi suficientă şi asta ar face şi ca acele site-uri să devină accesibile pentru toţi.

Pentru site-urile care au foarte mulţi utilizatori Captcha nu este o soluţie definitivă, fiindcă după cum am arătat, există diverse variante pentru ocolirea acestei protecţii fără eforturi considerabile. Cei care sunt nevoiţi totuşi din diverse motive să utilizeze Captcha, este recomandat cel puţin să utilizeze o soluţie Captcha care asigură variante accesibile atât pentru văzători cât şi pentru nevăzători. O astfel de soluţie este Google reCAPTCHA care oferă atât imagini imposibil de recunoscut optic cât şi o variantă alternativă audio. Este totuşi bine pe cât posibil să fie evitată utilizarea unei soluţii Captcha, chiar dacă oferă şi o variantă audio, deoarece unele variante audio cum este cazul reCAPTCHA sunt de cele mai multe ori absolut imposibil de înţeles, astfel încât nevăzătorilor li se interzice totuşi accesul.

Google vă Recomandă utilizarea Captcha fiindcă Google nu este interesat cât de accesibil este site-ul dumneavoastră, ci este în primul rând interesat ca site-urile web să nu afişeze mesaje spam cu linkuri care sa promoveze alte site-uri, deoarece asta face irelevant algoritmul de calcul al pagerank-ului, favorizând site-urile promovate prin intermediul acelor mesaje, iar asta duce la scăderea calităţii rezultatelor afişate de motorul de căutare. Pe dumneavoastră vă interesează însă mai mult cât de accesibil este site-ul dumneavoastră pentru cât mai multe persoane.

Dacă deţineţi un site care are foarte mulţi vizitatori şi ştiţi sigur că vor exista multe interese de a se crea programe robot dedicate pentru a trimite spam prin intermediul lui, fiind deci necesar să utilizaţi Captcha, alegeţi o variantă Captcha care oferă şi o alternativă sonoră dar înainte de a o folosi încercaţi să îi testaţi varianta audio, încercând să introduceţi textul care este citit de mesajul audio, pentru a fi siguri că funcţionează.

Dacă folosiţi Captcha, câmpul în care trebuie să se introducă codul recunoscut trebuie să fie primul câmp din formular, nu ultimul, pentru ca nevăzătorii să poată observa de la început că respectivul formular solicită recunoaşterea unei imagini, nu doar după ce au completat toate câmpurile din formular.

Afişaţi textul întotdeauna ca text, nu sub formă de imagini!

Unele site-uri afişează conţinut textual util transformat în imagini cu scopul de a nu permite unor programe robot sa preia continutul, să îl reformateze şi să îl afişeze pe alte site-uri. În acest caz textele apar scrise cu un tip de caracter clar şi uşor de citit, fiind deci foarte simplu de recunoscut optic chiar şi cu programele gratuite amintite mai sus. Dacă se apelează la alte programe comerciale, calitatea recunoaşterii optice este şi mai bună. Această soluţie de a proteja textul transformându-l în imagini este uşor de ocolit de către cei care vor să îl preia, însă este un mod de a interzice în mod voit accesul nevăzătorilor, făcând deci doar rău, fără beneficii reale.

Pe lângă faptul că aceste imagini nu sunt accesibile nevăzătorilor, textul din ele nu poate fi indexat de motoarele de căutare, plus că imaginile având o dimensiune mai mare decât textul, se descarcă mai greu.

Uneori anumite date de contact se afişează sub formă de imagini, în special adresele de email, pentru a nu putea fi preluate de către programele robot cu scopul de a fi utilizate în campanii de spam. O soluţie mai bună este aceea de a tipări respectivele adrese de email folosind mici scripturi Javascript. Iată avantajele acestei metode:

• Roboţii nu vor găsi practic adrese de email în corpul paginii web, deci respectivele adrese vor fi protejate.
• Dacă o adresă de email trebuie modificată, nu trebuie creat şi încărcat pe server un nou fişier imagine cu noua adresă.
• Dacă pe pagina web se afişează mai multe adrese de email preluate automat dintr-o bază de date, nu trebuie create fişiere imagine pentru toate, ci se poate crea un simplu script Javascript care va tipări toate respectivele adrese.
• Adresele de email respective vor fi accesibile şi pentru utilizatorii nevăzători.

Iată un exemplu simplu de script Javascript care afişează adresa de email Această adresă de email este protejată contra spambots. Trebuie să activați JavaScript pentru a o vedea.:

<script>document.write("ionel.ionescu" + "@" + "site.com")</script>

Rezultatul va fi afişat astfel:

Roboţii care vor căuta adrese de email cu o anumită structură nu vor găsi o adresă de email validă în scriptul de mai sus, neputând să o preia. Bineînţeles, acest script poate fi cât de complex doriţi.

Dacă doriţi să afişaţi mai multe adrese de email într-o pagină, puteţi crea un singur script care să combine elementele componente ale adreselor de email şi să reconstruiască apoi adresa de email, iar apoi să apelaţi acel script de mai multe ori cu parametrii diferiţi. De exemplu, puteţi afişa următoarele adrese de email folosind această metoda: Această adresă de email este protejată contra spambots. Trebuie să activați JavaScript pentru a o vedea., Această adresă de email este protejată contra spambots. Trebuie să activați JavaScript pentru a o vedea., Această adresă de email este protejată contra spambots. Trebuie să activați JavaScript pentru a o vedea.. Primul script tipăreşte adresa de email, iar următoarele scripturi apelează primul script.

<script>function eml(server, user) { document.write(user+"@"+server);}</script>

<script>eml("site1.com", "ion.ionescu")</script>

<script>eml("site2.com", "paul.popescu")</script>

<script>eml("site3.com", "victor.voinescu")</script>

Rezultatul va fi afişat astfel:

În acelaşi mod se pot genera şi adrese de email care apar ca linkuri:

<script>document.write('<a href="mailto:ion' + '.popescu@' + 'server.com">ion.' + 'popescu@server' + '.com</a>')</script>

Rezultatul va arăta astfel:

Aceste adrese sunt mai uşor de creat şi actualizat decât imaginile, sunt accesibile tuturor şi nu expun adresa de email pentru a putea fi preluată automat de roboţii generali.

Oferiţi o versiune text pentru clipurile audio/video!

La fel cum pentru nevăzători imaginile nu sunt accesibile, pentru persoanele cu deficienţă de auz clipurile audio/video nu sunt accesibile. Dacă afişaţi clipuri audio/video cu un conţinut informaţional important, (deci nu o piesă muzicală de exemplu), este bine să oferiţi şi o variantă text a respectivului clip. Şi în acest caz mai beneficiaţi de avantajul că textul respectiv va fi indexat de motoarele de căutare şi pagina va putea fi mai uşor găsită.

Dacă folosiţi controale Javascript, asiguraţi-vă că ele sunt accesibile pentru cititoarele de ecran!

Dintre toate recomandările din acest articol, aceasta ar putea părea cel mai greu de pus în aplicare, deoarece nu se poate verifica uşor dacă un control complex creat cu Javascript este accesibil cititoarelor de ecran sau nu. Majoritatea recomandărilor privind accesibilitatea se referă la elemente HTML standard, ca de exemplu tabele, imagini, campuri de formular obişnuite etc, dar nu şi la controalele create cu Javascript, deoarece acele controale nu sunt standardizate, ci fiecare bibliotecă Javascript le crează în stilul propriu, unele oferind un suport mai bun pentru accesibilitate, altele mai slab, iar altele deloc. Din acest motiv, dacă utilizaţi astfel de controale, se recomandă să verificaţi dacă ele sunt accesibile pentru cititoarele de ecran înainte de a le utiliza.

Prima verificare pe care o puteţi face şi fără ajutorul unui cititor de ecran este să testaţi dacă respectivele controale pot fi utilizate doar cu ajutorul tastaturii. Dacă este vorba despre un meniu derulant de exemplu, încercaţi să deschideţi meniul, să selectaţi unul dintre submeniuri, să accesaţi un anumit element din meniu şi să vedeţi dacă pagina ţintă se deschide. Dacă controlul complex este un tab, încercaţi să selectaţi şi alte pagini ale tabului în afară de cea afişată în mod implicit şi să accesaţi un element activ (link, buton) din respectiva pagină. Dacă controlul complex este un acordeon, încercaţi să expandaţi şi alte secţiuni ale sale decât cea expandată implicit şi să accesaţi elementele active din acele secţiuni. Dacă este o structură arborescentă, încercaţi să expandaţi câteva foldere şi să accesaţi elementele finale pentru a deschide paginile ţintă. Dacă controlul respectiv este un combo box, adică un câmp de editare care afişează o listă cu opţiuni dedesubt, încercaţi să scrieţi câteva litere în câmpul de editare, iar după ce va apărea lista cu opţiuni, încercaţi să alegeţi una dintre opţiuni şi apoi să căutaţi folosind opţiunea respectivă. Dacă este vorba despre un check box sau buton radio creat cu un cod Javascript, încercaţi să marcaţi şi demarcaţi respectivul control doar cu ajutorul tastaturii. Pentru a face toate acestea doar cu ajutorul tastaturii trebuie să utilizaţi de obicei tastele Tab şi Shift+Tab pentru a muta focusul de la un control la altul, tastele săgeţi pentru a selecta diverse elemente din liste, meniuri etc, tasta spaţiu pentru a marca/demarca check box-uri şi butoane radio, tastele spaţiu şi Enter pentru a accesa un element dintr-un meniu, un link, un buton etc.

Pot exista multe alte tipuri de controale complexe, însă pentru ca ele să fie accesibile pentru cititoarele de ecran trebuie să poată fi accesate doar cu ajutorul tastaturii. Dacă găsiţi un control care nu poate fi accesat cu ajutorul tastaturii, evitaţi să îl folosiţi, fiindcă în caz contrar veţi interzice cu bună ştiinţă accesul nevăzătorilor şi al utilizatorilor de tastatură în general.

Dacă un control este accesibil cu ajutorul tastaturii nu înseamnă neapărat că el este implicit accesibil şi pentru cititoarele de ecran. De aceea, aceste controale complexe trebuie testate şi cu ajutorul unui cititor de ecran.

Am dat mai sus câteva detalii în această pagină despre modul în care nevăzătorii pot accesa o pagină web cu ajutorul cititorului de ecran JAWS. Puteţi folosi aceleaşi metode pentru a verifica dacă o anumită pagină web este suficient de accesibilă. Informaţiile din acest articol vă sunt utile dacă creaţi pagini web şi folosiţi doar elemente HTML standard şi eventual controale complexe Javascript create de alţii. Dacă creaţi controale complexe Javascript de la zero, sau ca plug-in-uri pentru diverse biblioteci Javascript, este bine să studiaţi standardul W3C ARIA.

Ca o informaţie utilă în special celor care dezvoltă controale complexe Javascript, pentru ca un astfel de control să fie accesibil pentru cititoarele de ecran, în principiu el trebuie să îndeplinească câteva condiţii:

• Să aibă definit atributul tabindex, astfel încât atunci când nevăzătorii apasă tasta tab, focusul să se mute de la un control la altul şi să se oprească şi la aceste controale nestandard, nu doar la linkuri, butoane şi alte câmpuri standard din formulare. Atributul tabindex trebuie să aibă întotdeauna valoarea 0 pentru a nu modifica ordinea normală a tab stop-urilor în pagină.
• Să aibă definite evenimente Javascript care pot fi accesate cu ajutorul tastaturii, de exemplu onClick, care poate fi accesat cu tasta Enter. Dacă există doar evenimente accesibile pentru mouse, de exemplu onMouseOver, probabil că cititoarele de ecran nu vor putea accesa respectivele controale.
• Să aibă definite atribute ARIA care să informeze cititorul de ecran dacă a apărut un mesaj pe pagină, o alertă, un dialog, să îi spună cititorului de ecran ce trebuie să citească şi ce să ignore şi multe altele.

Nu folosiţi niciodată sunete de fundal redate în mod implicit!

În trecut redarea de sunete pe o pagină web era considerat ceva inedit, iar proprietarii site-urilor îşi imaginau că acest lucru îi va surprinde în mod plăcut pe vizitatori. Unii utilizatori însă erau surprinşi în mod neplăcut tocmai pentru că nu se aşteptau să audă acele sunete, fie că îi speria sunetul, fie că îi deranja pe alţi utilizatori din aceeaşi încăpere, fie că atrăgea atenţia altor utilizatori. Astăzi redarea de sunete într-o pagină web în mod implicit poate fi la fel de deranjantă, însa nici măcar nu mai reprezintă ceva inedit. Pentru nevăzători însă o pagină care redă un sunet de fundal poate deveni complet inaccesibilă datorită faptului că nu le permite să audă cititorul de ecran.

Se recomandă ca o pagină să redea clipuri audio/video cu sunet doar atunci când utilizatorii aleg să pornească respectivul clip. O excepţie sunt site-urile special destinate acestui scop, ca de exemplu YouTube, unde redarea automată de sunete nu reprezintă o surpriză. Pentru a permite accesarea paginilor respective, se recomandă ca ele să ofere posibilitatea opririi temporare a clipurilor pentru a se putea accesa alte elemente ale paginii. De exemplu site-ul YouTube ofera comenzile de la tastatura J, K şi L cu care se poate derula înapoi, opri temporar şi derula înainte clipul curent.

Oferiţi pentru descărcare fişiere cu un conţinut accesibil!

Cele mai accesibile formate de documente pentru nevăzători sunt txt, doc şi docx, formatul pdf fiind unul relativ accesibil, dar care de multe ori poate crea mari probleme de accesibilitate. Formatul pdf este un format nestructurat, între elementele sale neexistând o relaţie bine stabilită, ci doar sunt poziţionate la anumite coordonate şi asociate în mod strict vizual. Dacă fişierul conţine doar text şi eventual imagini cu scop decorativ, atunci el este accesibile. Dacă textul conţine diacritice, de multe ori ele nu sunt redate corect datorită modului în care a fost creat fişierul şi textul devine foarte dificil sau imposibil de înţeles. Dacă însă fişierul pdf conţine tabele, coloane sau alte elemente în care contează aranjamentul vizual al elementelor, este posibil ca informaţia să nu fie accesibilă şi cititorul de ecran să nu poată descoperi că elementele sunt aranjate sub forma unui tabel.

Se recomandă ca ori de câte ori este posibil să se ofere fişiere într-un format doc sau docx, nu în format pdf, deoarece formatul pdf este un format mult mai greu accesibil. Bineînţeles, această recomandare nu se va aplica şi atunci când chiar asta se doreşte, adică o accesibilitate cât mai slabă, pentru ca datele să nu poată fi accesate prea uşor, să nu poată fi copiate, să nu poată fi modificate cu uşurinţă.

Indiferent de formatul documentelor, este absolut necesar ca acestea să conţină text şi nu imagini scanate, deoarece imaginile scanate sunt absolut inaccesibile pentru nevăzători. Este inutil să se ofere un document pdf sau doc care conţine imagini scanate doar pentru a demonstra că ele au fost semnate şi ştampilate fiindcă semnăturile olografe şi ştampilele nu au niciun fel de valoare atunci când apar pe documente electronice. Singurele semnături cu care se pot semna documentele electronice sunt semnăturile electronice.

În cazul fişierelor create de programele de calcul tabelar, se recomandă ca fiecare filă a acestora să conţină un singur tabel şi acest tabel să aibă un cap de tabel cu titluri pentru coloane sau pentru linii dacă este cazul. Se recomandă de asemenea ca foile de calcul tabelar să fie folosite în scopul în care au fost create, nu ca înlocuitor al unui raport cu un design atrăgător. Aceasta înseamnă că tabelele din fiecare filă trebuie să înceapă din prima linie şi prima coloană a filei în care se află, fără a se lăsa câteva linii şi coloane goale în partea de sus şi în stânga tabelului.

Descrieţi hărţile, graficele şi diagramele astfel încât ele să poată fi înţelese şi de către nevăzători!

În cazul în care afişaţi o hartă pe care apare sediul firmei, descrieţi pe scurt cum se poate ajunge la acel sediu într-un text amplasat pe aceeaşi pagină pe care apare harta. Această descriere poate fi utilă şi utilizatorilor valizi.

Dacă afişaţi un grafic în care se compară anumite elemente, faceţi pe scurt o comparaţie textuală, ca o concluzie care trebuie dedusă după analizarea graficului respectiv. Dacă se afişează un grafic care arată o evoluţie, prezentaţi textual cum a evoluat factorul prezentat în grafic etc.

Toate aceste descrieri textuale pot fi utile şi altor persoane decât nevăzătorii şi cu siguranţă sunt utile pentru indexarea site-ului în motoarele de căutare.

Nu asociaţi anumite elemente pe ecran doar în mod vizual!

Când între două sau mai multe elemente de pe pagină trebuie să se facă o asociere, ca în cazul asocierii unui câmp de formular cu eticheta lui, sau a două segmente de text afişate pe aceeaşi linie sau aceeaşi coloană, nu trebuie ca această asociere să se facă în mod exclusiv vizual, fiindcă această asociere nu va fi accesibilă şi pentru nevăzători deoarece ei le vor vedea ca pe nişte elemente de sine stătătoare fără legătură între ele. Este recomandat să se facă o asociere structurală folosind facilităţile oferite de limbajul HTML.

Asocierea vizuală exclusivă apare cel mai frecvent în următoarele cazuri. Toate acestea trebuie evitate deoarece pot crea probleme foarte mari de accesibilitate:

• Când un câmp dintr-un formular este asociat cu eticheta lui prin simpla amplasare a etichetei în partea stângă a câmpului respectiv, sau în partea dreaptă în cazul butoanelor radio si check box-urilor.
  Asociaţi întotdeauna elementele din formulare cu etichetele folosind elementul <label>!
• Când se foloseşte un tabel pentru a aranja câmpurile dintr-un formular, etichetele apărând pe o linie, iar câmpurile pe linia următoare, fără a se face şi o asociere structurală folosind elementul <label>.
  Asociaţi întotdeauna elementele din formulare cu etichetele folosind elementul <label>!
• Când se afişează date tabelare dar nu într-un tabel, ci ca text preformatat folosind elementul <pre> sau când coloanele sunt delimitate cu un anumit caracter, de exemplu cu o bară verticală (|).
  Folosiţi întotdeauna tabele pentru afişarea de date tabelare!
• Când se afişează date tabelare cu mai multe linii şi coloane într-un tabel standard, dar care nu are mai multe coloane şi mai multe linii cum ar fi normal, ci mai multe coloane dar o singură linie, şi în fiecare celulă a tabelului liniile sunt despărţite cu <br>, făcându-se o asociere vizuală între textele din două celule alăturate care se află pe aceeaşi linie.
  Folosiţi întotdeauna tabele pentru afişarea de date tabelare!
• Când cu ajutorul CSS se amplasează două sau mai multe elemente <div> unul lângă altul sau unul sub altul şi se face o asociere vizuală între datele de pe aceeaşi linie sau aceeaşi coloană care apar în două elemente <div> diferite. Când este necesară o asociere vizuală pe linii sau coloane este vorba despre date tabelare.
  Folosiţi întotdeauna tabele pentru afişarea de date tabelare!
• Când se folosesc frame-uri tradiţionale sau iframe-uri şi datele dintr-un frame sunt asociate vizual cu alte date din pagina principală sau din alte frame-uri, prin amplasarea datelor pe aceleasi linii sau coloane.
  Folosiţi întotdeauna tabele pentru afişarea de date tabelare!
• Când se afişează două tabele unul deasupra celuilalt şi primul tabel conţine doar o singură linie în care apar titlurile coloanelor pentru cel de al doilea tabel.
  Nu afişaţi titlurile coloanelor sau liniilor unui tabel într-un alt tabel!
• Când se amplasează două tabele unul lângă celălalt şi se face o asociere vizuală între datele dintr-un tabel cu datele din al doilea tabel atunci când ele apar vizual pe aceeaşi linie.
  Nu afişaţi titlurile coloanelor sau liniilor dintr-un tabel într-un alt tabel!

Pe lângă aceste cazuri mai frecvente pot apărea şi altele în care datele să fie asociate strict vizual prin amplasarea unor elemente unul lângă altul sau unul sub altul, fără a exista nicio altă relaţie între ele. Toate aceste cazuri trebuie evitate.

Folosiţi întotdeauna tabele pentru afişarea de date tabelare!

Pentru a asocia două sau mai multe segmente de text care în mod vizual apar pe aceeaşi linie trebuie să folosiţi întotdeauna tabele, deoarece acestea sunt date tabelare. Nu trebuie să includeţi mai multe linii de text într-o celulă de tabel când fiecare dintre aceste linii trebuie asociate vizual cu alte linii dintr-o altă celulă de tabel.

Aşa nu:

<table>
  <tr>
    <th>Prenumele:<br>Numele:<br>Vârsta:</th>
    <td>Gheorghe<br>Popescu<br>22 ani</td>
  </tr>
</table>

Rezultatul va fi afişat astfel:

Prenumele: Numele: Vârsta:	Gheorghe Popescu 22 ani

 

La o navigare într-un astfel de tabel cititoarele de ecran vor citi mai întâi întreg conţinutul primei celule, iar apoi întreg conţinutul celei de a doua celule, neputându-se face o asociere între etichetă şi valoare. În acest exemplu există doar 3 etichete şi 3 valori simple, dar în alte cazuri pot exista mai multe, iar unele etichete şi valori ar putea să nu poată fi la fel de uşor de asociat în funcţie de conţinutul lor. Soluţia este să se creeze un tabel în care fiecare etichetă şi fiecare valoare este amplasată în propria celulă, astfel:

<table>
  <tr><th scope="row">Prenumele:</th><td>Gheorghe</td></tr>
  <tr><th scope="row">Numele:</th><td>Popescu</td></tr>
  <tr><th scope="row">Vârsta:</th><td>22 ani</td></tr>
</table>

Rezultatul va arăta astfel:

Prenumele:	Gheorghe
Numele:	Popescu
Vârsta:	22 ani

 

Dacă se doreşte asocierea unor segmente de text de pe linii diferite în funcţie de poziţia lor mai la stânga sau mai la dreapta pe linie, trebuie de asemenea să se folosească tabele, şi nu un text preformatat în care coloanele să fie despărţite de spaţii goale sau de caractere "|". Dacă se foloseşte un text preformatat, cititoarele de ecran vor vedea simple linii de text şi vor citi întreaga linie de la început la sfârşit, fiind imposibil sau extrem de dificil de determinat care valori fac parte dintr-o anumită coloană.

Aşa nu:

<pre>
Denumirea   Vânzări    Profit brut    Profit net    Dividend    Capitaluri proprii
SC ETC SA   1230000    120000         75000         1.50        110000
SC ABC SA   2330000    210000         155000        2.00        150000
</pre>

Rezultatul va fi afişat astfel:

Denumirea   Vânzări    Profit brut    Profit net    Dividend    Capitaluri proprii
SC ETC SA   1230000    120000         75000         1.50        110000
SC ABC SA   2330000    210000         155000        2.00        150000

Imaginaţi-vă că ar trebui să citiţi textul preformatat vizual de mai sus astfel: Denumirea Vânzări Profit brut Profit net Dividend Capitaluri proprii, SC ETC SA 1230000 120000 75000 1.50 110000, SC ABC SA 2330000 210000 155000 2.00 150000. Probabil că ar fi destul de dificil de determinat din ce coloane fac parte valorile. Ei bine, nevăzătorii aşa pot citi textul preformatat de mai sus, linie după linie, fără să poată asocia un anumit segment de text de pe o linie cu un alt segment de pe o altă linie.

Aşa da:

<table>
  <tr><th scope="col">Denumirea</th><th scope="col">Vânzări</th><th scope="col">Profit brut</th><th scope="col">Profit net</th><th scope="col">Dividend</th><th scope="col">Capitaluri proprii</th></tr>
  <tr><th scope="row">SC ETC SA</th><td>1230000</td><td>120000</td><td>75000</td><td>1.50</td><td>110000</td></tr>
  <tr><th scope="row">SC ABC SA</th><td>2330000</td><td>210000</td><td>155000</td><td>2.00</td><td>150000</td></tr>
</table>

Rezultatul va fi afişat astfel:

Denumirea	Vânzări	Profit brut	Profit net	Dividend	Capitaluri proprii
SC ETC SA	1230000	120000	75000	1.50	110000
SC ABC SA	2330000	210000	155000	2.00	150000

 

Nu includeţi niciodată un tabel cu date într-un alt tabel cu date!

Când un tabel cu date este inclus într-un alt tabel cu date se doreşte o asociere vizuală între elementele celor două tabele, iar acest lucru este absolut nerecomandabil, fiindcă nu există nicio modalitate de asociere structurală între elementele din două tabele. O problemă similară apare atunci când se folosesc două tabele distincte, dintre care primul are doar un singur rând şi conţine titlurile coloanelor celui de al doilea tabel. Nici în acest caz nu se poate face o asociere între celulele din primul tabel pe post de titluri de coloană şi celulele din al doilea tabel care conţin datele.

Dacă apare nevoia includerii unui tabel într-un alt tabel, înseamnă că există cel puţin două seturi distincte de date între care există o legătură şi că datele din aceste două seturi nu pot fi prezentate într-un singur tabel. În acest caz este bine să se creeze două tabele distincte şi să se specifice textual care este legătura între ele.

Aşa nu:

<table>
  <tr><th scope="col">Tip client</th><th scope="col">Număr clienţi</th></tr>
  <tr><th scope="row">persoane fizice</th><td>80</td></tr>
  <tr><th scope="row">persoane fizice autorizate</th><td>10</td></tr>
  <tr><th scope="row">persoane juridice</th><td><table>
    <tr><th scope="row">societăţi comerciale</th><td>50</td></tr>
    <tr><th scope="row">bănci</th><td>10</td></tr>
    <tr><th scope="row">asociaţii şi fundaţii</th><td>12</td></tr>
    <tr><th scope="row">regii autonome</th><td>11</td></tr>
  </table></td></tr>
</table>

Rezultatul va arăta astfel:

Tip client	Număr clienţi
persoane fizice	80
persoane fizice autorizate	10
persoane juridice	societăţi comerciale 50 bănci 10 asociaţii şi fundaţii 12 regii autonome 11

 

O alternativă la tabelul de mai sus ar putea fi un singur tabel cu headere pe două niveluri de forma:

<table>
  <tr><th colspan="2" scope="col">Tip client</th><th scope="col">Număr clienţi</th></tr>
  <tr><th colspan="2" scope="row">persoane fizice</th><td>80</td></tr>
  <tr><th colspan="2" scope="row">persoane fizice autorizate</th><td>10</td></tr>
  <tr><th rowspan="4" scope="row">persoane juridice</th><th scope="row">societăţi comerciale</th><td>50</td></tr>
  <tr><th scope="row">bănci</th><td>10</td></tr>
  <tr><th scope="row">asociaţii şi fundaţii</th><td>12</td></tr>
  <tr><th scope="row">regii autonome</th><td>11</td></tr>
</table>

Rezultatul va arăta astfel:

Tip client		Număr clienţi
persoane fizice		80
persoane fizice autorizate		10
persoane juridice	societăţi comerciale	50
	bănci	10
	asociaţii şi fundaţii	12
	regii autonome	11

 

O soluţie mai bună este însă crearea a două sau mai multe tabele separate, fiecare având o structură simplă. Prezentarea datelor în acest mod este mai accesibilă pentru utilizatorii unui cititor de ecran cât şi pentru persoanele cu diverse dizabilităţi cognitive. Acest mod de prezentare este totodata mai flexibil deoarece după nevoie se pot prezenta două sau mai multe tabele, fiind descris ce reprezintă fiecare tabel. Tabelul de mai sus poate fi prezentat sub forma următoarelor două tabele distincte:

<table>
  <tr><th scope="col">Tip client</th><th scope="col">Număr clienţi</th></tr>
  <tr><th scope="row">persoane fizice</th><td>80</td></tr>
  <tr><th scope="row">persoane fizice autorizate</th><td>10</td></tr>
  <tr><th scope="row">persoane juridice</th><td>83</td></tr>
</table>
<p> </p>

<p>Numărul de clienţi persoane juridice în funcţie de tipul lor:</p>

<table>
  <tr><th scope="row">societăţi comerciale</th><td>50</td></tr>
  <tr><th scope="row">bănci</th><td>10</td></tr>
  <tr><th scope="row">asociaţii şi fundaţii</th><td>12</td></tr>
  <tr><th scope="row">regii autonome</th><td>11</td></tr>
</table>

Rezultatul va arăta astfel:

Tip client	Număr clienţi
persoane fizice	80
persoane fizice autorizate	10
persoane juridice	83

 

Numărul de clienţi persoane juridice în funcţie de tipul lor:

societăţi comerciale	50
bănci	10
asociaţii şi fundaţii	12
regii autonome	11

 

Nu afişaţi titlurile coloanelor sau liniilor dintr-un tabel într-un alt tabel!

Unele site-uri generează automat conţinutul unor tabele afişând mai întâi un tabel static care conţine doar o singură linie cu capul de tabel, iar apoi sub acest tabel afişează un nou tabel care conţine doar datele, fără titluri pentru coloane. Acesta este un mod de asociere strict vizuală a titlurilor coloanelor din primul tabel cu datele din al doilea tabel, iar cititoarele de ecran vor vedea doar două tabele separate fără legătură între ele. Ba mai mult, datorită faptului că primul tabel conţine doar o singură linie, deci nu apare ca un tabel cu date, cititoarele de ecran pot considera că nu este un tabel cu date, ci doar un tabel folosit pentru aranjarea în pagină, deci nu vor oferi comenzile necesare navigării într-un tabel şi nici nu vor anunţa ca acolo apare un tabel.

În consecinţă, pentru cititoarele de ecran primul tabel care conţine titlurile coloanelor ar putea apărea ca o înşiruire de segmente de text, fiecare pe un rând nou, după care ar urma un tabel cu date care nu au titluri pentru coloane.

Se recomandă ca titlurile liniilor şi coloanelor pentru un tabel să apară întotdeauna în interiorul tabelului respectiv, fiind definite ca headere folosind elementul <th> şi nu în afara tabelului sau într-un alt tabel.

Folosiţi ori titluri pentru coloane, ori pentru rânduri, ori pentru ambele în tabelele cu date!

Pentru o persoană validă care poate vedea întreg conţinutul tabelului dintr-o privire, s-ar putea să fie clar ce conţine un tabel chiar dacă acesta nu are titluri pentru linii şi nici pentru coloane, însă nevăzătorii nu pot avea o imagine de ansamblu pentru a îşi da seama ce reprezintă datele din fiecare celulă a tabelului.

La navigarea în interiorul tabelului cititoarele de ecran vor citi titlurile rândurilor şi coloanelor înainte de a citi conţinutul celulei curente cu date, pentru a îi informa pe nevăzători ce reprezintă respectiva celulă. Din acest motiv, este recomandat ca titlurile rândurilor şi coloanelor să nu fie foarte lungi.

Folosiţi <th> pentru titlurile liniilor şi coloanelor şi <td> pentru celulele cu date!

În mod implicit, textele din celulele create folosind elementul <th> apar cu caractere aldine (bold) şi din acest motiv uneori când se doreşte evidenţierea unor celule cu date ele sunt create folosind acest element. Acest mod de lucru este nerecomandat deoarece cititoarele de ecran ar putea citi conţinutul unei astfel de celule înainte de a citi conţinutul altor celule care se află la dreapta sau sub respectiva celulă, considerând că ea conţine un titlu pentru rândul sau coloana în care se află, iar acest lucru poate cauza confuzie. Dacă se doreşte evidenţierea unei celule cu date, trebuie să se folosească elementele <strong> sau <b> iar celula respectivă să fie creată ca simplă celulă folosind elementul <td>.

Din acelaşi motiv, o celulă care reprezintă titlul coloanei sau rândului în care se află trebuie să fie creată folosind elementul <th> şi nu <td> fiind apoi evidenţiată folosind alte metode. Dacă celulele care definesc titlurile rândurilor şi coloanelor dintr-un tabel sunt definite folosind elementul <td>, cititorul de ecran va considera că ele sunt simple celule cu date şi nu le va citi ca pe nişte titluri de coloane sau linii. Deci va considera că tabelul nu are titluri pentru linii sau coloane.

Nu includeţi titlul tabelului într-o celulă din tabel ci în <caption>!

Uneori prima linie din tabele conţine o singură celulă şi include titlul tabelului, deoarece în acest mod titlul tabelului apare centrat şi se repoziţionează automat dacă fereastra browserului este redimensionată. Acest mod de lucru este nerecomandat fiindcă cititoarele de ecran pot considera respectivul titlu ca fiind titlu pentru toate coloanele tabelului, fiind citit înainte de conţinutul fiecărei celule cu date.

Acelaşi efect de centrare automată se poate obţine dacă titlul este înclus în interiorul tabelului folosind elementul <caption>. Acest mod de lucru este chiar mai simplu decat crearea unui rând suplimentar în tabel care să conţină doar o singură celulă şi în plus oferă şi o mai bună accesibilitate.

Exemplu de includere a titlului folosind <caption>

<table>
  <caption>Vânzările pe ultimii 3 ani grupate pe tipuri de clienţi</caption>
    <tr><th>Anul</th><th>Fizice</th><th>Fizice autorizate</th><th>Juridice</th></tr>
  <tr><th scope="row">1995</th><td>123</td><td>100</td><td>890</td></tr>
  <tr><th scope="row">1996</th><td>113</td><td>105</td><td>790</td></tr>
  <tr><th scope="row">1997</th><td>128</td><td>120</td><td>650</td></tr>
</table>

Rezultatul va fi afişat astfel:

Vânzările pe ultimii 3 ani grupate pe tipuri de clienţi

Anul	Fizice	Fizice autorizate	Juridice
1995	123	100	890
1996	113	105	790
1997	128	120	650

 

Dacă folosiţi tabele pentru aranjarea paginii, folosiţi-le corect!

În limbajul HTML nu există două tipuri de tabele, unul pentru prezentarea de date tabelare şi altul pentru formatarea paginii. De fapt, singurul scop în care ar trebui să se folosească tabelele este acela de a prezenta date tabelare, iar formatarea paginii să se facă utilizând CSS. Totuşi un număr mare de site-uri web folosesc tabele pentru formatarea paginii.

Pentru ca nevăzătorii să poată accesa uşor un tabel cu date, cititoarele de ecran trebuie să ofere diverse comenzi pentru a se putea naviga în aceste tabele linie cu linie şi coloană cu coloană şi trebuie să citească automat titlurile liniilor şi coloanelor unde este cazul. Dimpotrivă, pentru a naviga într-un tabel care este folosit doar pentru aranjarea în pagină, nevăzătorii nici nu trebuie să ştie că s-a folosit un tabel, fiindcă ar putea crede că este vorba despre un tabel cu date, ceea ce ar crea confuzie. Ba mai mult, cititoarele de ecran ar putea citi anumite celule din acel tabel ca şi când ar fi titluri de coloană ceea ce ar spori confuzia.

Din acest motiv, cititorul de ecran JAWS încearcă să depisteze care tabele sunt folosite pentru a prezenta date tabelare şi care pentru simpla aranjare în pagină în funcţie de modul în care au fost create. Dacă de exemplu se observă că într-un tabel s-a folosit elementul <th>, se presupune că a fost definit un heading pentru o linie sau pentru o coloană şi că este deci un tabel cu date şi va oferi toate facilităţile pentru navigarea într-un astfel de tabel. Acest mod de depistare a tabelelor nu reuşeşte întotdeaună, de aceea este recomandat să se foloseasca CSS pentru aranjarea paginii.

În concluzie, dacă utilizaţi tabele pentru aranjarea în pagină, folosiţi doar elementele <table>, <tr> şi <td> şi nu folosiţi alte elemente cum ar fi <th>, <tbody> sau <tfoot>.

Când folosiţi tabele sau orice altă metodă de formatare vizuală a componentelor paginii web, cum ar fi elemente <div> amplasate în anumite poziţii, asiguraţi-vă că toate aceste componente au sens dacă sunt accesate în ordinea în care apar ele în codul HTML.

Aşa nu:

<table>
  <tr><td>Sus</td><td>Picioarele</td></tr>
  <tr><td>mâinile!</td><td>depărtate!</td></tr>
</table>

Rezultatul afişat va arăta astfel:

Sus	Picioarele
mâinile!	depărtate!

 

Dacă tabelul de mai sus nu este un tabel cu date, ci doar unul care formatează pagina şi amplasează în anumite poziţii textele "Sus mâinile!" şi "Picioarele depărtate!", atunci aceste texte nu au sens când sunt citite în ordinea în care apar în codul HTML. Cititoarele de ecran vor citi aceste texte în această ordine, iar rezultatul va fi: Sus, picioarele, mâinile!, depărtate!.

Standardul ARIA oferă un rol care poate fi atribuit tuturor elementelor HTML care sunt folosite doar ca elemente de prezentare, role="presentation". Daca se adaugă acest atribut la un tabel, atunci pentru respectivul tabel nu se vor mai oferi informatii care ar trebui să facă accesibil respectivul tabel, fiindcă acele facilităţi ar fi în primul rând inutile, iar în al doilea rând ar putea crea confuzie, deoarece nevăzătorii ar putea crede că este vorba despre un tabel cu date. Dacă folosiţi deci tabele pentru aranjarea în pagină, adăugaţi atributul role="presentation" şi asiguraţi-vă că textele din tabel au un înţeles logic dacă sunt citite în ordinea în care au fost definite în codul HTML.

Adăugaţi întotdeauna un atribut alt pentru imagini!

Imaginile sunt utilizate de obicei în următoarele scopuri:

• pentru afişarea de poze
• ca etichete pentru linkuri
• în scop decorativ
• ca imagini de fundal

Indiferent de scopul utilizării elementelor <img>, ele trebuie să aibă definit un atribut alt. Dacă sunt folosite pentru a prezenta poze sau ca etichete pentru linkuri, atributul alt trebuie să prezinte foarte scurt numele persoanei din imagine, sau ce reprezintă peisajul, sau care este scopul linkului. Dacă sunt folosite doar în scop decorativ, sau pentru spaţiere sau ca imagini de fundal fără un conţinut important, atributul alt trebuie sa contina un sir gol de forma alt="". Dacă o imagine nu are definit un atribut alt, cititorul de ecran nu va şti dacă este o imagine importantă sau nu şi ar putea citi calea către imaginea respectivă, iar dacă pe o pagină web există multe astfel de imagini decorative iar cititorul de ecran va citi pentru fiecare calea, utilizarea paginii respective ar deveni foarte dificila.

Cele mai importante imagini sunt cele care apar ca etichete pentru linkuri, fiindcă doar conţinutul atributului alt va putea informa utilizatorul nevăzător ce reprezintă acel link. Dacă o imagine este utilizată ca etichetă pentru un link, ea nu trebuie să descrie ce afişează respectiva imagine, ci la ce este folosit acel link. De exemplu, dacă o imagine într-un link afişează o săgeată spre dreapta, nu este bine ca atributul alt sa fie alt="săgeată spre dreapta", fiindcă pentru un nevăzător nu va fi clar la ce foloseşte acel link, ci ar trebui să fie de exemplu "pagina următoare" pentru a arăta clar ce se întâmplă dacă se accesează respectivul link.

Asociaţi întotdeauna elementele din formulare cu etichetele folosind elementul <label>!

Pentru a asocia un câmp de formular cu eticheta lui, trebuie să folosiţi întotdeaună elementul HTML <label> şi nu să vă bazaţi doar pe aşezarea etichetei în partea stângă a respectivului câmp. Cititoarele de ecran vor putea face întotdeauna o asociere între câmpuri şi etichete dacă se foloseşte elementul <label>, indiferent la ce distanţă se vor amplasa ele în corpul HTML al paginii.

Chiar dacă nu se foloseşte elementul <label>, cititoarele de ecran performante pot face o asociere între un câmp şi eticheta lui dacă aceasta este amplasată imediat înaintea câmpului respectiv, sau imediat după câmpul respectiv în cazul check box-urilor şi butoanelor radio. Totuşi, uneori designul poate fi modificat, iar etichetele pot fi mutate pentru a apărea în altă parte, de exemplu deasupra câmpurilor cu care sunt asociate, caz în care câmpurile din formular nu vor mai fi asociate deloc cu ele. Dacă însă etichetele au fost incluse într-un element <label>, ele vor fi asociate în continuare cu câmpurile, indiferent unde ar fi mutate în corpul HTML al paginii.

Un alt avantaj al utilizării elementului <label> pentru unele tipuri de câmpuri ca check box-urile sau butoanele radio este acela că utilizatorii de mouse nu trebuie să facă click neapărat pe respectivele câmpuri, ci pot face click şi pe eticheta lor pentru a interacţiona cu ele.

Aşa nu:

Numele: <input type="text" name="numele">

Aşa da:

<label for="numele">Numele:</label>
<input type="text" name="numele" id="numele">

Alternativ, un câmp de formular poate fi asociat cu eticheta sa incluzând întreg câmpul şi eticheta în elementul <label>, caz în care nu mai este nevoie să se folosească atributul id în câmpul respectiv şi nici atributul for în elementul <label>. În acest caz însă, eticheta câmpului nu va putea fi mutată în altă parte în corpul paginii web decât dacă este mutată împreună cu câmpul asociat.

<label>Numele: <input type="text" name="numele"></label>

Creaţi formulare care nu se trimit automat la activarea unui eveniment Javascript!

Nevăzătorii utilizează întotdeauna doar tastatura pentru a completa un formular, iar pentru a selecta de exemplu o anumită opţiune dintr-un combo box trebuie să apese tasta săgeată în jos de mai multe ori până când cursorul ajunge la opţiunea dorită, selectând rând pe rând mai multe alte opţiuni. Dacă formularul se expediază în mod automat după selectarea unui element dintr-un combo box, el va fi expediat imediat după selectarea primei opţiuni, utilizatorul nemaiapucând să ajungă la opţiunea pe care intenţiona să o aleagă.

Dacă într-un formular conţinutul anumitor elemente trebuie să se modifice în funcţie de opţiunile alese anterior în respectivul formular, de exemplu dacă dintr-un combo box trebuie să se aleagă mai întâi judeţul, urmând ca într-un alt combo box să se afişeze doar oraşele din judeţul respectiv, se recomandă utilizarea următoarelor alternative:

• Să se creeze două formulare distincte, primul în care să se aleagă judeţul şi după expedierea lui în funcţie de opţiunea aleasă să se afişeze al doilea formular cu combo box-ul cu orasele completate doar pentru judeţul ales.
• Să se creeze un cod Javascript care după alegerea unui anumit judeţ să facă un apel AJAX, să preia lista oraşelor pentru judeţul ales şi să completeze al doilea combo box, fără a expedia formularul.

Creaţi elemente active care sunt deplin accesibile şi pentru cititoarele de ecran!

Elementele active sunt acele elemente HTML cu care utilizatorii pot interacţiona, cum ar fi linkurile, butoanele sau alte elemente de formular. Elementele <div>, <span>, <img>, câmpurile din tabele sau textul simplu nu sunt elemente active. Cu ajutorul Javascript se pot crea elemente active şi din elemente inactive pentru a le face să arate ca un element activ, însă ele trebuie să ofere toate facilităţile oferite de elementele HTML standard, nu doar să aibă un aspect vizual asemănător. Din acest motiv, este recomandabil ca elementele active, chiar dacă li se modifică aspectul, să fie create din alte elemente active ca linkurile şi elementele de formular.

Să presupunem că doriţi să creaţi un buton cu un design special şi ca un simplu link sau element <button> standard nu este suficient. În acest caz recomandarea este să folosiţi un simplu link sau un element <button> căruia să îi modificaţi aspectul cu ajutorul CSS pentru a arăta cum doriţi. Dacă totuşi este absolută nevoie să creaţi un buton dintr-un element <div>, trebuie să îi adăugaţi câteva atribute pentru a fi accesibil şi pentru utilizatorii unui cititor de ecran.

Adăugaţi atributul tabindex="0"!

Elementele care au definit un atribut tabindex cu o valoare zero sau pozitivă pot deţine focusul, deci utilizatorii de tastatură vor putea găsi respectivul element apăsând tasta Tab. Se recomandă să se dea întotdeauna o valoare zero acestui atribut, pentru a nu modifica ordinea în care sunt selectate elementele active pe pagină fiindcă poate crea confuzie.

Aşa nu:

<div onclick="alert('Incorect!');">Element activ incorect</div>

Rezultatul va fi afişat astfel:

Aşa da:

<div tabindex="0" onclick="alert('Corect!');">Element activ corect</div>

Rezultatul va fi afişat astfel:

Singura diferenţă între cele două variante este ca a doua poate fi găsită apăsând tasta tab, înştiinţându-i pe utilizatorii de tastatură că acel element este unul activ cu care se poate interacţiona, fiind absolut necesar pentru utilizatorii nevăzători. Totuşi, dacă s-ar fi folosit un link sau buton căruia i s-ar fi modificat eventual aspectul în loc să se folosească un element <div> ar fi fost mai bine, fiindca cititoarele de ecran i-ar fi anunţat pe nevăzători că respectivul element este un buton sau un link şi ar fi fost clar ce reprezintă şi cum pot interacţiona cu el. Dacă totuşi se doreşte să se folosească un element <div>, se poate specifica cu ajutorul unui atribut ARIA ce rol are acest element, ca în exemplul următor.

Adăugaţi atributul role!

<div role="button" tabindex="0" onclick="alert('Corect!');">Buton</div>

Rezultatul va fi afişat astfel:

De această dată, când nevăzătorii vor găsi acest element după apăsarea tastei Tab, cititorul de ecran le va spune ca respectivul element este un buton, ca în cazul în care el ar fi fost definit folosindu-se elementul standard <button>. Acest control poate de asemenea să fie găsit utilizând combinaţiile de taste oferite de cititorul de ecran pentru a sări la următorul buton (tasta B) sau la următorul element de formular (tasta F). În cazul unui simplu buton acest lucru este suficient, însă datorită faptului că nu toate browserele şi cititoarele de ecran suportă pentru moment standardul ARIA, este totuşi bine să se folosească elemente active standard cum este <button>. În cazul altor controale mai complexe, cum este cazul unui check box sau buton radio, nu este suficient să se specifice că elementul activ este check box sau buton radio, ci trebuie să se folosească şi alte atribute ARIA şi chiar să se seteze dinamic cu ajutorul Javascript pentru a specifica dacă ele sunt marcate sau nu. Toate aceste eforturi suplimentare pot fi eliminate dacă se folosesc elemente HTML standard a căror aspect este eventual modificat cu ajutorul CSS.

Dacă totuşi se doreşte crearea unui control mai complex pentru care nu există un corespondent în setul de elemente standard HTML, puteţi citi mai multe despre Standardul ARIA pentru a aplica toate atributele necesare creării unui control accesibil pentru toţi.

Dacă utilizaţi butoane imagine în formulare, folosiţi şi atributul alt!

Şi în cazul utilizării imaginilor drept etichetă pentru un buton de expediere a formularelor trebuie să specificaţi la ce este folosit butonul respectiv, nu ce apare în imagine.

Aşa nu:

<input type="image" src="/../../../../../../01020201.png">

Cititorul de ecran va citi acest element "01020201.png Button", nefiind clar care este scopul lui.

Aşa nu:

<input type="image" alt="Săgeată" src="/../../../../../../01020201.png">

Cititorul de ecran va citi "Săgeată Button", nefiind de asemenea prea clar care este scopul respectivului buton.

Aşa da:

<input type="image" alt="Trimite" src="/../../../../../../01020201.png">

Utilizaţi elementele <fieldset> şi <legend> pentru a grupa mai multe câmpuri asociate!

când trebuie grupate mai multe elemente care au ceva anume în comun, este recomandat să se folosească elementul <fieldset> pentru grupare şi elementul <legend> pentru a da un titlu grupului creat.

Aşa nu:

<p>Tipul societăţii:</p>
<input type="radio" name="tip" value="1" id="a1">
<label for="a1">SNC</label><br>
<input type="radio" name="tip" value="2" id="a2">
<label for="a2">SCS</label><br>
<input type="radio" name="tip" value="3" id="a3">
<label for="a3">SRL</label><br>

Rezultatul va arăta astfel:

Tipul societăţii:

SNC
SCS
SRL

 

Aşa da:

<fieldset>
<legend>Tipul societăţii:</legend>
<input type="radio" name="tip" value="1" id="b1">
<label for="b1">SNC</label><br>
<input type="radio" name="tip" value="2" id="b2">
<label for="b2">SCS</label><br>
<input type="radio" name="tip" value="3" id="b3">
<label for="b3">SRL</label><br>
</fieldset>

Rezultatul va arăta astfel:

Tipul societăţii:

SNC
SCS
SRL

În primul caz, când nu se folosesc elementele <fieldset> şi <legend>, cititorul de ecran citeşte doar eticheta butonului radio curent selectat, adică SNC, SCS, SRL, fără a spune ce reprezintă aceste opţiuni. În al doilea caz, înainte de a fi citită eticheta butonului radio curent, cititorul de ecran citeşte conţinutul elementului <legend>, adică Tipul societăţii: SNC, Tipul societăţii: SCS, Tipul societăţii: SRL, fiind clar ce reprezintă aceste opţiuni.

Se poate evita utilizarea elementelor <fieldset> şi <legend> în cazul în care lungimea întrebării curente care ar trebui să fie inclusă în elementul <legend> este foarte mare, deoarece trebuie citită înainte de eticheta fiecărui buton radio şi ar lua mult timp.

Nu vă bazaţi exclusiv pe diferenţele de culoare!

Dacă de exemplu într-un tabel doriţi să scoateţi în evidenţă anumite înregistrări, nu este bine să le coloraţi cu o culoare diferită, ci se recomandă să adăugaţi o coloană în tabel în care să arătaţi textul tipul fiecărei înregistrări. Dacă într-un formular unele câmpuri nu au fost completate corect, nu este bine să le marcaţi cu o anumită culoare fiindcă nevăzătorii nu vor putea şti care sunt câmpurile incorecte, ci trebuie să specificaţi textul care câmpuri au fost completate eronat. Culorile trebuie utilizate doar din motive de design, de estetică, nu şi cu un scop informaţional.

Nu oferiţi indicaţii relative de genul "la stânga", "mai jos"!

Nevăzătorii pot accesa conţinutul unei pagini web în mod secvenţial, ca şi cum întreaga pagină web ar fi o listă lungă cu câte un link sau buton sau line de text pe fiecare rând, putând sări între anumite elemente însă întotdeauna doar în sus sau în jos. Într-un tabel nevăzătorii pot naviga ca într-un program de calcul tabelar, şi îşi pot da seama care coloană este în stânga sau în dreapta, sau care este coloana a treia sau linia a patra, însă la nivelul întregii pagini web nu pot şti care elemente apar în stânga, care în dreapta, care sus sau jos decât într-un mod mai complicat şi oricum destul de aproximativ. Din acest motiv, este bine să indicaţi întotdeauna textul care trebuie căutat, fiindcă în caz contrar indicaţiile pot crea confuzie, în special dacă pe pagina web respectivă există mai multe elemente asemănătoare având doar o poziţionare diferită.

Mărimea caracterelor trebuie să poată fi modificată!

Există utilizatori care au o vedere slabă dar care nu au probleme de vedere atât de mari încât să aibă nevoie de un program de mărire a ecranului. Acestor persoane le este util să poată modifica mărimea caracterelor cu care este scris textul pe site. Este bine dacă site-ul oferă butoane care activează un cod Javascript care modifică mărimea caracterelor în pagina curentă, dar chiar dacă nu se oferă această facilitate mărimea caracterelor trebuie să poată fi modificată cu ajutorul facilităţilor oferite în acest sens de browser.

În momentul creării site-ului, verificaţi cum arată şi dacă este utilizabil în cazul în care mărimea caracterelor este mărită foarte mult.

Oferiţi posibilitatea opririi conţinutului care se mişcă, derulează sau actualizează automat!

În trecut World Wide Web Consortium recomanda să nu se utilizeze elementele <marquee> şi <blink>, care nici măcar nu sunt elemente standard HTML, ci au fost suportate doar în anumite browsere, deoarece mişcarea, clipirea şi actualizarea automată a unor elemente de pe pagina web poate fi deranjantă pentru bolnavii de epilepsie. Acele elemente plus altele create cu Javascript au fost însă utilizate pe scară largă, fiindcă chiar dacă unii proprietari de site-uri web atunci când vizitează alte site-uri nu sunt interesaţi să aştepte până când un text se derulează într-un astfel de element ca să îl citească, presupun că alti vizitatori vor fi încântaţi de respectivul element mişcător dacă se află pe propriul site şi că vor considera site-ul respectiv de o calitate superioară.

Dacă este vorba despre un site informativ, cum ar fi cel al unui ziar electronic, blog, wiki, sau un site de comerţ electronic ori un site pentru administrarea proiectelor, se recomandă să nu se utilizeze niciodată conţinut mişcător, deoarece în general este lipsit de valoare, fiind potrivit doar pentru site-urile de divertisment.

Dacă se utilizează totuşi conţinut care se mişcă sau se derulează, este recomandat să se ofere utilizatorilor posibilitatea opririi acestor elemente. Aceste elemente mişcătoare nefiind elemente standard HTML, ci controale complexe create cu Javascript, se recomandă să se verifice nivelul lor de accesibilitate pentru cititoarele de ecran.

Utilizaţi linkuri directe care se pot deschide într-o nouă fereastră!

Pentru a permite accesarea unui link cu combinaţia Shift+Enter astfel încât pagina web ţintă să se deschidă într-o nouă fereastră, linkul respectiv trebuie să aibă definit atributul href şi acesta să conţină adresa paginii. Acest lucru poate fi foarte util, deoarece după citirea paginii deschise se poate închide cea de a doua fereastră, iar focusul va rămâne în prima fereastră exact pe linkul care a fost accesat, putându-se continua navigarea de unde s-a rămas. Dacă se apasă pur şi simplu Enter sau Spaţiu pe un link iar noua pagină se deschide în aceeaşi fereastră, după revenirea la pagina anterioară de cele mai multe ori focusul se mută la începutul paginii şi trebuie căutat din nou linkul care a fost accesat ultima dată pentru a se continua de acolo inspectarea paginii respective.

Utilizarea de linkuri obişnuite mai are încă un avantaj, şi anume acela că motoarele de căutare folosind aceleaşi mijloace de acces pe care le folosesc şi cititoarele de ecran, vor indexa mai bine site-ul. În plus, fiind vorba despre linkuri simple, paginile web se accesează folosind sigur metoda HTTP GET, ceea ce înseamnă că utilizatorii vor putea adăuga semne de carte pentru respectivele pagini.

Adăugaţi cel puţin un heading pe fiecare pagină înaintea conţinutului principal!

Un heading care să marcheze începutul conţinutului de bază al paginii curente reprezintă principalul mijloc de orientare folosit de nevăzători atunci când întâlnesc o pagină necunoscută. Acest lucru se datorează faptului că din experienţă au observat că paginile de calitate afişează întotdeauna un heading cu titlul paginii sau titlul articolului din pagina curentă chiar înainte de începutul conţinutului.

Este recomandat ca cel mai important titlu de pe pagină să fie definit ca heading de nivelul 1, însă acest lucru este mai puţin important. Foarte important este însă ca acest titlu să fie definit ca heading, adica <h1>, <h2>, <h3>.. nu ca simplu text formatat doar vizual pentru a arata diferit. Este de asemenea important să nu apară pe pagină multe alte texte formatate ca heading-uri deşi nu sunt titluri sau subtitluri, ci doar anumite segmente de text care se doresc a fi formatate cu un caracter mai mare. Şi este de asemenea important ca acest titlu să apară imediat înaintea conţinutului de bază al paginii curente. Dacă aceste condiţii sunt îndeplinite, nevăzătorii vor putea găsi uşor conţinutul util al paginii respective şi o vor considera o pagină de calitate, uşor accesibilă.

Utilizaţi culori cu un contrast puternic între text şi fundal!

În funcţie de afecţiunile vizuale pe care le au unii dintre utilizatori, preferinţele lor coloristice pot fi diferite, însă este important să existe un contrast puternic între text şi fundal. Este de asemenea bine să se evite anumite combinaţii de text şi fundal care ar putea fi văzute ca aceeaşi culoare de unele persoane, de exemplu combinaţiile de roşu/verde, roşu/negru, albastru/galben.

Utilizaţi linkuri cu etichete clare şi când nu sunt citite în context!

Dacă un utilizator nevăzător accesează pagina web folosind tasta Tab pentru a sări de la un link la altul, va fi foarte neclar ce reprezintă un link dacă el va avea doar eticheta "Click here", sau "această pagină". Este recomandat ca etichetele să fie astfel create încât să aibă un înţeles de sine stătător ca de exemplu "Produse şi servicii", "Contactaţi-ne" etc.

Cititorul de ecran JAWS oferă o facilitate care le permite utilizatorilor să genereze o listă cu toate linkurile care apar în pagina curentă, după care pot alege unul dintre linkuri şi deschide pagina respectivă apăsând enter direct în acea listă. În cazul unei astfel de utilizări, este mai dificil să se închidă acea listă şi să se revină la pagină pentru a citi în ce context apare linkul respectiv după care să se genereze din nou lista cu linkuri.

Pentru a soluţiona această problemă în general este nevoie ca textele să fie reformulate.

Aşa nu:

Pentru mai multe detalii despre firma X, faceţi click aici!

Aşa da:

Accesaţi pagina firmei X pentru mai multe detalii!

↑ către cuprins