Każdy wykres potrzebuje tekstowej alternatywy

Dla czytnika ekranu wykres jest często niemym obrazem. Informacja znajduje się na ilustracji, więc osoby niewidome niczego się nie dowiedzą, jeśli nie zostanie ona opisana tekstem.

Nikt nie musi najpierw słuchać o liniach siatki i osiach. Należy zacząć od wniosku: co właściwie ten wykres mówi czytelnikowi?

Jeśli wykres jest obrazem, jego atrybut alt powinien przedstawiać wniosek, a nie zawierać słowo „wykres”. 📊

Krótki alt przekazuje najważniejszą informację. Gdy dane są bogate, należy dodać w pobliżu dłuższy opis przedstawiający pełny obraz.

Wykresy SVG nie są domyślnie obrazami. Należy dodać role="img" oraz nazwę, aby technologie asystujące traktowały całą grafikę jako jeden nazwany element.

Element title jako pierwsze dziecko elementu SVG również nadaje mu nazwę. Należy odwołać się do niego za pomocą aria-labelledby, aby zapewnić solidną obsługę w różnych czytnikach ekranu.

Większość wykresów służy do pokazania trendu lub porównania. Należy opisać go prostymi słowami: rośnie, maleje, pozostaje bez zmian albo jeden słupek wyraźnie góruje nad pozostałymi.

Wskaż najwyższe i najniższe punkty, podając ich nazwy i wartości. To jedno zdanie często przekazuje słuchaczowi całe znaczenie wykresu.

Niejasne określenia, takie jak „dużo”, nikomu nie pomagają. Podaj rzeczywiste wartości, aby słuchacz mógł analizować dane tak jak osoba widząca.

Umieść krótki opis tekstowy bezpośrednio pod wykresem jako widoczny podpis. Użytkownicy widzący również go przeglądają, więc ten wysiłek nigdy nie idzie na marne. ✨

Mały, dekoracyjny wykres sparkline obok liczby nie wnosi żadnego nowego znaczenia. Ukryj go za pomocą aria-hidden, aby nie zakłócał odbioru treści przez osoby korzystające z czytnika ekranu.

Od czego powinien zaczynać się tekstowy odpowiednik wykresu?

Nauczyłeś się, że każdy wykres potrzebuje tekstowego odpowiednika, który przedstawia najważniejszy wniosek, wskazuje wartości skrajne za pomocą rzeczywistych liczb i ukrywa wyłącznie dekoracyjne elementy graficzne. 🎯