Přístupná vizualizace dat

Vizualizace dat patří k nejúčinnějším nástrojům v arzenálu moderního vývojáře – a zároveň je jedním z nejčastěji nedostupných. Graf, který vypadá krásně pro vidoucí uživatele s normálním barevným viděním, může být zcela nečitelný pro uživatele čtečky obrazovky, osobu s deuteranopií nebo někoho, kdo se pohybuje po stránce výhradně pomocí klávesnice. Nejedná se o ojedinělý okrajový případ: přibližně 1 z 12 mužů a 1 ze 200 žen trpí nějakou formou poruchy barevného vidění (údaje o prevalenci vycházejí především ze studií populace v severní Evropě; míry se liší podle populace). Podle WHO žije přibližně 16 % světové populace – zhruba 1,3 miliardy lidí – s nějakou formou postižení.

A ta dobrá zpráva? Přístupnost vizualizace dat je z velké části technický problém s dobře známými řešeními. Tato příručka vás provede všemi jednotlivými úrovněmi – od barevného kontrastu a sémantického značkování až po vzory ARIA, navigaci pomocí klávesnice a alternativy datových tabulek –, aby vaše grafy a řídicí panely byly přístupné pro všechny.

1. WCAG 2.2 pro vizualizaci dat: Základy

WCAG 2.2 rozděluje požadavky do čtyř principů – vnímatelnost, ovladatelnost, srozumitelnost a odolnost (POUR). Každé selhání vizualizace dat lze vysledovat až k porušení jednoho nebo více z těchto principů. Následující tabulka přiřazuje nejdůležitější kritéria úspěšnosti pro grafy k jednotlivým principům na úrovni AA.

2. Barva: Více než jen červená a zelená

Barva je nejčastěji zmiňovaným problémem v oblasti přístupnosti při vizualizaci dat. Řešením není vyhýbat se barvám – jde o to nikdy se nespoléhat pouze na barvy. Přístupnost barev v grafech má tři úrovně: výběr palety, kontrastní poměry a redundantní kódování.

2.1 Palety vhodné pro osoby s poruchou barevného vidění

Nejnebezpečnější barevnou dvojicí ve vizualizaci dat je kombinace červené a zelené – tuto kombinaci nedokáže rozlišit přibližně 8 % mužské populace. Následující paleta patří mezi nejčastěji uváděné možnosti vhodné pro osoby s barevnou slepotou ve výzkumu vizualizace dat a je navržena tak, aby byla rozlišitelná u deuteranopie, protanopie i tritanopie – konkrétní barevné kombinace by však měly být i tak ověřeny pomocí simulátoru barevné slepoty v kontextu konkrétního grafu.

2.2 Redundantní kódování

Nejúčinnější technikou pro zajištění přístupnosti grafů je redundantní kódování: tj. sdělování stejných informací současně prostřednictvím více vizuálních kanálů. Nikdy se nespoléhejte pouze na barvu – doplňte ji alespoň jedním z následujících prvků: tvarem, vzorem, polohou, popiskem nebo strukturou.

3. Sémantické značkování a ARIA pro grafy

Grafy vykreslené ve formátu SVG nebo <canvas> jsou často pro asistenční technologie nepřístupné, pokud se o to výslovně neusiluje. SVG může odhalit sémantiku, je-li kód správně napsán; <canvas>, jako bitmapová plocha, nemá vůbec žádný vlastní model přístupnosti. V každém případě však smysluplná přístupnost vyžaduje promyšlenou strategii značkování. Zde je přehled přístupů, od nejjednoduššího po nejkomplexnější.

3.1 Přístupnost formátu SVG

Při správném použití disponuje formát SVG vlastní sémantikou přístupnosti. Plně přístupný graf ve formátu SVG vyžaduje <title>, <desc>a odpovídající role u nejvnějšího prvku.

<!-- Accessible SVG bar chart shell -->
<svg
  role="img"
  aria-labelledby="chart-title chart-desc"
  viewBox="0 0 600 400"
  xmlns="http://www.w3.org/2000/svg">

  <!-- Screen readers read title + desc as the alt text -->
  <title id="chart-title">Monthly active users, Jan–Jun 2025</title>
  <desc id="chart-desc">
    Bar chart showing MAU growth from 42,000 in January to
    89,500 in June 2025. Peak month: June. Lowest: January.
  </desc>

  <!-- Each data bar is individually focusable -->
  <g role="list" aria-label="Monthly data bars">
    <g role="listitem">
      <rect
        tabindex="0"
        role="img"
        aria-label="January: 42,000 monthly active users"
        x="40" y="200" width="60" height="168"
        fill="#0072B2"
        aria-describedby="jan-tooltip"
      />
      <text id="jan-tooltip" class="sr-only">
        January 2025, 42,000 users, 112% of Q4 average
      </text>
    </g>
    <!-- Repeat for each data point -->
  </g>
</svg>

<!-- Always provide a visible data table fallback -->
<details>
  <summary>View data as table</summary>
  <!-- Full table here -->
</details>

3.2 Grafy v aplikaci Canvas

<canvas> se vykreslí jako bitmapa — má ne vlastní sémantika přístupnosti. Vzor přístupného plátna využívá záložní podstrom DOM uvnitř prvku `canvas`, který místo toho čtou asistenční technologie.

<canvas
  id="revenue-chart"
  width="800"
  height="400"
  aria-label="Revenue by region, Q1 2025"
  role="img">

  <!-- Fallback: AT reads this when canvas is unsupported -->
  <p>
    Q1 2025 Revenue by Region: EMEA £2.4M (38%),
    Americas £2.1M (33%), APAC £1.8M (29%).
    EMEA leads for third consecutive quarter.
  </p>
  <table>
    <!-- Full data table -->
  </table>
</canvas>

<!-- For Chart.js: use the accessibility plugin -->
<script>
new Chart(ctx, {
  plugins: [{
    id: 'a11y',
    afterRender(chart) {
      // Rebuild live ARIA region from chart data
      const liveRegion = document.getElementById('chart-live');
      liveRegion.textContent = buildSummary(chart.data);
    }
  }]
});
</script>

4. Navigace pomocí klávesnice a správa fokusu

Přístupnost grafů pomocí klávesnice znamená tři věci: možnost ovládat všechny interaktivní prvky pomocí klávesnice, ovládat tyto prvky bez myši a získávat stejné informace (popisky, přiblížení, filtry) jako uživatelé myši.

4.1 Vzor s posuvným tabindexem

U grafů s velkým počtem datových bodů (např. bodový graf s 200 body) vede zařazení každého bodu do pořadí tabulačních kláves k nepoužitelné aplikaci. Použijte pohyblivý tabindex vzor: v sekvenci tabulatorů se nachází vždy pouze jeden bod (tabindex="0"); šipkami se pohybujete mezi prvky v rámci skupiny grafů.

// Roving tabindex for interactive chart data points
class AccessibleChart {
  constructor(containerEl) {
    this.points = [...containerEl.querySelectorAll('[data-point]')];
    this.currentIndex = 0;
    this.init();
  }

  init() {
    // Set initial roving tabindex
    this.points.forEach((pt, i) => {
      pt.setAttribute('tabindex', i === 0 ? '0' : '-1');
      pt.addEventListener('keydown', (e) => this.handleKey(e, i));
    });
  }

  handleKey(e, idx) {
    const { key } = e;
    let next = idx;

    if (key === 'ArrowRight' || key === 'ArrowDown')
      next = Math.min(idx + 1, this.points.length - 1);
    else if (key === 'ArrowLeft' || key === 'ArrowUp')
      next = Math.max(idx - 1, 0);
    else if (key === 'Home') next = 0;
    else if (key === 'End')  next = this.points.length - 1;
    else return;

    e.preventDefault();
    this.points[idx].setAttribute('tabindex', '-1');
    this.points[next].setAttribute('tabindex', '0');
    this.points[next].focus();

    // Show tooltip programmatically
    this.showTooltip(this.points[next]);
  }
}

4.2 Klíčové ukazatele

WCAG 2.2 zavádí přísnější požadavky na indikátor fokusu prostřednictvím požadavku 2.4.11 Vzhled fokusu (AA). Indikátor musí mít plochu odpovídající alespoň obvodu komponenty bez fokusu násobené 2 CSS pixely, přičemž kontrastní poměr mezi stavem s fokusem a stavem bez fokusu musí být alespoň 3:1.

/* WCAG 2.2 AA compliant focus indicator for data points */
[data-point]:focus-visible {
  /* 2px offset, 3px ring = clearly visible at any size */
  outline: 3px solid #005fcc;
  outline-offset: 3px;

  /* Additional contrast boost for AAA */
  box-shadow: 0 0 0 5px rgba(0, 95, 204, 0.2);
}

/* Respect user preference */
@media (forced-colors: active) {
  [data-point]:focus-visible {
    outline-color: Highlight;
    outline-width: 3px;
  }
}

5. Vzory pro čtečky obrazovky

Navrhovat pro čtečky obrazovky znamená přizpůsobit data , která jsou ze své podstaty prostorová a vizuální , pro lineární zvukový zážitek. Klíčovým poznatkem je, že graf nepřevádíte – ale píšete popis toho, co graf sděluje.

5.1 Jak psát dobré popisky k grafům

Dobrý popis grafu se skládá ze tří částí:

1. Typ a účel: „Sloupcový graf znázorňující čtvrtletní tržby za fiskální rok 2025.“
2. Hlavní zjištění: „Třetí čtvrtletí bylo nejúspěšnější s obratem 4,2 milionu liber, což představuje nárůst o 28 % oproti druhému čtvrtletí.“
3. Významné výjimky nebo souvislosti: „Pokles v prvním čtvrtletí byl způsoben narušením dodavatelského řetězce v lednu.“

5.2 Živé oblasti pro dynamické grafy

Pokud se data v grafech aktualizují v reálném čase (analytické panely, monitorovací nástroje), použijte živé oblasti ARIA k oznámení změn, aniž by došlo k narušení aktuální pozice, na které uživatel právě čte.

<!-- Polite live region: announces after current speech -->
<div
  id="chart-status"
  role="status"
  aria-live="polite"
  aria-atomic="true"
  class="sr-only">
</div>

<!-- Assertive region: interrupts for critical alerts only -->
<div
  id="chart-alert"
  role="alert"
  aria-live="assertive"
  class="sr-only">
</div>

<script>
// When data updates, push a human-readable summary
function announceChartUpdate(newData, isAlert = false) {
  const id = isAlert ? 'chart-alert' : 'chart-status';
  const el = document.getElementById(id);

  // Clear then set: forces screen readers to re-read
  el.textContent = '';
  requestAnimationFrame(() => {
    el.textContent = buildSummary(newData);
  });
}
</script>

6. Tabulky s dostupnými daty jako náhradní řešení

Každý graf by měl mít k dispozici přístupnou datovou tabulku – buď viditelnou, nebo zobrazitelnou pomocí rozbalovacího prvku. Nejde pouze o požadavek na přístupnost, ale také o správnou informační architekturu. Tabulky umožňují uživatelům vyhledat konkrétní hodnoty, které grafy často zakrývají.

6.1 Osvědčené postupy pro značkování tabulek

7. Porovnání typů grafů: Kompromisy v oblasti přístupnosti

Ne všechny typy grafů jsou ihned po instalaci stejně přístupné. Následující tabulka hodnotí každý běžný typ z hlediska čtyř aspektů přístupnosti a uvádí doporučená řešení pro obtížné případy.

Ukázka přístupného grafu

Následující sloupcový graf využívá vzory popsané v této příručce. Na každý sloupec lze přesunout fokus klávesnicí a každý má vlastní aria-labela graf obsahuje viditelnou náhradní datovou tabulku.

8. Kalkulátor dopadu: Odhad počtu vyloučených uživatelů

Jedním z nejúčinnějších způsobů, jak v organizaci získat podporu pro práci v oblasti přístupnosti, je kvantifikovat počet dotčených uživatelů. Pomocí níže uvedené kalkulačky odhadněte, kolik uživatelů je v současné době vyloučeno z důvodu běžných nedostatků v přístupnosti grafů.

9. Testování vaší implementace

Žádný automatizovaný nástroj nedokáže odhalit všechny problémy s přístupností – výzkumy naznačují, že automatizované nástroje odhalí pouze 30–40 % neshod s WCAG. Komplexní testovací strategie kombinuje automatizované skenování, ruční testování a uživatelské testování s využitím asistenčních technologií.

9.1 Testovací nástroje

9.2 Doporučený postup testování

10. Kontrolní seznam pro implementaci

Tento kontrolní seznam použijte při zavádění jakéhokoli nového grafu, řídicího panelu nebo funkce pro vizualizaci dat. Všechny položky označené jako WCAG AA jsou v mnoha jurisdikcích nezbytné pro dodržení zákonných požadavků (EN 301 549 v EU, Section 508 v USA).

„Přístupnost není funkce, kterou přidáte až na konci projektu – je to kvalitativní vlastnost, kterou je třeba zabudovat již při prvních rozhodnutích o návrhu. V případě vizualizace dat to znamená, že otázka nikdy nezní ‚jak zajistíme, aby byl tento graf přístupný?‘, ale ‚jaký je nejpřístupnější způsob, jak tato data sdělit?‘“ — AIOPSGROUP Engineering Practice