W dobie cyfryzacji nie można zaniedbywać kwestii dostępności. Jednym ze sposobów ułatwienia osobom z niepełnosprawnościami dostępu do treści w Internecie są tzw. teksty alternatywne. Teksty te są tak skonstruowane, aby przekazywać osobom z określonymi niepełnosprawnościami treści strony internetowej w formie dla nich zrozumiałej. Ale: czym dokładnie jest taki tekst alternatywny? Kto go potrzebuje? I jak go stworzyć?
Aby zapewnić dostępność stron internetowych i treści w sieci, bardzo ważne są między innymi teksty alternatywne, które ułatwiają dostęp osobom z niepełnosprawnościami. Przekazują one informacje i opisują funkcje osobom niewidomym i niedowidzącym, a także osobom z niepełnosprawnościami fizycznymi lub poznawczymi. Pomagają również w zrozumieniu grafik, zdjęć i elementów sterujących. Czytniki ekranu lub wyświetlacze brajlowskie wykorzystują teksty alternatywne, dzięki czemu elementy te stają się dostępne dla osób z niepełnosprawnościami.
Z drugiej strony są one również przydatne w optymalizacji pod kątem wyszukiwarek. Teksty alternatywne przekazują wyszukiwarkom informacje o obrazie. Dzięki temu poprawia się widoczność strony w wynikach wyszukiwania.
Jak tworzyć alternatywne opisy tekstowe?
Odpowiedź na pytanie, jak utworzyć tekst alternatywny, jest bardzo prosta: wystarczy wpisać tekst alternatywny w odpowiednim polu elementu, który ma być opatrzony takim tekstem. Większość programistów korzysta z tzw. CMS. Skrót CMS oznacza Content Management System (system zarządzania treścią). Jest to oprogramowanie służące do tworzenia i zarządzania treściami internetowymi.
W tym celu można również wykorzystać język programowania HTML. Tutaj do gry wkracza atrybut alt, zwany również tagiem alt. Umieszcza się go wewnątrz tagu img. W treści atrybutu alt wpisuje się tekst, który jest następnie odtwarzany za pomocą technologii wspomagających.
To jednak nie wystarczy. Nie należy również zapominać o atrybucie „title”, ponieważ istnieją czytniki ekranu, które nie odczytują opisu z atrybutu „alt”, lecz z atrybutu „title”. Dlatego warto podać identyczny tekst w obu tagach. Ponadto służy to również wyświetlaniu treści jako dodatkowej informacji o elemencie po najechaniu myszką na dany obszar.
Ponadto istnieje jeszcze atrybut „aria”. A dokładniej atrybut „aria-label” lub „aria-labelledby”. Służą one do opisywania przycisków lub pól formularzy.
Różne rodzaje obrazów
W świecie, w którym coraz bardziej przechodzimy na technologie cyfrowe, samo tworzenie alternatyw tekstowych nie wystarczy. Znacznie skuteczniejsze jest prawidłowe opisywanie różnych rodzajów obrazów, ponieważ różnią się one również pod względem funkcji. Najpierw jednak trzeba je rozpoznać. Opisy są bezużyteczne, jeśli nie oddają funkcji obrazu. Powstaje zatem pytanie: jakie są rodzaje obrazów? I jak najlepiej je opisać?
Na początek warto zapoznać się z różnicami między poszczególnymi rodzajami grafiki. Ważne jest przy tym zrozumienie sensu i przeznaczenia danej grafiki. Ogólnie rzecz biorąc, rozróżnia się grafikę informacyjną, funkcjonalną i dekoracyjną. Oprócz tego istnieją jeszcze tak zwane kompozycje typograficzne. Ich opis jest bardzo prosty – wystarczy po prostu przytoczyć tekst widoczny na grafice.
Zdjęcia informacyjne
W przypadku obrazów informacyjnych treść widoczna na grafice jest przekazywana za pomocą tekstów alternatywnych. Zwraca się przy tym uwagę na informacje istotne dla przekazu obrazu. Przykładem może być opis logo. Zawiera on krótki opis wyglądu logo oraz informacje o tym, kto jest jego autorem.
W poniższym przykładzie w kodzie HTML do logo dodano alternatywę tekstową:
<img
src="logo.jpg"
alt=„Logo Eye-Able. Przedstawia oko.”
title=„Logo Eye-Able. Przedstawia oko.”>
</img>
W tym przypadku plik graficzny jest osadzany w kodzie HTML za pomocą elementu img, przy czym atrybut src określa źródło obrazu. Opis grafiki umieszcza się w cudzysłowie w atrybutach alt i title. W ten sposób treść tekstowa „Logo Eye-Able. Przedstawia oko” jest odczytywana przez czytnik ekranu lub wiersz brajlowski.
W ten sposób znika bariera i wszystkie osoby korzystające z technologii wspomagających mogą zrozumieć, co przedstawia ten wykres.
Wykresy
Jeśli jednak chodzi o wykres, decyzję należy zawsze podejmować indywidualnie dla każdego przypadku. Często zależy to od rodzaju wykresu i zawartych w nim informacji. Jeśli wykres zawiera tylko niewiele informacji, można je uwzględnić w tekście alternatywnym. Na przykład: „Przedstawia wyniki wyborcze partii na wykresie słupkowym. Partia A: 40%, partia B: 30%, partia C: 20% itd.”. Jeśli jednak przedstawiono coś bardziej złożonego lub obszernego, zaleca się umieszczenie szczegółowych informacji w tekście następującym po wykresie. W tekście alternatywnym należy wówczas podać jedynie rodzaj i cel wykresu. Dodatkowo można zaznaczyć, że dokładniejszy opis znajduje się poniżej. Przykładem może być wykres przedstawiający liczbę mieszkańców krajów związkowych. Treść brzmiałaby wówczas: „Przedstawia liczbę mieszkańców 16 krajów związkowych na wykresie słupkowym. Uwaga: bardziej szczegółowy opis znajduje się w tekście”.
Zdjęcia funkcjonalne
Następnie przyjrzyjmy się obrazom funkcjonalnym. Są to grafiki zawierające linki. Dzieli się je na linki, elementy lub przyciski. W opisach alternatywnych określa się ich funkcję, a nie to, co na nich widać. Zamiast tego podaje się,dokądprowadzi link.
Oto przykład grafiki z linkiem w języku HTML:
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt=„Strona główna serwisu Eye-Able”
title=„Strona główna serwisu Eye-Able”
</img>
</a>
W języku HTML tag a i atrybut href służą do tworzenia linków. W tym przypadku tworzony jest link do strony https://services.eye-able.com/. W elemencie img ponownie widzimy logo Eye-Able, ale tym razem atrybuty alt i title nie opisują grafiki, lecz jej funkcję. Dzięki temu treść „Strona główna Eye-Able” jest odczytywana przez technologie wspomagające.
To samo dotyczy symboli. Na przykład w przypadku użycia dyskietki wygląd symbolu nie ma znaczenia dla odczytu przez czytnik ekranu, ponieważ symbolizuje on funkcję zapisywania. Kolejnym przykładem są ikony wyszukiwania. Nie ma znaczenia, czy jest to lupa. Znacznie ważniejsza jest bowiem czynność, którą symbolizują. Ikony te przedstawiają opcję wyszukiwania lub rozpoczęcie wyszukiwania.
Podobnie wygląda sytuacja w przypadku przycisków. Przycisk przedstawiający strzałkę w prawo nigdy nie powinien mieć w tekście alternatywnym opisu „strzałka w prawo”. Dla osoby widzącej jest oczywiste, że po kliknięciu otworzy się następna strona, jednak dla osób niewidomych nie jest to jasne. Słyszą one bowiem za pośrednictwem czytnika ekranu jedynie „strzałka w prawo”. Nie jest to wystarczająco jednoznaczne ani nie pozwala rozpoznać, że po naciśnięciu przycisku otworzy się następna strona. Dlatego sensowniejsze jest nadanie tym tekstom alternatywnym treści „do następnej strony” lub „przejdź dalej”.
Obrazy dekoracyjne
Kolejnym rodzajem grafiki są obrazy dekoracyjne. Służą one do ozdabiania stron internetowych. Sposób tworzenia tekstów alternatywnych jest w tym przypadku bardzo prosty. Treść tekstu alternatywnego pozostawia się pustą. Ważne jest jednak, aby atrybut tekstu alternatywnego nadal istniał. Tylko treść tekstowa pozostaje pusta. W rezultacie czytnik ekranu pomija tę nieistotną grafikę podczas odczytu.
Jak tworzyć dobre opisy alternatywne?
Po zapoznaniu się z różnymi rodzajami grafik pozostaje tylko jedno pytanie: „Jak sformułować optymalne opisy alternatywne?”. Znając wszystkie te niuanse i różnice między obrazami, wystarczy przestrzegać zaledwie kilku zasad. Pomocne mogą być poniższe wskazówki:
- Początek alternatywnego opisu tekstowego:
Należy tu zwrócić uwagę, aby nie pojawiały się powtórzenia. Początek nie powinien więc zaczynać się od: „Obraz…”, „Grafika…”, „Zdjęcie…” ani „Link…”. Czy jest to grafika, czy link, czytniki ekranu i tak to rozpoznają i odczytają. Dlatego należy tego unikać.
Długość tekstów:
Nie ma ustalonych wytycznych dotyczących długości tekstu alternatywnego. Jednak do opisu grafiki powinno wystarczyć jedno lub dwa zdania. Idealna długość to 80 znaków. Dlaczego 80? Osoby niewidome często czytają te teksty za pomocą wyświetlacza brajlowskiego. Wyświetlacze brajlowskie mogą wyświetlać jednorazowo od 40 do 80 znaków. Ze względu na przejrzystość zaleca się zatem przestrzeganie tego ograniczenia. Oczywiście tekst może być również dłuższy. Nie powinien jednak przekraczać 120 znaków.
Ortografia i interpunkcja:
Należy zadbać o poprawną ortografię. Jeśli w słowie znajduje się błąd ortograficzny, może to szybko doprowadzić do niejasności, ponieważ czytnik ekranu odczytuje dokładnie to, co zostało zapisane w tekście alternatywnym. Również poprawna gramatyka odgrywa ważną rolę w zrozumieniu obrazów. Istotne znaczenie ma tu również poprawna interpunkcja. Błędne lub brakujące znaki interpunkcyjne utrudniają bowiem słuchaczom zrozumienie grafiki. Z tego powodu przed wstawieniem treści tekstowych należy przeprowadzić kontrolę ortograficzną i gramatyczną.
Prawa autorskie:
Wiele grafik zawiera informację o prawach autorskich. Czy jednak ta informacja jest istotna dla zrozumienia obrazu? Odpowiedź brzmi: nie! Informacja ta nie ma znaczenia dla prawidłowego sformułowania alternatyw tekstowych, ponieważ opis obrazu zawiera tylko najważniejsze elementy. Dlatego należy ją pominąć.
Opinie:
Szybko można sprawdzić, czy opis obrazu jest udany. Ale jak? Odpowiedź na to pytanie jest prosta. Nie wymaga to dużego wysiłku. Krótka opinia osoby niewidomej lub niedowidzącej pozwoli ustalić, czy treść opisu została sformułowana w sposób sensowny. Jednak nie każdy zna osobę z dysfunkcją wzroku. Problem ten można rozwiązać w inny sposób. Można poprosić o opinię każdą osobę, która jeszcze nie widziała danego obrazu. Można to oczywiście zrobić na piśmie, ale również telefonicznie. Gdy tylko pojawi się „pozytywna” opinia, opis jest udany.
Co się właściwie dzieje, gdy brakuje tekstów alternatywnych?
Brak tekstów alternatywnych do obrazów może być szczególnie irytujący dla użytkowników niewidomych. Powoduje to bowiem, że nie są oni w stanie zapoznać się z treścią grafiki. Jednocześnie czytnik ekranu odczytałby w takim przypadku jedynie nazwę pliku, na przykład: „img123.jpg”. Taki opis nikomu by nie pomógł. Twórcy stron powinni zatem zawsze dbać o stosowanie treści tekstowych. Ważne jest jednak również poznanie różnic między obrazami a grafikami, aby móc je sensownie opisać. Technologie wspomagające mogą następnie odtworzyć te treści za pomocą tekstów alternatywnych. Dzięki temu internet staje się nieco bardziej dostępny dla wszystkich.
