blog na temat dostępności stron internetowych

Przejdź do głównej treści

Opisywanie treści nietekstowych – wykresy i infografiki

W artykule “Prawidłowe opisywanie treści nietekstowych” opisałam pokrótce główne zasady zapewniania alternatywy dla prostych treści graficznych. Czasem zdaża się jednak, że krótki opis zawarty w atrybucie “alt” nie wystarcza do przekazania informacji przedstawionej za pomocą ilustracji (tak jest np. w przypadku wykresów i infografik). Jak zatem można zapewnić dostęp do tych treści osobom niewidomym?

Co powininen zawierać alternatywny opis?

Jeśli nie jesteśmy pewni, jak najlepiej opisać dany elemeny graficzny, pomocne może być odpowiedzenie sobie na poniższe pytania:

  • w jakim celu obrazek ten został zamieszczony na stronie?
  • co przedstawia?
  • jeśli nie byłoby możliwe użycie tej grafiki, jakich słów należałoby użyć, aby przekazać tę samą informację?

Przykład 1: wykres

W przypadku elementów graficznych takich jak wykres, zapewnienie krótkiego opisu przy wykorzystaniu atrybutu “alt” zazwyczaj nie wystarcza. Wyobraźmy sobie na przykład wykres sprzedaży produktu A na przestrzeni trzech ostatnich lat, przedstawiony na poniższym obrazku:

wykres, opis poniżej
Przykład obrazka zawierającego wykres. Prosty wykres składający się z osi x (prezentującej lata), osi y (sprzedaż w kg), i trzech słupków: pierwszy dla roku 2012 pokazuje 200 kg sprzedanego towaru, drugi dla roku 2013 – 270 kg, a trzeci dla roku 2014 – 380kg.

Opisując powyższą ilustrację jedynie przy pomocy krótkiego atrybutu “alt” (np. alt=”wykres słupkowy”), nie zapewnimy osobom niewidomym dostępu do tej samej informacji, co osobom będącym w stanie zapoznać się z treścią wykresu. Aby przekazać tę samą informację (wyniki i trend w sprzedaży produktu na przestrzeni ostatnich trzech lat), potrzebny będzie dłuższy i bardziej szczegółowy opis.

Jakiego rodzaju alternatywę można zastosować? W przypadku prostych wykresów, jak ten przedstawiony powyżej, wystarczy zamieścić krótki opis typu: “Wykres sprzedaży produktu A w latach 2012-2014. Sprzedaż produktu A stale rosła, od 200 kg w roku 2012, przez 270 kg w roku 2013, do 380 kg w roku 2014.”

A co zrobić, jeśli wykres jest na tyle skomplikowany, że nie jest możliwe opisanie jego treści w kilku zdaniach? W takim wypadku najlepszą alternatywą będzie zaprezentowanie tych samych danych za pomocą tabeli HTML, np:

Sprzedaż produktu A w latach 2012 – 2014
Rok Sprzedaż [kg]
2012 200
2013 270
2014 380

Gdzie zamieścić alternatywny opis?

Wiemy już zatem, jak opisać treść nietekstową taką jak wykres. A gdzie i w jaki sposób należy ten opis zamieścić? Wytyczne WCAG 2.0 sugerują kilka możliwych rozwiązań:

W bezpośrednim sąsiedztwie obrazka

Stosując technikę G74 należy umieścić tekstową alternatywę albo bezpośrednio przed, albo po opisywanym elemencie graficznym (mówimy tu oczywiście o położeniu w kodzie HTML, a nie na ekranie). Atrybut “alt” powininen zawierać informację, gdzie opis ten jest zamieszczony, na przykład:

<figure>
  <img src="..." alt="wykres sprzedaży produktu A, pełen opis poniżej" />
  <figcaption>
    Na przestrzeni trzech ostatnich lat sprzedaż produktu A stale rosła, od 200 kg w roku 2012, przez 270 kg w roku 2013, do 380 kg w roku 2014.
  </figcaption>
</figure>

Jeżeli nie chcemy, by alternatywny opis był widoczny dla wszystkich użytkowników, możemy go ukryć, na przykład w następujący sposób:

<!-- HTML -->
<img src="..." alt="wykres sprzedaży produktu A, pełen opis poniżej" />
<p class="opis-wykresu">Na przestrzeni trzech ostatnich lat sprzedaż produktu A stale rosła, od 200 kg w roku 2012, przez 270 kg w roku 2013, do 380 kg w roku 2014.</p>

/* CSS */
.opis-wykresu {
  position: absolute;
  left: -9999em;
}

W ten sposób opis ten, choć niewidoczny na ekranie, będzie dostępny dla osób korzystających z czytników ekranu.

Można też połączyć obydwie te metody, część opisu prezentując wszystkim użytkownikom, a część jedynie osobom niewidomym:

<figure>
  <img src="..." alt="wykres sprzedaży produktu A, pełen opis poniżej" />
  <figcaption>
    Na przestrzeni trzech ostatnich lat sprzedaż produktu A stale rosła<span class="opis-wykresu">, od 200 kg w roku 2012, przez 270 kg w roku 2013, do 380 kg w roku 2014</span>
  </figcaption>
</figure>

Do ukrycia alternatywnego opisu można też wykorzystać inne metody, np. zamieścić przycisk “pokaż alternatywny opis”, którego naciśnięcie spowoduje wyświetlenie opisu, albo użycie tzw. zakładek (ang. “tabs“) – aktywna zakładka może zawierać wykres, a druga tabelę prezentującą tę samą informację w alternatywnej formie.

W innej lokalizacji

Drugą metodą wymienianą w wytycznych WCAG 2.0 jest zamieszczenie alternatywnego opisu w innym miejscu, np. w innej sekcji tej samej strony, na odrębnej stronie, bądź też w dokumencie, który użytkownik można pobrać (oczywiście należy upewnić się, że dokument ten spełnia zasady dostępności!). Technika ta (G73) zaleca zamieszczenie odnośnika do alternatywnego opisu w bezpośrednim sąsiedztwie grafiki, oraz zapewnienie możliwości łatwego powrotu do oryginalnej treści.

<img src="..." alt="wykres sprzedaży produktu A, link do pełnego opisu znajduje się poniżej" />
<a href="...">Alternatywny opis wykresu</a>

“aria-describedby”

Trzecią metodą (ARIA-15) jest użycie atrybutu “aria-describedby” (który można przetłumaczyć jako “aria-opisanyprzez”). Poprzez dodanie tego atrybutu do elementu HTML i przypisanie mu wartości atrybutu “id” innego elementu na tej samej stronie tworzymy unikalny związek pomiędzy tymi dwoma elementami. Czytniki ekranu rozpoznają tę zależność i dzięki temu mogą przekazać swym użytkownikom, że pierwszy z tych elementów jest opisany przez zawartość drugiego z nich:

<img src="..." alt="wykres sprzedaży produktu A" aria-describedby="opis-wykresu-1"/>
<p id="opis-wykresu-1" class="opis-wykresu">Na przestrzeni trzech ostatnich lat sprzedaż produktu A stale rosła, od 200 kg w roku 2012, przez 270 kg w roku 2013, do 380 kg w roku 2014.</p>

Nowe wersje czytników ekranu automatycznie odczytują zawartość elementu wskazanego przez atrybut “aria-describedby” bezpośrednio po odczytaniu zawartości atrybutu “alt”. Dzięki temu osoby niewidome nie muszą szukać opisu na przeglądanej stronie.

Przykład 2 – infografiki

Od jakiegoś czasu bardzo popularne są tzw. infografiki, czyli ilustracje mające za zadanie przedstawić pewne dane w ciekawy i atrakcyjny wizualnie sposób. Zasady zapewniania alternatywnego opisu są podobne, jak w przypadku wykresów. Jeśli informację przedstawioną za pomocą infografiki da się podsumować w krótkim opisie, można to zrobić w taki sposób. W przypadku bardziej skomplikowanej ilustracji najlepszym rozwiązaniem jest prawdopodobnie przedstawienie tej samej informacji na oddzielnej stronie, używając do tego semantycznego HTML (czyli oznaczając treść przy pomocy poprawnych elementów HTML tak, aby struktura informacji została rzetelnie przekazana). Jako przykład może służyć infografika zamieszczona na blogu firmy Nomensa, której alternatywa została przedstawiona na oddzielnej stronie, z użyciem odpowiednich elementów HTML.

Podsumowując:

Aby zapewnić alternatywę dla złożonych treści graficznych, takich jak np. wykresy, należy stworzyć wersję tekstową, która przekazuje tę samą informację, co element graficzny.

Alternatywę tę można zamieścić:

  • bezpośrednio przy obrazku, opisując jej położenie za pomocą atrybutu “alt”
  • w innym miejscu na tej samej stronie (zamieszczając link do opisu w bezpośrednim sąsiedztwie grafiki, lub tworząc relację pomiędzy grafiką a jej alternatywnym opisem za pomocą atrybutu “aria-describedby”)
  • na innej stronie
  • w oddzielnym pliku, który użytkownik może pobrać.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>