Złożoną grafikę opisuj w dwóch warstwach: krótki tekst alternatywny podaje jej temat i główny wniosek, a dostępny opis obok grafiki przekazuje szczegóły, które są potrzebne do zrozumienia informacji. W przypadku wykresu może to być tabela danych i trend. Przy mapie — lista miejsc, adresów lub przebieg trasy. Przy infografice — uporządkowany tekst odtwarzający jej kluczowe treści i relacje.

Nie próbuj zmieścić wszystkiego w atrybucie alt. Czytnik ekranu może wtedy odczytać długi, trudny do nawigowania blok tekstu. Lepiej powiązać krótkie alt z opisem zawierającym nagłówki, listy i — gdy są potrzebne — tabele.

W3C zaleca dla złożonych grafik dwuczęściową alternatywę: krótką identyfikację obrazu i dłuższy opis jego istotnych informacji. Podobnie podpowiadają polskie wytyczne gov.pl dotyczące elementów graficznych oraz poradnik W3C o złożonych obrazach.

Najpierw ustal, jaką informację przekazuje grafika

Zanim napiszesz opis, odpowiedz na trzy pytania:

  1. Po co grafika znajduje się na stronie? Czy pokazuje wynik, lokalizację, zależność, instrukcję czy tylko ozdabia treść?
  2. Jaki jest jej najważniejszy wniosek? Co odbiorca powinien zapamiętać?
  3. Jakie szczegóły są potrzebne, aby skorzystać z informacji? Mogą to być liczby, kolejność kroków, legenda, nazwy miejsc albo wyjątki.

Nie opisuj każdego koloru, kształtu i dekoracyjnego szczegółu. Przekaż te informacje wizualne, które zmieniają sens. Pomyśl, jak wyjaśnić grafikę przez telefon osobie, która jej nie widzi.

Jak opisać wykres?

W krótkim tekście alternatywnym nazwij typ wykresu, temat, zakres danych i główny wniosek. Jeśli wykres jest prosty, a kluczowe wartości znajdują się już w tekście, krótki opis może wystarczyć.

Przykład krótkiego altu:

Wykres liniowy pokazuje wzrost liczby zgłoszeń dostępności z 12 w styczniu do 31 w czerwcu, z niewielkim spadkiem w kwietniu.

Jeśli użytkownik potrzebuje dokładnych wartości, dodaj bezpośrednio pod wykresem opis lub tabelę HTML. Tabela powinna mieć nagłówki wierszy i kolumn, by jej strukturę można było odczytać za pomocą czytnika ekranu.

Przykład danych towarzyszących wykresowi:

Miesiąc Liczba zgłoszeń
Styczeń 12
Luty 17
Marzec 21
Kwiecień 19
Maj 26
Czerwiec 31

Możesz dodać jednozdaniowe podsumowanie trendu, jeśli nie wynika on jasno z samej tabeli. W opisie wskaż jednostki, zakres czasu, porównywane grupy i istotne wyjątki. Nie polegaj wyłącznie na kolorach serii: nazwij je, a w samej grafice użyj także etykiet, wzorów lub różnych typów linii.

Jak opisać mapę?

Opis mapy zależy od jej celu. Inaczej opiszesz mapę pokazującą lokalizację urzędu, a inaczej mapę danych o jakości powietrza. Podaj odbiorcy informację, której potrzebuje, bez zmuszania go do odgadywania jej na podstawie kolorów lub położenia.

Mapa dojazdu lub lokalizacji: krótki alt może podać główny punkt, a tekst pod mapą — adres, wejście, punkty orientacyjne i dostępne sposoby dojazdu. Jeśli mapa jest interaktywna, ważne funkcje powinny działać z klawiaturą, a najważniejsze informacje muszą być dostępne także poza mapą.

Mapa danych: wyjaśnij, co przedstawiają kolory i symbole, jaki obszar obejmuje mapa oraz gdzie występuje najważniejszy wzorzec. Dołącz listę albo tabelę z wartościami przypisanymi do regionów.

Przykład opisu:

Mapa pokazuje trzy punkty obsługi w Gdańsku. Lista adresów i informacje o dostępności wejść znajdują się poniżej.

Następnie podaj każdy punkt w czytelnej liście. Jeżeli grafika zawiera przebieg trasy, opisz jej początek, kolejne ważne skręty lub etapy oraz cel. Zadbaj też, by interaktywne przyciski powiększania, przesuwania i warstw miały dostępne nazwy i działały bez myszy.

Jak opisać infografikę?

Infografika często łączy nagłówki, liczby, ikony, strzałki i krótkie akapity. Sam tekst typu „Infografika o dostępności” nie przekazuje jej treści. Krótki alt powinien podać temat i główny przekaz, a obok umieść pełną wersję informacji w HTML.

Ułóż opis w tej samej logicznej kolejności co grafika. Odtwórz hierarchię nagłówkami, kroki listą numerowaną, a porównania tabelą. Zapisz słowa wbudowane w obraz, wartości liczbowe i informację, co oznaczają symbole lub kolory. Jeśli strzałki pokazują zależność, opisz ją słowami, na przykład „najpierw”, „prowadzi do” albo „wzrostowi X towarzyszy spadek Y”.

Przykład krótkiego altu:

Infografika przedstawia trzy etapy przygotowania dostępnego formularza: planowanie, wdrożenie i testy.

Pod grafiką można następnie umieścić trzy nagłówki z opisem czynności dla każdego etapu. Jeśli ta sama treść jest już w pełni dostępna w sąsiednim tekście, nie trzeba powtarzać jej drugi raz — alt powinien wtedy krótko wskazywać temat albo funkcję grafiki.

Jak połączyć krótki alt z długim opisem?

Krótki tekst alternatywny i szczegółowe objaśnienie powinny znajdować się blisko siebie, tak aby użytkownik wiedział, że opis dotyczy danej grafiki. Najprostsze rozwiązanie to umieszczenie opisu w treści bezpośrednio pod obrazem. W HTML można pogrupować obraz i podpis w <figure> oraz <figcaption>.

Przykładowy układ:

<figure>
  <img src="wyniki.png"
       alt="Wykres liniowy pokazuje wzrost liczby zgłoszeń od stycznia do czerwca.">
  <figcaption>
    <p>Największy wzrost nastąpił między kwietniem a czerwcem.</p>
    <table>
      <caption>Liczba zgłoszeń w kolejnych miesiącach</caption>
      <!-- dane oraz nagłówki tabeli -->
    </table>
  </figcaption>
</figure>

Jeśli szczegółowy opis jest długi, możesz umieścić go w osobnej sekcji strony i dodać przy grafice wyraźny link, na przykład „Pełny opis wykresu liczby zgłoszeń”. Unikaj niejasnych odnośników „więcej” oraz ukrywania opisu tak, że część użytkowników nie może go odnaleźć.

W3C przypomina, że długi opis powinien przekazywać istotne wartości, relacje i trendy. Podkreśla też, że szczegółowe opisy są pomocne nie tylko osobom niewidomym, lecz także osobom słabowidzącym lub mającym trudności z rozumieniem złożonej informacji. Zobacz przykłady W3C dla wykresów, map i diagramów.

Podobną zasadę opisuje brytyjskie Home Office User-Centred Design Manual: przy złożonych obrazach, takich jak wykresy i diagramy, szczegółowy opis oraz dane warto umieścić w kontekście, w otaczającym tekście.

Czego unikać w tekście alternatywnym?

  • Nie pisz tylko „wykres”, „mapa” albo „infografika”. Podaj temat i najważniejszą informację.
  • Nie przepisuj całego długiego opisu do alt. Umieść szczegóły w dostępnej treści obok grafiki.
  • Nie używaj samej nazwy pliku. „wykres_final2.png” nie mówi, co obraz przedstawia.
  • Nie opisuj informacji wyłącznie kolorem. Zamiast „czerwone regiony” wyjaśnij, co ten kolor oznacza, i dodaj wartości w tekście.
  • Nie duplikuj sąsiedniego akapitu. Alt ma uzupełniać kontekst, a nie odczytywać drugi raz to samo.
  • Nie pomijaj tekstu wbudowanego w infografikę. Przepisz ważne treści i hierarchię do HTML.
  • Nie zostawiaj mapy interaktywnej jako jedynego źródła adresów. Dodaj listę lokalizacji.

Ministerstwo Cyfryzacji zaleca krótko opisać informację przekazywaną przez grafikę i uwzględnić jej kontekst. Dla złożonych grafik wskazuje możliwość dodania dokładniejszego opisu powiązanego z obrazem. Polski poradnik o dostępnych obrazach, grafikach i wykresach oraz wytyczne gov.pl dla złożonych grafik na stronach zawierają dodatkowe przykłady.

Szybka lista kontrolna przed publikacją

Przed opublikowaniem wykresu, mapy lub infografiki sprawdź:

  1. Czy krótki alt mówi, czego dotyczy grafika i jaki jest jej główny przekaz?
  2. Czy wszystkie potrzebne liczby, nazwy i kroki są dostępne jako tekst?
  3. Czy do wykresu można dotrzeć do danych tabelarycznych?
  4. Czy mapa ma listę lokalizacji lub tekstowy odpowiednik informacji?
  5. Czy kolory nie są jedynym sposobem przekazywania znaczenia?
  6. Czy opis znajduje się blisko grafiki i jest zrozumiały bez widzenia obrazu?
  7. Czy interaktywne elementy mapy można obsłużyć klawiaturą?

Przykład: krótki opis i dane obok wykresu

alt może przekazać temat i główny wniosek, natomiast tabela tekstowa zapewnia dostęp do konkretnych wartości:

<figure>
  <img src="ruch-na-stronie.png"
       alt="Liczba wizyt rosła od stycznia do marca, a w kwietniu spadła.">
  <figcaption>Wizyty na stronie w 2026 roku</figcaption>
</figure>

<table>
  <caption>Liczba wizyt według miesiąca</caption>
  <thead><tr><th scope="col">Miesiąc</th><th scope="col">Wizyty</th></tr></thead>
  <tbody>
    <tr><th scope="row">Styczeń</th><td>1200</td></tr>
    <tr><th scope="row">Luty</th><td>1500</td></tr>
    <tr><th scope="row">Marzec</th><td>1900</td></tr>
    <tr><th scope="row">Kwiecień</th><td>1400</td></tr>
  </tbody>
</table>

Wartości w tabeli muszą odpowiadać danym na wykresie. Sam opis trendu nie zastępuje liczb, jeśli są ważne dla decyzji czytelnika.

Podsumowanie

Przy prostym obrazie zwykle wystarczy krótki, kontekstowy alt. Wykres, mapa lub infografika zawierająca wiele danych potrzebuje zwykle także dostępnego opisu: wartości i trendu dla wykresu, lokalizacji lub danych dla mapy oraz tekstowej wersji informacji i relacji z infografiki. Najlepszy opis nie kataloguje wszystkich kształtów — przekazuje to, co odbiorca musi wiedzieć, aby zrozumieć treść i wykonać zadanie.

Więcej o podstawach przeczytasz w artykule 10 najczęstszych błędów dostępności cyfrowej.

Powiązane poradniki

Stan informacji: 1 października 2026 r.