A hozzáférhető chart nem egy hosszabb alt szöveg

Egy chart nem csak kép. Adatot, viszonyt, sorrendet, bizonytalanságot és gyakran interakciót is hordoz. Egyetlen alt attribútum ezt ritkán viszi át jól.

Az alt szöveg azonosít. A cikk szövege értelmez. A táblázat pontosít. Az interakció akkor jó, ha billentyűzettel, mozgáscsökkentéssel és állapotjelzéssel sem esik szét.

Mit ad át egy chart?

Egy egyszerű oszlopdiagramnál a vizuális forma látszólag csak annyit mond: három hasáb, három érték. Valójában ennél több történik. A hasábok közös bázisról indulnak, a magasságuk mennyiséget kódol, a sorrend gyakran rangsort sugall, a szín kiemelést ad, a cím pedig kijelöli, melyik összehasonlítás a fontos.

Egy vonaldiagram még sűrűbb. Nemcsak értékeket mutat, hanem pályát is. A meredekség gyorsulást vagy lassulást sugall. A töréspontok eseményeket hívhatnak elő. A tengely beállítása, az idősűrűség és a cím együtt döntik el, hogy trend, kilengés vagy drámai fordulat rajzolódik ki.

Ezt nem lehet annyival helyettesíteni, hogy „vonaldiagram növekvő értékekkel”. Az formai leírás, nem adatállítás.

Az alt szöveg helye

Az alt szöveg rövid azonosító. Megmondja, mi az ábra és milyen információt hordoz. Egy komplex chartnál nem ez viszi el a teljes jelentést.

Jó irány például:

• „Vonaldiagram a havi előfizetőszám 2025-ös alakulásáról.”
• „Oszlopdiagram a három termékkategória éves bevételéről.”
• „Térkép a munkanélküliségi ráta vármegyei különbségeiről.”

Ezek még nem mondják el a teljes történetet. Nem is ez a dolguk. A rövid leírás kaput nyit, nem helyettesíti az elemzést.

Rossz irány:

• „Kék és zöld vonalak egy sötét háttéren.”
• „Három magas oszlop és egy alacsonyabb.”
• „Színes térkép Magyarországról.”

Ezek a látványt írják körül, miközben az adatállítás eltűnik. A chart nem azért van a cikkben, mert kék vonalak vannak rajta, hanem mert valamit állít a világról.

A hosszabb leírás nem szépirodalom

Komplex ábránál a rövid alt mellé külön szöveges tartalom kellhet. Ez lehet közvetlenül a chart mellett, a cikk bekezdéseiben, egy részletes képaláírásban vagy külön lenyitható blokkban.

A jó hosszabb leírás nem képpé próbál válni. Nem sorolja fel minden rácsvonal helyét, minden színárnyalatot, minden vizuális részletet. A fő információt adja át:

1. milyen adatról van szó;
2. milyen időszakot, csoportot vagy területet fed le;
3. mi a legfontosabb mintázat;
4. vannak-e kivételek vagy töréspontok;
5. milyen korlát vagy bizonytalanság tartozik az állításhoz.

Egy chartleírás például így már tartalmat ad:

„A havi előfizetőszám januártól júliusig gyorsan nőtt, majd a növekedés lassult. Szeptember volt a legerősebb hónap, decemberben pedig az érték még mindig 12%-kal magasabb volt, mint januárban.”

Ez nem a képet írja le. Az állítást mondja ki.

A táblázat nem mellékes dolog

A chart gyors mintázatot ad, a táblázat pontos értéket. A kettő nem egymás ellen dolgozik.

Ha egy cikkben konkrét számokra épül az állítás, az adattábla nem udvariassági kör. Ott látszik, miből jön a grafikon. Ott ellenőrizhető, melyik évhez, melyik kategóriához, melyik értékhez tartozik az állítás.

Egy jó adatfallback legalább ennyit tud:

1. tartalmazza a charton szereplő értékeket;
2. megőrzi a sorok és oszlopok jelentését;
3. jelöli a mértékegységet;
4. megnevezi az időszakot és a forrást;
5. letölthető formában is elérhető, ha az adat további elemzésre alkalmas.

A táblázat markupja sem csak technikai részlet. Fejlécek nélkül egy adatmátrix könnyen elveszti a szerkezetét. Egyszerű táblánál elég lehet a th és a jól megírt caption. Bonyolultabb táblánál a sor- és oszlopfejlécek explicit kapcsolata is számít.

Mikor elég a szöveg, és mikor kell adat?

Nem minden chart mellé kell teljes adattábla. Egy illusztratív, nagyon egyszerű grafika esetén a cikk szövege is átadhatja a lényeget.

Más a helyzet, ha a chart:

1. sok kategóriát mutat;
2. pontos értékekre épít;
3. interaktívan változik;
4. több nézet között vált;
5. bizonytalanságot, tartományt vagy szűrést használ;
6. olyan állítást tesz, amelyet számszerűen ellenőrizni kell.

Ilyenkor a szöveg önmagában kevés. Kell egy strukturált út is az adathoz.

Interaktív chartnál a fallback is állapotfüggő

Egy statikus kép könnyebb eset. Egy interaktív chart már nemcsak megjelenik, hanem működik.

Ha szűrő, léptető, hover, animáció vagy scrollytelling jelenet van benne, a hozzáférhetőség nem állhat meg az első állapotnál. Minden fontos nézetnek kell értelmes neve, állapota és szöveges megfelelője.

Egy scrollytelling chartnál például nem elég, hogy az első képernyőn van egy alt szöveg. A jelenetek változnak: először teljes skála, utána csonkolt tengely, majd indexált nézet. Ezek más állítások. A kísérőszövegnek és az állapotjelzésnek is együtt kell mozognia velük.

Itt jön be az aria-live, de óvatosan. Nem általános megoldás minden chartproblémára. Akkor hasznos, ha egy interaktív állapotváltozás rövid, értelmes szöveggel jelezhető. Ha a változás strukturált adatot vagy hosszabb értelmezést kíván, külön tartalom kell.

SVG, canvas, kép: nem ugyanaz a feladat

Nem mindegy, miből áll a chart technikailag.

Egy sima PNG vagy SVG kép esetén a rövid alt szöveg az alap. Ha a kép komplex adatot hordoz, a hosszabb leírás és az adattábla külön rétegként jelenik meg mellette.

Egy inline SVG már több lehetőséget ad. Lehet saját címe, leírása, csoportosított elemei, szöveges címkéi. Ettől még nem lesz automatikusan jó. Egy bonyolult SVG, amely minden pontot külön elemként ad át, könnyen zajosabb lesz, mint egy jól megírt összefoglaló és egy táblázat.

Canvas esetén más a helyzet. A canvas rajzolt felület; a benne lévő vonalak, pontok és címkék önmagukban nem programozottan bejárható tartalmak. Ilyenkor külön HTML-réteg kell: cím, összefoglaló, állapotjelzés, táblázat, kontrollok.

Az eszköz tehát nem ment fel a tartalom alól. Egy szép SVG is lehet hozzáférhetetlen, és egy canvas chart is lehet jól használható, ha a jelentés nem csak a pixelekben él.

Billentyűzet, fókusz, mozgás

Az interaktív chart nem csak egérrel létezik. Ha van vezérlő, annak fókuszálhatónak kell lennie. Ha van léptetés, működjön billentyűzettel. Ha van aktív állapot, látszódjon a fókusz. Ha van animáció, a reduced-motion beállítás ne dekorációként kezelődjön.

A mozgás különösen fontos adatvizualizációnál. Az animáció sokat segíthet: megmutatja, hogyan alakul át egy nézet, mi marad azonos, mi változik. De ha túl gyors, túl sok, vagy nem kikapcsolható, akkor a forma már nem segít, hanem zajt termel.

Reduced motion esetén nem feltétlenül kell mindent eltüntetni. A lényeg az, hogy a tartalmi állapotok mozgás nélkül is bejárhatók legyenek. Egy morfoló chart helyett megjelenhet az új állapot azonnal. Egy hosszú átmenet helyett elég lehet rövid fade vagy semmi animáció.

Hover nem lehet egyetlen út

Sok interaktív chart hoverre mutatja a pontos értéket. Ez kényelmes egérrel, de önmagában kevés. Érintőképernyőn nincs klasszikus hover. Billentyűzettel sem ugyanaz a működés.

Ha a pontos érték csak tooltipben látszik, akkor a tooltip tartalma más úton is legyen elérhető. Ez lehet fókuszra nyíló tooltip, külön adatpanel, táblázat vagy közvetlen címke. A lényeg nem a tooltip megtartása, hanem az információ elérhetősége.

Különösen fontos ez térképeknél és sűrű pontdiagramoknál. Ha minden részlet csak rámutatásra jelenik meg, akkor a chart valójában egy rejtett adatbázis. A keresés, szűrés, lista vagy táblázat sokszor tisztább út.

Szín: nem az egyetlen kód

A szín erős szerkesztői eszköz, de önmagában törékeny. Ha a piros és zöld jelenti a különbséget, akkor a különbség színlátástól függ. Ha a térképen csak árnyalat mutatja a kategóriákat, akkor gyenge kontrasztnál elmosódhat a szerkezet.

Jó chartnál a szín mellett van más jel is: pozíció, forma, címke, minta, vonalstílus vagy közvetlen felirat. Nem kell mindent túlmagyarázni. Elég, ha a jelentés nem egyetlen vizuális csatornán múlik.

Különösen veszélyes, amikor a szín egyszerre jelent kategóriát, intenzitást és kiemelést. Ilyenkor a chart szépnek tűnhet, de a kódolás összekeveredik. Kevesebb szín sokszor tisztább állítást ad.

Jelmagyarázat helyett közvetlen címke

A jelmagyarázat gyakran szükséges, de sokszor kerülőút. Ha egy vonaldiagramon három sor fut, és a színek jelentését külön dobozból kell visszakeresni, minden összevetés plusz mentális munkát kér.

Közvetlen címkével sok chart tisztább. A sorozat neve a vonal végén, a fontos pont mellett vagy a csoport közelében jelenik meg. Így kevesebb az ide-oda keresés, és kisebb a félreolvasás esélye.

Ez nem minden chartnál működik. Sűrű ábránál a közvetlen címkék összeérhetnek. Ilyenkor a jelmagyarázat maradhat, de a fő állítás kapjon külön kiemelést: címben, annotációban vagy külön sorban.

Kontraszt és tipográfia

Az adatvizualizációban a felirat nem másodlagos dísz. Tengely, jelmagyarázat, közvetlen címke, annotáció, mértékegység: ezek tartalmi elemek.

Ha a címke túl kicsi, túl halvány, vagy csak hoverre jelenik meg, a chart egy része elveszik. Ha a jelmagyarázat messze van a sorozattól, minden összevetés fejben történik. Ha a tengelyen nincs mértékegység, a szám lebegni kezd.

A jó chart tipográfiája visszafogott, de nem félénk. A kevésbé fontos elemek lehetnek halványabbak, de nem tűnhetnek el. A kiemelés lehet erősebb, de nem írhatja át az adat arányait.

Mobilon újra kell gondolni

A mobilnézet nem csak kisebb desktop. Egy széles, sokcímkés grafikon keskeny képernyőn hamar elveszti a szerkezetét.

Ilyenkor több megoldás is működhet:

1. kevesebb sorozat egyszerre;
2. vízszintes görgetés helyett kisebb panelek;
3. hosszú kategórianév helyett rövidebb címke és részletesebb táblázat;
4. hover helyett érintésre vagy fókuszra nyíló adatpanel;
5. külön mobil összefoglaló, ha a chart fő állítása kicsiben már nem olvasható.

Nem minden chartot kell mobilon ugyanúgy megtartani. A forma változhat, ha az adatállítás megmarad.

Bizonytalanság és hiányzó adat

A hozzáférhetőséghez az is hozzátartozik, hogy a bizonytalanság ne csak vizuális árnyalatként jelenjen meg.

Ha egy vonal körül konfidenciasáv látszik, a szövegben is szerepeljen, hogy becslésről vagy tartományról van szó. Ha az adatsorban hiányzó évek vannak, a vonal ne tegyen úgy, mintha folytonos mérés történt volna. Ha egy térkép egyes területein nincs adat, az ne csak halvány szürke folt legyen.

Ilyen esetekben a fallback nem extra magyarázat, hanem a korrekt állítás része. A chart nemcsak azt mutatja, amit tudunk, hanem azt is, amit nem.

A cím és az akadálymentes tartalom ugyanazt állítsa

A hozzáférhető chart egyik leggyakoribb hibája, hogy a vizuális cím állít valamit, az alt szöveg mást mond, a táblázat pedig csak nyers adatként ott marad alatta.

Ha a cím szerint „a növekedés július után lassult”, akkor a hosszabb leírásban is legyen ott a július utáni lassulás. Ha a chart egy kiugró kategóriát emel ki, a szöveges alternatíva se csak kategórialistát adjon. Ha a bizonytalanság látszik a grafikonon, az ne tűnjön el a fallbackből.

Az információs egyenértékűség nem formai azonosság. Nem ugyanazt a képet kell újra előállítani szavakból. Ugyanazt az állítást kell hozzáférhetővé tenni.

Egy rövid példa

Tegyük fel, hogy egy cikk három régió munkanélküliségi rátáját hasonlítja össze 2020 és 2025 között.

Gyenge alt:

„Vonaldiagram három színes vonallal.”

Jobb alt:

„Vonaldiagram három régió munkanélküliségi rátájának 2020 és 2025 közötti alakulásáról.”

Jó rövid összefoglaló:

„Mindhárom régióban csökkent a munkanélküliségi ráta 2020 és 2025 között, de az északi régió végig magasabb szinten maradt.”

Jó hosszabb leírás:

„A déli és a nyugati régió 2021 után közel azonos pályán mozgott, 2025-re 4% körüli értékkel. Az északi régió ugyan szintén csökkent, de 2025-ben is 6% felett maradt. A különbség 2020-ban volt a legnagyobb, majd fokozatosan szűkült.”

Adattábla:

Itt nem a látvány részletei ismétlődnek. Az adatállítás több csatornán jelenik meg: röviden, értelmezve és pontos értékekkel.

Gyakori csúszások

Túl hosszú alt: a teljes elemzés bekerül az alt attribútumba, miközben a szerkezet eltűnik. Hosszabb leírásnak jobb helye van a tartalomban.

Csak vizuális leírás: a szöveg színeket, vonalakat és dobozokat sorol, de nem mondja ki az adatállítást.

Csak adatdump: a táblázat ott van, de nincs rövid összefoglaló, így a minta nem jelenik meg.

Csak hover: a pontos értékek kizárólag rámutatásra látszanak.

Szín az egyetlen különbség: a kategóriák vagy állapotok csak árnyalatból derülnek ki.

Animáció mint jelentés: a változás csak mozgás közben érthető, statikus vagy reduced-motion állapotban nem.

Forrás nélküli fallback: a chart alatt van táblázat, de nincs forrás, mértékegység vagy időszak.

Gyors ellenőrzés publikálás előtt

1. A rövid alt azonosítja a chartot és az adat tárgyát.
2. A fő állítás szövegben is szerepel.
3. A pontos értékek táblázatban vagy letölthető adatban elérhetők, ha az állítás számokra épül.
4. A szín mellett van más jel is, ha a szín jelentést hordoz.
5. Az interaktív állapotok billentyűzettel is bejárhatók.
6. Az animáció reduced-motion mellett sem rejti el a tartalmat.
7. A cím, a chart és a fallback ugyanazt az adatállítást hordozza.

Mi maradjon meg?

A hosszú alt szöveg gyakran csak a probléma tünete. A valódi kérdés az, hogy a chart jelentése hol érhető el.

Rövid azonosítás, világos állítás, strukturált adat, működő interakció, tiszta kontraszt. Ezek együtt adják azt, amit egyetlen mondatnyi alt szöveg nem tud.

A hozzáférhető chart nem kevésbé vizuális. Csak nem egyetlen csatornára bízza a jelentést.