Diagramok, amelyek mindenki számára működnek

A diagramprobléma

A diagramok és grafikonok természetüknél fogva vizuális objektumok. Az információt forma, pozíció és szín útján kódolják — három olyan csatornán, amely a közönség jelentős része számára vagy értelmezhetetlen, vagy torzított.

A férfiak körülbelül 8%-a él a színlátás valamilyen zavarával. A képernyőolvasót használók semmilyen értelmes információt nem kapnak egy SVG oszlopdiagramból, hacsak a fejlesztő kifejezetten nem gondoskodott róla. A billentyűzettel navigáló felhasználók pedig gyakran egyáltalán nem érik el az interaktív diagramokat.

Az eredmény: az adatvizualizáció valószínűleg a webdesign azon területe, ahol a legszélesebb a szakadék aközött, amit a látó felhasználók tapasztalnak, és amit mindenki más. És ezt a szakadékot a szervezetek ritkán veszik észre, mert az akadálymentességi auditok előbb az űrlapokra és a navigációra összpontosítanak, mint a jelentésoldalak diagramjaira.

Ez az útmutató azt mutatja be, mit igényel valójában az akadálymentes adatvizualizáció — nem ellenőrzőlistát ad, hanem annak megértését, hogy miért buknak el a diagramok, és mit lehet tenni ellene.

Miért különösen nehezek a diagramok

A legtöbb HTML-elemnek van natív szerepe, neve és állapota, amelyet a kisegítő technológiák értelmezni tudnak. Egy <button> gomb. Egy <table> táblázat sorokkal és oszlopokkal. Egy űrlapmezőnek címkéje van.

Egy SVG-ként vagy canvasként megjelenített diagramnak semmi ilyesmije nincs. Ez egy rajz. A képernyőolvasók egy képet látnak (jó esetben), vagy egyáltalán semmit. A fejlesztőnek a szemantikai réteget a nulláról kell újraépítenie.

Ugyanakkor a diagramok gyakran az oldal legfontosabb tartalmát jelentik. Egy havi bevételt mutató oszlopdiagram, egy felhasználónövekedést követő vonaldiagram, egy kategóriamegoszlást bemutató kördiagram — gyakran éppen ezek miatt van a felhasználó az oldalon. Kizárni belőlük a látogatók jelentős részét komoly probléma, nem apró kellemetlenség.

A színprobléma: soha ne hagyatkozzon kizárólag a színre

A leggyakoribb diagram-akadálymentességi hiba, hogy a szín az egyetlen eszköz az adatsorok vagy kategóriák megkülönböztetésére.

Egy vonaldiagram, amelyen négy vonalat kizárólag a színük — piros, kék, zöld, narancssárga — különböztet meg, olvashatatlan sok színlátászavarral élő felhasználó számára, és teljesen értelmezhetetlen bárkinek, aki nagy kontrasztú módot vagy szürkeárnyalatos kijelzőt használ.

A megoldás a redundáns kódolás: használjon színt és legalább egy másik vizuális tulajdonságot.

Vonaldiagramok: használjon eltérő vonalmintákat a színek mellett (folytonos, szaggatott, pontozott, pont-vonal)
Oszlopdiagramok: használjon textúrákat vagy mintákat a színek mellett, vagy helyezzen adatcímkéket közvetlenül az oszlopokra
Pontdiagramok: használjon eltérő jelölőformákat (kör, négyzet, háromszög, rombusz) a színek mellett
Kördiagramok: adjon szöveges címkéket minden cikkelyen belülre vagy mellé — soha ne hagyatkozzon kizárólag a jelmagyarázatra

Ez a WCAG 2.2 1.4.1 Színek használata (A szint) követelménye alá tartozik: a szín nem lehet az információközlés egyetlen eszköze.

Kontraszt a diagramokban

A nem szöveges vizuális elemeknek — diagramoszlopoknak, vonalaknak, adatpontoknak — 3:1 kontrasztarányt kell elérniük a háttérhez képest az 1.4.11 Nem szöveges tartalom kontrasztja (AA szint) követelmény szerint. Tesztelje diagramszínpalettáját kontrasztellenőrzővel — sok márkapaletta, amely nagy felületeken jól mutat, kisebb méretekben elbukik ezen a követelményen.

A diagramokon belüli szövegeknek — tengelyfeliratoknak, adatcímkéknek, jelmagyarázatoknak — ugyanazokat a kontrasztkövetelményeket kell teljesíteniük, mint a törzsszövegnek: 4,5:1 normál szövegnél, 3:1 nagy szövegnél az 1.4.3 Minimális kontraszt követelmény szerint.

Szöveges alternatívák biztosítása

Minden diagramhoz szükség van olyan szöveges alternatívára, amely átadja a megjelenített adatokat. Hogy ez pontosan milyen formát ölt, az adatok összetettségétől függ.

Egyszerű diagramok: leíró alt szöveg

Egy öt értéket mutató oszlopdiagramnál egy jól megírt alt attribútum összefoglalhatja a legfontosabb megállapítást:

<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."
>

Az itteni alt szöveg két dolgot tesz: megadja az adatpontokat, és összefoglalja a fő tanulságot. Ne csupán vizuálisan írja le a diagramot („bevételt mutató oszlopdiagram”). Azt írja le, amit a diagram közöl.

Összetett diagramok: kiegészítő adattáblázatok

Ha egy diagram több adatot tartalmaz, mint amennyi egy alt attribútumba fér, biztosítson a közelében egy akadálymentes adattáblázatot. Ez azokat is kiszolgálja, akik a vizuális formátumok helyett a táblázatos adatokat kedvelik. A táblázat alapértelmezetten rejtett is lehet, de elérhetőnek kell lennie:

<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>

SVG-specifikus minták

A beágyazottan (nem képfájlként) megjelenített SVG-diagramok ARIA segítségével közvetlenül akadálymentessé tehetők. A legfontosabb minták:

Adjon role="img" attribútumot az <svg> elemhez
Biztosítson <title> elemet az <svg> első gyermekeként, és kapcsolja hozzá aria-labelledby attribútummal
Adjon hozzá <desc> elemet a hosszabb leírásokhoz, és kapcsolja hozzá aria-describedby attribútummal
Jelölje meg a díszítő elemeket (rácsvonalakat, tengelyosztásokat) aria-hidden="true" attribútummal a zaj csökkentése érdekében

Az interaktív diagramoknál, ahol a felhasználók adatpontokat választhatnak ki, minden interaktív elemnek megfelelő szerepre, névre és billentyűzettámogatásra van szüksége.

Billentyűzetes navigáció interaktív diagramokhoz

Ha a diagramjai interaktívak — buboréksúgók rámutatáskor, kattintható szegmensek, kijelölés és nagyítás —, teljes mértékben kezelhetőnek kell lenniük billentyűzetről a 2.1.1 Billentyűzet (A szint) követelmény szerint.

Sok adatpontot tartalmazó diagramoknál valósítsa meg a mozgó tabindex mintát: a diagram elemei közül egyszerre csak egy szerepel a tabulátorsorrendben, a nyílbillentyűk pedig az adatpontok között mozognak a diagramon belül.

<!-- 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>

A csak rámutatáskor megjelenő buboréksúgóknak billentyűzetfókusznál is meg kell jelenniük. Egy kizárólag az egérhasználók számára látható buboréksúgó akadálymentességi hiba.

A megfelelő diagramtípus kiválasztása

Egyes diagramtípusok természetüknél fogva akadálymentesebbek, mint mások. Amikor van választása:

Diagramtípus	Akadálymentesség	Megjegyzések
Oszlopdiagram	Magas	A mennyiségek könnyen kódolhatók címkékkel; jó billentyűzettámogatás lehetséges
Vonaldiagram	Magas	Használjon eltérő vonalmintákat; lássa el jegyzettel a kulcspontokat
Táblázat	Legmagasabb	A legkönnyebben akadálymentesíthető; adatokhoz gyakran ez a helyes választás
Pontdiagram	Közepes	Gondos jelölőmegkülönböztetést igényel; a billentyűzetes navigáció összetett
Hőtérkép	Alacsony	Természeténél fogva színfüggő; mindig biztosítson táblázatos alternatívát
Kör-/fánkdiagram	Alacsony	Az értékek nehezen összehasonlíthatók; 3-4 szegmensnél többhöz kerülje

Kétség esetén egy jól formázott táblázat szinte mindig akadálymentesebb, mint egy diagram — és fogyatékosságtól függetlenül gyakran könnyebben is olvasható. Ne azért használjon diagramot, mert modernnek tűnik; akkor használja, ha valóban segít a felhasználóknak gyorsabban megérteni egy trendet vagy összehasonlítást, mint a táblázatos adatok.

A diagramok tesztelése

Az automatizált akadálymentességi ellenőrzők ki tudják szűrni a hiányzó alt attribútumokat és néhány ARIA-mintát, de nem tudják ellenőrizni, hogy a diagram adatai értelmesek-e, hogy a billentyűzetes navigáció helyesen működik-e, vagy hogy a diagram érthető-e egy képernyőolvasót használó felhasználó számára. Tesztelje a következőkkel:

Képernyőolvasóval (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): navigáljon a diagramhoz, és ellenőrizze, mi kerül felolvasásra
Csak billentyűzettel: tabuláljon a diagramhoz, és győződjön meg róla, hogy minden interaktív elem elérhető és kezelhető billentyűzetről
Színtévesztés-szimulációval: használja a Chrome DevTools eszközt (Rendering > Emulate vision deficiency), hogy lássa, hogyan jelenik meg a diagram a színlátászavar különböző típusai mellett
200%-os nagyítással: ellenőrizze, hogy a címkék és jelmagyarázatok nem fedik-e egymást, és nem vágódnak-e le

Képernyőolvasós kiértékelési szolgáltatásunk a kisegítő technológiák valódi felhasználóival teszteli a diagramokat — ez a leggyorsabb módja annak, hogy megtudja, mit tapasztalnak valójában a felhasználói.