Grafy, které fungují pro každého: přístupná vizualizace dat

Problém s grafy

Grafy a diagramy jsou ze své podstaty vizuální objekty. Kódují informace pomocí tvaru, pozice a barvy — tří kanálů, které jsou pro významnou část vašeho publika buď bezvýznamné, nebo zkreslené.

Zhruba 8 % mužů má nějakou formu poruchy barvocitu. Uživatelé čteček obrazovky nezískají z SVG sloupcového grafu žádnou smysluplnou informaci, pokud ji vývojář explicitně neposkytl. A pro uživatele klávesnice jsou interaktivní grafy často zcela nedosažitelné.

Výsledek: vizualizace dat je pravděpodobně oblastí webdesignu, kde je propast mezi tím, co zažívají vidící uživatelé, a tím, co zažívají všichni ostatní, nejširší. A je to propast, které si organizace zřídka všimnou, protože audity přístupnosti se zaměřují na formuláře a navigaci dřív, než se dostanou ke grafům na stránce s reporty.

Tento průvodce popisuje, co přístupná vizualizace dat skutečně vyžaduje — ne kontrolní seznam, ale pochopení toho, proč grafy selhávají a co s tím dělat.

Proč jsou grafy obzvlášť obtížné

Většina HTML prvků má nativní roli, název a stav, kterým asistivní technologie rozumí. <button> je tlačítko. <table> je tabulka s řádky a sloupci. Formulářové pole má popisek.

Graf vykreslený jako SVG nebo canvas nic z toho nemá. Je to kresba. Čtečky obrazovky vidí obrázek (pokud máte štěstí), nebo vůbec nic. Vývojář musí sémantickou vrstvu zrekonstruovat od základu.

Grafy jsou přitom často tím nejdůležitějším obsahem stránky. Sloupcový graf měsíčních tržeb, spojnicový graf sledující růst počtu uživatelů, koláčový graf rozdělení podle kategorií — právě kvůli nim uživatel na stránku často přichází. Vyloučit z nich významnou část návštěvníků je vážný problém, ne drobná nepříjemnost.

Problém barev: nikdy nespoléhejte pouze na barvu

Nejčastějším selháním přístupnosti grafů je použití barvy jako jediného způsobu rozlišení datových řad nebo kategorií.

Spojnicový graf se čtyřmi čarami rozlišenými pouze barvou — červenou, modrou, zelenou a oranžovou — je pro mnoho uživatelů s poruchou barvocitu nečitelný a pro kohokoli, kdo používá režim vysokého kontrastu nebo displej ve stupních šedi, zcela bezvýznamný.

Řešením je redundantní kódování: použijte barvu plus alespoň jednu další vizuální vlastnost.

Spojnicové grafy: použijte vedle barev různé vzory čar (plná, čárkovaná, tečkovaná, čerchovaná)
Sloupcové grafy: použijte vedle barev textury nebo vzory, nebo přidejte datové popisky přímo na sloupce
Bodové grafy: použijte vedle barev různé tvary značek (kruh, čtverec, trojúhelník, kosočtverec)
Koláčové grafy: přidejte textové popisky dovnitř každé výseče nebo vedle ní — nikdy nespoléhejte jen na legendu

Spadá to pod kritérium 1.4.1 Použití barev (úroveň A) standardu WCAG 2.2: barva nesmí být jediným prostředkem přenosu informace.

Kontrast u grafů

Netextové vizuální prvky, jako jsou sloupce grafu, tahy čar a datové body, musí splňovat kontrast 3:1 vůči pozadí podle kritéria 1.4.11 Kontrast netextového obsahu (úroveň AA). Otestujte paletu svých grafů nástrojem pro kontrolu kontrastu — mnoho firemních palet, které na velkých plochách vypadají v pořádku, tento požadavek při menších velikostech nesplňuje.

Text v grafech — popisky os, datové popisky, legendy — musí splňovat stejné požadavky na kontrast jako běžný text: 4,5:1 pro normální text, 3:1 pro velký text podle kritéria 1.4.3 Minimální kontrast.

Poskytování textových alternativ

Každý graf potřebuje textovou alternativu, která sdělí data, jež zobrazuje. Jakou přesně podobu má mít, závisí na složitosti dat.

Jednoduché grafy: popisný alternativní text

U sloupcového grafu s pěti hodnotami může dobře napsaný atribut alt shrnout klíčové zjištění:

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

Alternativní text zde dělá dvě věci: uvádí datové body a shrnuje klíčový poznatek. Nepopisujte graf pouze vizuálně („sloupcový graf zobrazující tržby“). Popište, co graf sděluje.

Složité grafy: doplňkové datové tabulky

Když graf obsahuje více dat, než se vejde do atributu alt, poskytněte poblíž přístupnou datovou tabulku. Ta poslouží i lidem, kteří dávají přednost tabulkovým datům před vizuálními formáty. Tabulka může být ve výchozím stavu skrytá, ale dosažitelná:

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

Vzory specifické pro SVG

SVG grafy vykreslené přímo v kódu stránky (nikoli jako soubory obrázků) lze zpřístupnit přímo pomocí ARIA. Klíčové vzory:

Přidejte prvku <svg> atribut role="img"
Poskytněte <title> jako prvního potomka <svg> a propojte jej pomocí aria-labelledby
Přidejte <desc> pro delší popisy a propojte jej pomocí aria-describedby
Označte dekorativní prvky (mřížku, značky na osách) pomocí aria-hidden="true", abyste snížili šum

U interaktivních grafů, kde uživatelé mohou vybírat datové body, potřebuje každý interaktivní prvek správnou roli, název a podporu klávesnice.

Ovládání interaktivních grafů klávesnicí

Pokud jsou vaše grafy interaktivní — nápovědy při najetí myší, klikatelné segmenty, výběr oblasti a přibližování — musí být plně ovladatelné klávesnicí podle kritéria 2.1.1 Klávesnice (úroveň A).

U grafů s mnoha datovými body implementujte vzor pohyblivého tabindex: v pořadí tabulátoru je vždy jen jeden prvek grafu a mezi datovými body uvnitř grafu se uživatel pohybuje šipkami.

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

Nápovědy, které se zobrazují pouze při najetí myší, se musí zobrazit i při zaměření klávesnicí. Nápověda viditelná jen pro uživatele myši je selháním přístupnosti.

Volba správného typu grafu

Některé typy grafů jsou ze své podstaty přístupnější než jiné. Když máte na výběr:

Typ grafu	Přístupnost	Poznámky
Sloupcový graf	Vysoká	Hodnoty lze snadno doplnit popisky; možná dobrá podpora klávesnice
Spojnicový graf	Vysoká	Použijte různé vzory čar; anotujte klíčové body
Tabulka	Nejvyšší	Nejsnáze zpřístupnitelná; pro data často ta správná volba
Bodový graf	Střední	Vyžaduje pečlivé rozlišení značek; ovládání klávesnicí je složité
Heatmapa	Nízká	Ze své podstaty závislá na barvě; vždy poskytněte tabulkovou alternativu
Koláčový/prstencový graf	Nízká	Hodnoty se obtížně porovnávají; vyhněte se mu u více než 3–4 segmentů

Pokud si nejste jisti, dobře formátovaná tabulka je téměř vždy přístupnější než graf — a často se čte snáze bez ohledu na postižení. Nepoužívejte graf proto, že vypadá moderně; použijte jej tehdy, když uživatelům skutečně pomůže pochopit trend nebo srovnání rychleji než tabulková data.

Testování grafů

Automatizované nástroje pro kontrolu přístupnosti dokážou odhalit chybějící atributy alt a některé vzory ARIA, ale nemohou ověřit, že data grafu dávají smysl, že ovládání klávesnicí funguje správně nebo že graf dává smysl uživateli čtečky obrazovky. Testujte pomocí:

Čtečky obrazovky (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): přejděte na graf a ověřte, co se oznamuje
Pouze klávesnice: přejděte tabulátorem na graf a potvrďte, že všechny interaktivní prvky jsou klávesnicí dosažitelné a ovladatelné
Simulace poruchy barvocitu: použijte Chrome DevTools (Rendering > Emulate vision deficiency), abyste viděli, jak graf vypadá při různých typech poruchy barvocitu
Přiblížení na 200 %: ověřte, že se popisky a legendy nepřekrývají ani nejsou oříznuté

Naše služba hodnocení pomocí čteček obrazovky testuje grafy se skutečnými uživateli asistivních technologií — nejrychlejší způsob, jak zjistit, co vaši uživatelé skutečně zažívají.