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

Egy chart képi objektumként jelenik meg, de adatot, viszonyt, sorrendet, bizonytalanságot és gyakran interakciót is hordoz. Egyetlen alt attribútum ritkán viszi át mindezt 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, reduced-motion módban és állapotjelzéssel sem esik szét.

Mit ad át egy grafikon?

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 pedig könnyen dramatizálhatja a változást.

Az alt szöveg helye

Az alt szöveg rövid azonosító. Megmondja, mi az ábra és milyen információt hordoz. Komplex chartnál a teljes jelentés több rétegből áll össze.

Jó irány például:

• „Vonaldiagram a szakrendelési várólista 2025-ös havi 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.”

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.

Hosszabb leírás

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 a fő információt adja át, nem minden rácsvonalat, színárnyalatot és vizuális részletet:

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 grafikonleírás például így már tartalmat ad:

„A várólista januártól júliusig gyorsan csökkent, ősszel viszont lelassult a javulás. Decemberben az érték még mindig jóval alacsonyabb volt, mint év elején.”

Táblázat és adat

Az adatgrafikon gyors mintázatot ad, a táblázat pontos értéket. A kettő együtt dolgozik.

Ha egy cikkben konkrét számokra épül az állítás, az adattáblának tartalmi szerepe van. Ott látszik, miből jön a grafikon, és ellenőrizhető, melyik évhez, melyik kategóriához, melyik értékhez tartozik az állítás.

Egy jó data fallback legalább ennyit tud:

1. tartalmazza a grafikonon 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.

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

Ha szűrő, léptető, rámutatásra nyíló tooltip, 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 grafikonnál 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: rövid, dinamikus állapotfrissítést tud jelezni képernyőolvasónak. Nem általános megoldás minden grafikonproblémára. Akkor hasznos, ha egy interaktív változás tömören közölhető. Ha a változás strukturált adatot vagy hosszabb értelmezést kíván, külön tartalom kell.

SVG, canvas, kép

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 több lehetőséget ad: lehet saját címe, leírása, csoportosított elemei, szöveges címkéi. Canvas esetén külön HTML-réteg kell: cím, összefoglaló, állapotjelzés, táblázat, kontrollok. Egy szép SVG is lehet hozzáférhetetlen, és egy canvas grafikon is lehet jól használható, ha a jelentés nem csak a pixelekben él.

Billentyűzet, fókusz, mozgás

Az interaktív grafikon egér nélkül is használható kell legyen. 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 ne dekorációként kezelődjön.

Az animáció segíthet megmutatni, hogyan alakul át egy nézet, mi marad azonos, mi változik. Ha túl gyors, túl sok, vagy nem kikapcsolható, akkor már zajt termel. Reduced-motion módban a tartalmi állapotok mozgás nélkül is bejárhatók legyenek: a folyamatosan átalakuló grafikon helyett megjelenhet az új állapot azonnal, egy hosszú átmenet helyett elég lehet rövid fade vagy semmi animáció.

Hover és pontos érték

Sok interaktív grafikon 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, 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 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 grafikon valójában egy rejtett adatbázis. A keresés, szűrés, lista vagy táblázat sokszor tisztább út.

Szín és redundáns jelölés

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ó grafikonná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 kódolás összekeveredik. Kevesebb szín sokszor tisztább állítást ad.

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. A jelmagyarázat gyakran szükséges, de ha a sorozat neve közvetlenül a vonal végén vagy a fontos pont mellett is elfér, kisebb a félreolvasás esélye.

Ha a címke túl kicsi, túl halvány, vagy csak rámutatásra jelenik meg, a grafikon 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ó grafikon 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 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 grafikon fő állítása kicsiben már nem olvasható.

Mobilon a forma változhat, ha az adatállítás megmarad.

Cím és akadálymentes tartalom

A hozzáférhető grafikon 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 grafikon egy kiugró kategóriát emel ki, a szöveges alternatíva se csak kategórialistát adjon. Ha konfidenciasáv, hiányzó év vagy adathiányos térképrész szerepel a vizuális nézetben, az ne tűnjön el a fallbackből.

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

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 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 mozgáscsökkentett állapotban nem.

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

Záró ellenőrzés

Publikálás előtt érdemes együtt nézni a rövid azonosítást, a hosszabb leírást, az adattáblát, a kontrollokat, a kontrasztot és a reduced-motion állapotot. A hozzáférhetőség ezek együttállásából derül ki, nem az alt szöveg hosszából.