Jak projektować dostępne wykresy w raportach ESG? (WCAG i wysoki kontrast)

Projektując twardy, merytoryczny raport niefinansowy (ESG), szybko zderzysz się z murem w postaci dziesiątek danych, które zarząd chce „ładnie zaprezentować” w formie wykresów kołowych, słupkowych czy liniowych. Z punktu widzenia designu (DTP) wydaje się to proste. Problem pojawia się, gdy Twój raport musi sprostać wymaganiom WCAG 2.1.

Jeżeli planujesz oprzeć wszystkie statystyki na firmowej palecie kolorów składającej się z szarości i pastelowego błękitu – szykuj się na srogą porażkę podczas audytu dostępności. W tym artykule pokazuję, jak inżynieryjnie podejść do graficznego prezentowania danych w ujęciu dostępności wizualnej.

Czytaj także: Projektowanie raportów ESG zgodnie z WCAG: Kompletny przewodnik po dostępnym DTP

Prawo kontrastu 3:1

Złota zasada dostępnego składu raportów brzmi: elementy niosące kluczową informację graficzną (czyli np. linie wykresów, granice segmentów w diagramie kołowym) muszą zachować kontrast co najmniej 3:1 względem tła. Z kolei jeśli na wykresie dodajesz legendę lub opisy osi małymi literami – ten kontrast wzrasta do 4.5:1.

To bezwzględna matematyka. Zanim w InDesignie narysuję chociaż jedną tabelkę lub wykres, wgrywam księgę znaku klienta do weryfikatorów kontrastu (np. Colour Contrast Analyser). Bardzo często okazuje się, że firmowe „jasne szarości” używane do podziału wykresów są fizycznie niewidoczne dla osób starszych czy słabowidzących. W Studio Składam od razu narzucam twardą, ustandaryzowaną paletę barw zgodną z prawem.

Nie koduj informacji wyłącznie kolorem (Daltonizm)

To najczęstszy błąd W3C, przez który padają raporty ESG firm giełdowych. Wyobraź sobie wykres słupkowy. Słupek zielony to „wzrost zysków”, słupek czerwony to „emisja CO2”.

Symulacja dysfunkcji w praktyce:
Zarządy często uważają, że dodanie zieleni i czerwieni rozwiązuje sprawę. Zapominają jednak, że dla wielu osób to dosłownie ten sam kolor. Osoba z Protanopią (nierozpoznawanie czerwieni) lub Deuteranopią (nierozpoznawanie zieleni) zobaczy oba te słupki jako identyczną, wyblakłą musztardę! Jeżeli zlecimy wykonanie wykresu „na oko”, bez weryfikacji programowej, stworzymy bezużyteczny diagram. Dlatego projektując w DTP, nie ufam swojemu oku – używam twardych narzędzi weryfikujących profile ICC pod kątem wad wzroku.

Zgodnie z zasadą WCAG 1.4.1 (Użycie Koloru), kolor nie może być jedynym sposobem na przekazanie kluczowej informacji. Jak to projektujemy prawidłowo w profesjonalnym DTP?

• Zastosuj wzory i tekstury: Dodajemy siatki, paski lub kropki na jednym ze słupków.
• Opisy bezpośrednio na danych: Rezygnujemy ze standardowej, oddalonej „legendy” i wpisujemy etykiety („Zyski”, „CO2”) bezpośrednio na słupkach lub połączonych z nimi liniach. To znacznie obniża stres poznawczy.

Grzech DTP: Wykresy rysowane bezpośrednio w InDesignie

Projektanci nierzadko popełniają ogromny błąd architektoniczny – wklejają wektory lub rysują zawiłe linie wykresów bezpośrednio z poziomu samego narzędzia Adobe InDesign (bez linkowania). Taki zabieg to koszmar dla dostępności!

Każda linijka narysowana narzędziem „Pen Tool” staje się oddzielnym obiektem wektorowym w strukturze tagów PDF (tzw. zjawisko śmieciowych wektorów). Zamiast tego, w moim Studio Składam pracuję na zlinkowanych łączach (zewnętrzne pliki .ai lub .eps). Zewnętrzny plik ze złączonymi warstwami można oprawić jednym spójnym atrybutem i podać jako [Figure], bez zaśmiecania dokumentu dziesiątkami niezdefiniowanych krzywych, dla których łatwo dodać twardy tekst alternatywny.

Opisy Alternatywne (ALT) dla twardych danych

Jeżeli wykres jest złożony (np. wielopoziomowy schemat powiązań kapitałowych zarządu), dla czytnika ekranu to wciąż tylko [Obraz]. Podczas eksportu do dostępnego PDF/UA (Tagged PDF), musisz w InDesignie wpisać odpowiedni tekst alternatywny w panelu „Object Export Options”.

Nie wpisuj „Wykres kołowy wydatków”. Wpisuj twarde fakty, po które czytelnik przyszedł do raportu!
Dobry ALT: „Wykres przedstawiający udział w emisji: Transport 45%, Budynki 30%, Przemysł 25%.”

Jeżeli wykres zawiera 50 różnych słupków – nie przepisuj ich do małego pola ALT. W takiej sytuacji opis alternatywny powinien brzmieć: „Szczegółowy wykres przychodów w latach 2020-2025. Pełne dane znajdują się w tabeli finansowej poniżej”. I tym samym płynnie przechodzimy do tabel, które muszą być matematycznie precyzyjne pod kątem kodowania.

Czytaj także: Dostępne tabele finansowe w PDF: Złożone struktury a czytniki ekranu