Tekst alternatywny dla grafik

Tekst alternatywny dla obrazków

Wyobraź sobie taką sytuację. Wszystkie Twoje przeglądarki nagle przestały działać i nie pokazują Ci żadnych obrazków. Na stronach zostały tylko niektóre kolory, ale zamiast pięknych, barwnych grafik pokazują Ci się napisy w stylu:

AU310296749DAG406843Q3Xe.jpg
XCE326G27gGoxv745jgh.png

W dodatku cały układ strony kompletnie się rozjechał z racji tychże niedogodności. Wszystkie sekcje pokazują się jedna po drugiej, ale nie zachowała się ich pozycja na stronie. Niby pasek menu jest jakoś tam widoczny u góry, potem w jakichś dziwnych rządkach jest coś, co powinno wedle Twojej pamięci pojawić się po lewej stronie. Potem jest jakiś większy nagłówek, więc to chyba będzie część główna. Ale tutaj też pełno tych dziwnych napisów. No i jak tu żyć? Jak tu poruszać się po takiej stronie?
Pewnie zastanawiasz się teraz: człowieku, co Ty brałeś? Przecież tak nigdy się nie dzieje.
A ja Ci na to powiem: mylisz się, przyjacielu. Dokładnie tak wygląda wiele moich wycieczek po stronach WWW. Jestem osobą niewidomą i taki odbiór wielu witryn to moja codzienność.
Jak już wspominałem w artykule na temat logiki nagłówków Link otwiera się w nowym oknie., czytniki ekranowe, działają wedle określonej logiki. Czytają witryny sekcjami, od góry do dołu i zgodnie z kierunkiem tekstu, czyli najpierw baner górny, potem lewą kolumnę, potem centralną, prawą i stopkę.

 

Opisy obrazków

Choć podobno obraz wart jest więcej niż tysiąc słów, to jednak nie każdy może poznać jego wartość informacyjną i estetyczną. O ile ta druga przed osobami niewidomymi będzie niestety zakryta, to tą pierwszą w pewnym zakresie da się zrekompensować. Wystarczy dodać do grafiki tekst alternatywny (Link do ciekawego artykułu na temat alternative text.
Oczywiście skonstruowanie dobrego tekstu alternatywnego to też trochę sztuka. Postaram się jednak podpowiedzieć Ci kilka rzeczy, żeby tworzenie opisów stało się mniej skomplikowane.

 

Podstawy

Są takie grafiki, których opisanie nie będzie się wiązało z dużym nakładem pracy. Ikonkę koszyka wystarczy nazwać „koszyk” lub „do koszyka”, co wystarczająco opisze jej funkcjonalność.
Podobnie rzecz się ma z graficznymi elementami menu. Jeśli zawierają tekst, wystarczy umieścić go w opisie alternatywnym.
Strzałki nawigacyjne, ikony, obrazki na przyciskach – tego typu grafiki dają się nazwać jednym słowem. A jak brakuje Ci inspiracji, odpal sobie dowolną aplikację, w której w górnym pasku menu opisane są dostępne opcje. Poczytaj i przełóż to na swoją stronę.

 

Od ogółu do szczegółu

Dużo trudniej jest opisać obrazek zawierający wykres, infografikę, krajobraz. Ale i tutaj można znaleźć rozwiązania. Najprostsza wskazówka w opisywaniu takich grafik brzmi: zastanów się, co jest najważniejsze i przedstaw to za pomocą jednego lub najdalej kilku krótkich zdań.
Pokazujesz produkt w widoku od przodu? Opisz to prosto. Dajesz zbliżenie na wyświetlacz? Opisz to. Pokazujesz boczne przyciski lub gniazda w obudowie po lewej stronie? Umieść informacje w tekście alternatywnym. Poniżej przykład:

Zdjęcie pochodzi ze strony

opis alternatywny: „Front elektrycznego piecyka. Przy górnej krawędzi uchwyt do otwierania drzwiczek kuchenki, w centralnej części szklana szyba, przez którą widać ruszt, po prawej stronie drzwiczek trzy pokrętła regulacji: temperatura, sposób grzania, timer. przy prawej krawędzi, pomiędzy dwoma dolnymi pokrętłami kontrolka “Power” ”

Dlaczego warto umieszczać opisy obrazków?

Tekst alternatywny służy nie tylko poprawieniu komfortu użytkownika. Może także zwiększyć Ci sprzedaż lub wspierać zrozumienie wykresu lub diagramu przez osobę, która nie może go obejrzeć.
Ludzie są różni i różne są ich potrzeby w zakresie zdobywania i analizowania informacji. O ile na przykład dla osoby głuchej przyswojenie tekstu pisanego może być łatwiejsze, gdy umieścisz obok infografikę. To dodatkowy tekst stanowiący opis obrazka wspiera potrzeby użytkowników niewidomych lub o słabszym wzroku.