Cum să construiești grafice care funcționează pentru toată lumea

Problema graficelor

Graficele și diagramele sunt obiecte inerent vizuale. Ele codifică informația prin formă, poziție și culoare — trei canale care sunt fie lipsite de sens, fie distorsionate pentru o parte semnificativă a publicului tău.

Aproximativ 8% dintre bărbați au o formă de deficiență de vedere a culorilor. Utilizatorii de cititoare de ecran nu primesc nicio informație utilă dintr-un grafic cu bare în SVG, decât dacă dezvoltatorul a furnizat-o în mod explicit. Iar utilizatorii de tastatură constată adesea că graficele interactive sunt complet inaccesibile.

Rezultatul: vizualizarea datelor este probabil zona din designul web în care decalajul dintre ceea ce experimentează utilizatorii văzători și ceea ce experimentează toți ceilalți este cel mai mare. Și este un decalaj pe care organizațiile îl observă rareori, pentru că auditurile de accesibilitate se concentrează pe formulare și navigare înainte de a ajunge la graficele de pe pagina de rapoarte.

Acest ghid acoperă ce presupune de fapt vizualizarea accesibilă a datelor — nu o listă de bifat, ci o înțelegere a motivelor pentru care graficele eșuează și a ceea ce poți face în privința lor.

De ce sunt graficele deosebit de dificile

Majoritatea elementelor HTML au un rol, un nume și o stare native, pe care tehnologiile de asistare le înțeleg. Un <button> este un buton. Un <table> este un tabel cu rânduri și coloane. Un câmp de formular are o etichetă.

Un grafic redat ca SVG sau canvas nu are nimic din toate acestea. Este un desen. Cititoarele de ecran văd o imagine (dacă ai noroc) sau absolut nimic. Dezvoltatorul trebuie să reconstruiască stratul semantic de la zero.

În același timp, graficele sunt adesea cel mai important conținut de pe o pagină. Un grafic cu bare care arată veniturile lunare, un grafic liniar care urmărește creșterea numărului de utilizatori, o diagramă circulară care detaliază distribuția pe categorii — acestea sunt adesea motivul pentru care utilizatorul se află pe pagină. A le exclude pentru o parte semnificativă a vizitatorilor este o problemă serioasă, nu un inconvenient minor.

Problema culorii: nu te baza niciodată doar pe culoare

Cel mai frecvent eșec de accesibilitate al graficelor este folosirea culorii ca unic mijloc de a distinge seriile de date sau categoriile.

Un grafic liniar cu patru linii diferențiate doar prin culoare — roșu, albastru, verde, portocaliu — este ilizibil pentru mulți utilizatori cu deficiențe de vedere a culorilor și complet lipsit de sens pentru oricine folosește un mod cu contrast ridicat sau un afișaj în tonuri de gri.

Soluția este codificarea redundantă: folosește culoarea plus cel puțin o altă proprietate vizuală.

Grafice liniare: folosește modele de linii diferite alături de culori (continuă, întreruptă, punctată, linie-punct)
Grafice cu bare: folosește texturi sau modele alături de culori sau adaugă etichete de date direct pe bare
Diagrame de dispersie: folosește forme de marcatori diferite (cerc, pătrat, triunghi, romb) alături de culori
Diagrame circulare: adaugă etichete text în interiorul fiecărei felii sau lângă ea — nu te baza niciodată doar pe o legendă

Acest lucru intră sub incidența WCAG 2.2 1.4.1 Utilizarea culorii (Nivel A): culoarea nu trebuie să fie singurul mijloc de transmitere a informațiilor.

Contrastul pentru grafice

Elementele vizuale non-text, precum barele graficelor, liniile trasate și punctele de date, trebuie să atingă un contrast de 3:1 față de fundal, conform 1.4.11 Contrast non-text (Nivel AA). Testează paleta graficelor tale cu un verificator de contrast — multe palete de brand care arată bine pe suprafețe mari eșuează la această cerință la dimensiuni mai mici.

Textul din grafice — etichetele axelor, etichetele de date, legendele — trebuie să respecte aceleași cerințe de contrast ca textul de bază: 4,5:1 pentru textul normal, 3:1 pentru textul mare, conform 1.4.3 Contrast minim.

Furnizarea de alternative text

Fiecare grafic are nevoie de o alternativă text care să transmită datele pe care le afișează. Forma exactă pe care o ia aceasta depinde de cât de complexe sunt datele.

Grafice simple: text alternativ descriptiv

Pentru un grafic cu bare care arată cinci valori, un atribut alt bine scris poate rezuma concluzia principală:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Textul alternativ de aici face două lucruri: enunță punctele de date și rezumă informația-cheie. Nu descrie doar graficul din punct de vedere vizual („un grafic cu bare care arată veniturile”). Descrie ce comunică graficul.

Grafice complexe: tabele de date suplimentare

Când un grafic conține mai multe date decât încap într-un atribut alt, oferă în apropiere un tabel de date accesibil. Acesta servește și persoanelor care preferă datele tabelare formatelor vizuale. Tabelul poate fi ascuns în mod implicit, dar trebuie să rămână accesibil:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

Modele specifice SVG

Graficele SVG redate inline (mai degrabă decât ca fișiere imagine) pot fi făcute direct accesibile folosind ARIA. Modele-cheie:

Adaugă role="img" pe elementul <svg>
Oferă un <title> ca prim copil al elementului <svg> și leagă-l prin aria-labelledby
Adaugă un <desc> pentru descrieri mai lungi și leagă-l prin aria-describedby
Marchează elementele decorative (liniile de grilă, gradațiile) cu aria-hidden="true" pentru a reduce zgomotul

Pentru graficele interactive în care utilizatorii pot selecta puncte de date, fiecare element interactiv are nevoie de un rol, un nume și un suport de tastatură adecvate.

Navigarea cu tastatura pentru graficele interactive

Dacă graficele tale sunt interactive — indicii afișate la trecerea cursorului, segmente pe care se poate da clic, selectare și mărire — ele trebuie să fie complet operabile de la tastatură, conform 2.1.1 Tastatură (Nivel A).

Pentru graficele cu multe puncte de date, implementează un model de tabindex itinerant: un singur element din grafic se află în secvența de tabulare la un moment dat, iar tastele săgeți mută focalizarea între punctele de date din interiorul graficului.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Indiciile care apar doar la trecerea cursorului trebuie să apară și la focalizarea cu tastatura. Un indiciu vizibil doar pentru utilizatorii de mouse este un eșec de accesibilitate.

Alegerea tipului potrivit de grafic

Unele tipuri de grafice sunt inerent mai accesibile decât altele. Atunci când ai de ales:

Tip de grafic	Accesibilitate	Observații
Grafic cu bare	Ridicată	Cantitățile se codifică ușor cu etichete; suportul de tastatură este fezabil
Grafic liniar	Ridicată	Folosește modele de linii diferite; adnotează punctele-cheie
Tabel	Cea mai ridicată	Cel mai ușor de făcut accesibil; adesea alegerea potrivită pentru date
Diagramă de dispersie	Medie	Necesită o diferențiere atentă a marcatorilor; navigarea cu tastatura este complexă
Hartă termică	Scăzută	Dependentă de culoare prin natura ei; oferă întotdeauna o alternativă tabelară
Diagramă circulară/inelară	Scăzută	Valorile sunt greu de comparat; evită pentru mai mult de 3–4 segmente

Când ai îndoieli, un tabel bine formatat este aproape întotdeauna mai accesibil decât un grafic — și adesea mai ușor de citit indiferent de dizabilitate. Nu folosi un grafic pentru că arată modern; folosește-l atunci când îi ajută cu adevărat pe utilizatori să înțeleagă o tendință sau o comparație mai repede decât ar face-o datele tabelare.

Testarea graficelor tale

Scanerele automate de accesibilitate pot verifica atributele alt lipsă și unele modele ARIA, dar nu pot verifica dacă datele graficului sunt inteligibile, dacă navigarea cu tastatura funcționează corect sau dacă graficul are sens pentru un utilizator de cititor de ecran. Testează cu:

Un cititor de ecran (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): navighează la grafic și verifică ce este anunțat
Doar tastatura: navighează cu Tab până la grafic și confirmă că toate elementele interactive pot fi atinse și operate de la tastatură
Simularea daltonismului: folosește Chrome DevTools (Rendering > Emulate vision deficiency) pentru a vedea cum apare graficul sub diferite tipuri de deficiențe de vedere a culorilor
Mărirea la 200%: verifică dacă etichetele și legendele nu se suprapun și nu sunt tăiate

Serviciul nostru de evaluare cu cititor de ecran testează graficele cu utilizatori reali de tehnologii de asistare — cea mai rapidă modalitate de a afla ce experimentează de fapt utilizatorii tăi.