Jak tworzyć wykresy dostępne dla wszystkich użytkowników

Problem z wykresami

Wykresy i grafy są z natury obiektami wizualnymi. Kodują informacje poprzez kształt, położenie i kolor — trzy kanały, które dla znacznej części odbiorców są albo pozbawione znaczenia, albo zniekształcone.

Około 8% mężczyzn ma jakąś formę zaburzenia widzenia barw. Użytkownicy czytników ekranu nie otrzymują żadnych sensownych informacji z wykresu słupkowego w formacie SVG, o ile deweloper nie dostarczył ich jawnie. A użytkownicy klawiatury często w ogóle nie są w stanie dotrzeć do interaktywnych wykresów.

Rezultat: wizualizacja danych to prawdopodobnie ten obszar projektowania stron, w którym przepaść między doświadczeniem użytkowników widzących a doświadczeniem wszystkich pozostałych jest największa. I jest to przepaść, której organizacje rzadko dostrzegają, ponieważ audyty dostępności skupiają się na formularzach i nawigacji, zanim dotrą do wykresów na stronie z raportami.

Ten przewodnik wyjaśnia, czego naprawdę wymaga dostępna wizualizacja danych — to nie lista kontrolna, lecz zrozumienie, dlaczego wykresy zawodzą i co z tym zrobić.

Dlaczego wykresy są szczególnie trudne

Większość elementów HTML ma natywną rolę, nazwę i stan, które technologie asystujące rozumieją. <button> jest przyciskiem. <table> jest tabelą z wierszami i kolumnami. Pole formularza ma etykietę.

Wykres renderowany jako SVG lub canvas nie ma nic z tego. To rysunek. Czytniki ekranu widzą obraz (przy odrobinie szczęścia) albo zupełnie nic. Deweloper musi odtworzyć warstwę semantyczną od zera.

Jednocześnie wykresy są często najważniejszą treścią na stronie. Wykres słupkowy pokazujący miesięczne przychody, wykres liniowy śledzący wzrost liczby użytkowników, wykres kołowy rozbijający rozkład kategorii — to często właśnie po to użytkownik odwiedza stronę. Wykluczenie znacznej części odwiedzających z dostępu do nich to poważny problem, a nie drobna niedogodność.

Problem koloru: nigdy nie polegaj wyłącznie na kolorze

Najczęstszym błędem dostępności wykresów jest używanie koloru jako jedynego sposobu rozróżniania serii danych lub kategorii.

Wykres liniowy z czterema liniami rozróżnianymi wyłącznie kolorem — czerwonym, niebieskim, zielonym, pomarańczowym — jest nieczytelny dla wielu użytkowników z zaburzeniami widzenia barw i całkowicie pozbawiony znaczenia dla każdego, kto korzysta z trybu wysokiego kontrastu lub wyświetlacza w skali szarości.

Rozwiązaniem jest redundantne kodowanie: użyj koloru plus co najmniej jednej innej właściwości wizualnej.

Wykresy liniowe: obok kolorów stosuj różne wzory kresek (linia ciągła, kreskowana, kropkowana, kreska-kropka)
Wykresy słupkowe: obok kolorów stosuj tekstury lub wzory, albo dodaj etykiety z danymi bezpośrednio na słupkach
Wykresy punktowe: obok kolorów stosuj różne kształty znaczników (koło, kwadrat, trójkąt, romb)
Wykresy kołowe: dodaj etykiety tekstowe wewnątrz każdego wycinka lub obok niego — nigdy nie polegaj na samej legendzie

Podlega to kryterium WCAG 2.2 1.4.1 Użycie koloru (poziom A): kolor nie może być jedynym środkiem przekazywania informacji.

Kontrast wykresów

Nietekstowe elementy wizualne, takie jak słupki wykresu, linie i punkty danych, muszą spełniać wymóg kontrastu 3:1 względem tła zgodnie z kryterium 1.4.11 Kontrast elementów nietekstowych (poziom AA). Przetestuj paletę swoich wykresów narzędziem do sprawdzania kontrastu — wiele palet brandowych, które wyglądają dobrze na dużych powierzchniach, nie spełnia tego wymogu przy mniejszych rozmiarach.

Tekst na wykresach — etykiety osi, etykiety danych, legendy — musi spełniać te same wymagania kontrastu co tekst podstawowy: 4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu zgodnie z kryterium 1.4.3 Kontrast (minimum).

Zapewnianie alternatyw tekstowych

Każdy wykres potrzebuje alternatywy tekstowej, która przekazuje prezentowane przez niego dane. Konkretna forma zależy od złożoności danych.

Proste wykresy: opisowy tekst alternatywny

W przypadku wykresu słupkowego z pięcioma wartościami dobrze napisany atrybut alt może podsumować kluczowy wniosek:

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

Tekst alternatywny robi tu dwie rzeczy: podaje punkty danych i podsumowuje kluczowy wniosek. Nie opisuj wykresu wyłącznie wizualnie („wykres słupkowy pokazujący przychody”). Opisz, co wykres komunikuje.

Złożone wykresy: uzupełniające tabele danych

Gdy wykres zawiera więcej danych, niż mieści się w atrybucie alt, umieść w pobliżu dostępną tabelę danych. Służy to również osobom, które wolą dane tabelaryczne od formatów wizualnych. Tabela może być domyślnie ukryta, ale osiągalna:

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

Wzorce specyficzne dla SVG

Wykresy SVG renderowane bezpośrednio w kodzie strony (a nie jako pliki graficzne) można uczynić dostępnymi za pomocą ARIA. Kluczowe wzorce:

Dodaj role="img" do elementu <svg>
Umieść <title> jako pierwsze dziecko <svg> i powiąż je za pomocą aria-labelledby
Dodaj <desc> dla dłuższych opisów i powiąż go za pomocą aria-describedby
Oznacz elementy dekoracyjne (linie siatki, znaczniki osi) atrybutem aria-hidden="true", aby ograniczyć szum

W przypadku interaktywnych wykresów, na których użytkownicy mogą wybierać punkty danych, każdy element interaktywny potrzebuje odpowiedniej roli, nazwy i obsługi klawiatury.

Nawigacja klawiaturą po interaktywnych wykresach

Jeśli Twoje wykresy są interaktywne — podpowiedzi po najechaniu, klikalne segmenty, zaznaczanie i przybliżanie — muszą być w pełni obsługiwane klawiaturą zgodnie z kryterium 2.1.1 Klawiatura (poziom A).

W przypadku wykresów z wieloma punktami danych zastosuj wzorzec „roving tabindex”: tylko jeden element wykresu znajduje się w danym momencie w kolejności tabulacji, a klawisze strzałek przenoszą między punktami danych wewnątrz wykresu.

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

Podpowiedzi pojawiające się tylko po najechaniu myszą muszą pojawiać się także po ustawieniu fokusu klawiaturą. Podpowiedź widoczna wyłącznie dla użytkowników myszy to błąd dostępności.

Wybór właściwego typu wykresu

Niektóre typy wykresów są z natury bardziej dostępne niż inne. Gdy masz wybór:

Typ wykresu	Dostępność	Uwagi
Wykres słupkowy	Wysoka	Wartości łatwo opatrzyć etykietami; możliwa dobra obsługa klawiatury
Wykres liniowy	Wysoka	Stosuj różne wzory kresek; oznaczaj kluczowe punkty
Tabela	Najwyższa	Najłatwiejsza do udostępnienia; często najlepszy wybór dla danych
Wykres punktowy	Średnia	Wymaga starannego różnicowania znaczników; złożona nawigacja klawiaturą
Mapa cieplna	Niska	Z natury zależna od koloru; zawsze udostępniaj tabelę alternatywną
Kołowy/pierścieniowy	Niska	Trudno porównywać wartości; unikaj przy więcej niż 3-4 segmentach

W razie wątpliwości dobrze sformatowana tabela jest niemal zawsze bardziej dostępna niż wykres — i często łatwiejsza do odczytania niezależnie od niepełnosprawności. Nie używaj wykresu dlatego, że wygląda nowocześnie; używaj go wtedy, gdy naprawdę pomaga użytkownikom zrozumieć trend lub porównanie szybciej niż dane tabelaryczne.

Testowanie wykresów

Automatyczne skanery dostępności potrafią wykryć brakujące atrybuty alt i niektóre wzorce ARIA, ale nie są w stanie zweryfikować, czy dane wykresu mają sens, czy nawigacja klawiaturą działa poprawnie ani czy wykres jest zrozumiały dla użytkownika czytnika ekranu. Testuj za pomocą:

Czytnika ekranu (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): przejdź do wykresu i sprawdź, co jest ogłaszane
Samej klawiatury: przejdź tabulatorem do wykresu i potwierdź, że wszystkie elementy interaktywne są osiągalne i obsługiwalne klawiaturą
Symulacji ślepoty barw: użyj Chrome DevTools (Rendering > Emulate vision deficiency), aby zobaczyć, jak wykres wygląda przy różnych typach zaburzeń widzenia barw
Powiększenia do 200%: sprawdź, czy etykiety i legendy nie nakładają się na siebie ani nie są ucięte

Nasza usługa oceny z czytnikiem ekranu testuje wykresy z prawdziwymi użytkownikami technologii asystujących — to najszybszy sposób, by dowiedzieć się, czego Twoi użytkownicy naprawdę doświadczają.