Jak możliwe jest przystępne odczytywanie obrazów!

W dobie cyfryzacji kwestia dostępności nie może być zaniedbywana. Jednym ze sposobów ułatwienia osobom z niepełnosprawnościami dostępu do treści w internecie są tzw. teksty alternatywne. Teksty te mają na celu udostępnienie osobom z pewnymi niepełnosprawnościami treści strony internetowej w formie, którą mogą zrozumieć. Ale: czym właściwie jest taki tekst alternatywny? Kto go potrzebuje? I jak go stworzyć?

Aby strony internetowe i treści internetowe były dostępne, teksty alternatywne odgrywają kluczową rolę, ułatwiając dostęp osobom z niepełnosprawnościami. Przekazują one informacje i funkcje osobom niewidomym i słabowidzącym, a także osobom z niepełnosprawnością fizyczną lub poznawczą. Pomagają również zrozumieć grafikę, zdjęcia i elementy sterujące. Czytniki ekranu lub wyświetlacze brajlowskie wykorzystują teksty alternatywne, czyniąc te elementy dostępnymi dla osób z niepełnosprawnościami.

Z drugiej strony, są one również przydatne w optymalizacji pod kątem wyszukiwarek. Alternatywy tekstowe przekazują wyszukiwarkom informacje o obrazie. To poprawia jego znajdowalność.

Jak tworzyć alternatywy tekstowe?

Odpowiedź na pytanie, jak stworzyć alternatywę tekstową, jest dość prosta: wystarczy wstawić tekst alternatywny w odpowiednim miejscu elementu, który będzie nią opatrzony. Większość programistów stosuje to w tzw. systemach CMS. Skrót CMS oznacza system zarządzania treścią (Content Management System). Jest to oprogramowanie służące do tworzenia i zarządzania treścią internetową.

Można w tym celu również użyć języka programowania HTML. Właśnie tutaj pojawia się atrybut alt, zwany również alt-tag. Jest on umieszczany wewnątrz znacznika img. Tekst jest zapisywany w wewnętrznej części atrybutu alt, a następnie jest on generowany przez technologie wspomagające.

Jednak to samo w sobie nie wystarczy. Nie należy również zapominać o atrybucie title, ponieważ istnieją czytniki ekranu, które odczytują opis nie atrybutu alt, lecz atrybut title. Dlatego sensowne jest również określenie identycznego tekstu dla obu tagów. Ponadto ma to również funkcję wyświetlania treści jako dodatkowych informacji o elemencie po najechaniu kursorem myszy na ten obszar.

Ponadto istnieje atrybut aria. Dokładniej, atrybut aria-label lub również aria-labelledby. Służą one do etykietowania przycisków lub pól formularza.

Różne rodzaje obrazów

W świecie, w którym stajemy się coraz bardziej cyfrowi, samo tworzenie alternatyw tekstowych nie wystarczy. Znacznie skuteczniejsze jest poprawne opisanie różnych typów obrazów, ponieważ różnią się one również funkcją. Najpierw jednak należy je rozpoznać. Opisy są bezużyteczne, jeśli nie odzwierciedlają funkcji obrazu. Nasuwa się więc pytanie: jakie są rodzaje obrazów? I jaki jest najlepszy sposób ich opisania?

Po pierwsze, warto zapoznać się z różnicami między różnymi rodzajami grafiki. Ważne jest, aby zrozumieć cel grafiki. Ogólnie rzecz biorąc, rozróżnia się grafikę informacyjną, funkcjonalną i dekoracyjną. Dodatkowo istnieją tzw. kroje pisma. W tym przypadku opis jest bardzo prosty – wystarczy przepisać tekst, który widać na schemacie.

Obrazy informacyjne

W przypadku obrazów informacyjnych, widoczna treść grafiki jest przekazywana za pomocą tekstów alternatywnych. Uwagę zwraca się na informacje istotne dla przekazu obrazu. Przykładem jest opis logo. W tym przypadku podawany jest krótki opis wyglądu logo i jego autora.

W poniższym przykładzie alternatywny tekst został zintegrowany z logo w formacie HTML:

<obrazek

źródło="logo.jpg"

alt="Logo Eye-Able. Przedstawia oko."

title="Logo Eye-Able. Przedstawia oko.">

</img>

W tym przypadku plik obrazu jest osadzony w kodzie HTML za pomocą elementu img, gdzie atrybut src określa źródło obrazu. Opis grafiki jest wstawiany w cudzysłów w atrybutach alt i title. W ten sposób tekst „Logo Eye-Able. Reprezentuje oko” jest wyświetlany przez czytnik ekranu lub monitor brajlowski.

W ten sposób bariera zostaje usunięta, a wszystkie osoby korzystające z technologii wspomagających mogą zrozumieć to, co widać na grafice.

Diagramy

Jeśli jednak jest to diagram, należy zawsze decydować o tym indywidualnie. Często zależy to od rodzaju i zawartych w nim informacji. Jeśli diagram zawiera tylko niewielką ilość informacji, można je uwzględnić w tekście alternatywnym. Na przykład: „Przedstawia wyniki wyborów 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ę zamieszczenie szczegółowych informacji w kolejnym tekście. Tekst alternatywny powinien wówczas określać jedynie rodzaj i cel diagramu. Dodatkowo można zaznaczyć, że bardziej szczegółowy opis znajduje się poniżej. Przykładem może być wykres przedstawiający liczbę ludności w krajach związkowych Niemiec. Treść brzmiałaby wówczas: „Przedstawia liczbę ludności 16 krajów związkowych na wykresie słupkowym. Uwaga: Bardziej szczegółowy opis znajduje się w tekście”.

Obrazy funkcjonalne

Następnie przyjrzyjmy się obrazom funkcjonalnym. Są to połączone grafiki. Dzielą się na linki, elementy i przyciski. W alternatywnych tekstach definiujesz funkcję, a nie to, co ma rozpoznawać. Zamiast tego określasz Gdzie Link prowadzi do.

Oto przykład w HTML dla powiązanej grafiki:

<a href=" https://eye-able.com/“ >

<img src=“logo.jpg“

alt="Strona główna od Eye-Able"

title="Strona główna od Eye-Able"

</img>

</a>

Atrybut a-Tag i href służą w HTML do tworzenia linku. W tym przypadku link jest tworzony do strony. https://eye-able.com/ W elemencie img ponownie widzimy logo Eye-Able, ale tym razem atrybuty alt i title opisują funkcję, a nie grafikę. W związku z tym treść „Strona główna Eye-Able” jest teraz wyświetlana za pomocą technologii wspomagających.

To samo dotyczy symboli. Na przykład, jeśli używana jest dyskietka, wygląd ikony nie ma znaczenia dla czytnika ekranu, ponieważ symbolizuje ona funkcję zapisywania. Innym przykładem są ikony wyszukiwania. Nie ma znaczenia, czy jest to lupa, czy nie. Znacznie ciekawsza jest akcja, która się za nią kryje. Reprezentuje ona opcję wyszukiwania lub początek wyszukiwania.

Podobnie jest z przyciskami. Przycisk reprezentujący strzałkę skierowaną w prawo nigdy nie powinien zawierać w tekście alternatywnym sformułowania „strzałka skierowana w prawo”. Dla osoby widzącej kliknięcie przycisku jest oczywiste, że następna strona otwiera się po kliknięciu, ale dla osób niewidomych nie. Dzieje się tak, ponieważ słyszą one jedynie „strzałkę w prawo” w komunikatach głosowych. Nie jest to wystarczająco jasne lub nie wskazuje na to, że następna strona otwiera się po naciśnięciu przycisku. Dlatego sensowniejsze jest dodanie do tych tekstów alternatywnych sformułowań „przejdź do następnej strony” lub „kontynuuj przewijanie”.

Obrazy dekoracyjne

Innym rodzajem grafiki są obrazy dekoracyjne. Służą one do ozdabiania strony internetowej. Procedura tworzenia tekstów alternatywnych jest tutaj bardzo prosta. W tym przypadku treść tekstu alternatywnego pozostaje pusta. Ważne jest, aby atrybut tekstu alternatywnego pozostał obecny. Pusta jest tutaj tylko treść tekstowa. W rezultacie czytnik ekranu pomija tę nieistotną grafikę w wynikach.

Jak pisać dobre teksty alternatywne?

Po wprowadzeniu różnych grafik, pozostaje tylko jedno pytanie: „Jak sformułować optymalne teksty alternatywne?”. Znając wszystkie te subtelności i różnice między obrazami, pozostaje tylko kilka zasad do przestrzegania. Poniższe wskazówki mogą okazać się pomocne:

1. Początek alternatywy tekstowej:

   Należy tutaj upewnić się, że nie powstaną żadne duplikaty. Początek nie powinien zatem zaczynać się od: „Obrazek…”, „Grafika…”, „Zdjęcie…” ani „Link”… Czytniki ekranu i tak rozpoznają i wyświetlają grafikę lub link. Dlatego należy z tego zrezygnować.

2. Długość tekstów:

   Nie określono, jak długi powinien być tekst alternatywny. Jednak do opisu grafiki wystarczy jedno lub dwa zdania. Idealna długość to 80 znaków. Dlaczego akurat 80? Osoby niewidome często czytają te teksty za pomocą monitora brajlowskiego. Monitory brajlowskie mogą wyświetlać od 40 do 80 znaków na raz. Dla zachowania przejrzystości zaleca się zatem trzymanie się tego limitu. Oczywiście tekst może być dłuższy. Nie powinien jednak przekraczać 120 znaków.

3. Pisownia i interpunkcja:

   Należy zadbać o poprawną pisownię. Jeśli słowo zawiera błąd ortograficzny, może to szybko doprowadzić do niejednoznaczności, ponieważ czytnik ekranu wyświetla dokładnie to, co jest zapisane w tekście alternatywnym. Podobnie, poprawna gramatyka odgrywa ważną rolę w rozumieniu obrazów. Istotna jest również poprawna interpunkcja. Niepoprawna lub brakująca interpunkcja utrudnia słuchaczowi zrozumienie grafiki. Z tego powodu przed wstawieniem tekstu należy sprawdzić pisownię i gramatykę.

4. Prawa autorskie:

   Wiele grafik zawiera informację o prawach autorskich. Ale czy ta informacja jest istotna dla zrozumienia obrazu? Odpowiedź brzmi: Nie! Dla dobrego sformułowania alternatyw tekstowych informacja ta jest nieciekawa, ponieważ w opisie obrazu zawarte są tylko najważniejsze elementy. Dlatego należy ją pominąć.

5. Informacja zwrotna:

   Łatwo jest ocenić, czy opis obrazu jest trafny. Ale jak? Odpowiedź na to pytanie jest prosta. Nie wymaga wiele wysiłku. Krótka informacja zwrotna od osoby niewidomej lub słabowidzącej dostarcza informacji o tym, czy treść tekstu została sformułowana sensownie. Nie każdy jednak zna osobę z dysfunkcją wzroku. Można to rozwiązać w inny sposób. Każdy, kto jeszcze nie widział obrazu, może zostać tutaj przesłuchany. Można to zrobić tutaj, oczywiście, pisemnie, ale także telefonicznie. Gdy tylko pojawi się „pozytywna” informacja zwrotna, opis jest trafny.

Co się właściwie dzieje, gdy brakuje tekstów alternatywnych?

Brak alternatywnych tekstów dla obrazów może być szczególnie uciążliwy dla użytkowników niewidomych. Oznaczałoby to, że nie byliby oni w stanie zobaczyć zawartości grafiki. Jednocześnie czytnik ekranu w takim przypadku wyświetliłby jedynie nazwę pliku, na przykład: „img123.jpg”. Taki opis nikomu by nie pomógł. Dlatego programiści powinni zawsze używać treści tekstowych. Ważne jest jednak również, aby znać różnice, aby móc sensownie opisywać obrazy i grafiki. Technologie wspomagające mogą następnie renderować je za pomocą alternatywnych tekstów. To również sprawia, że internet staje się nieco bardziej dostępny dla wszystkich.