W czasach cyfryzacji nie wolno zaniedbywać kwestii dostępności. Jednym ze sposobów ułatwienia osobom niepełnosprawnym dostępu do treści w Internecie jest stosowanie tzw. tekstów alternatywnych. Teksty te są zaprojektowane w taki sposób, że odtwarzają zawartość strony internetowej w formie zrozumiałej dla osób z pewnymi niepełnosprawnościami. Ale czym właściwie jest tekst alternatywny? Kto ich potrzebuje? I jak można go stworzyć?
W celu zapewnienia dostępności stron internetowych i treści internetowych, teksty alternatywne, między innymi, są bardzo ważne dla ułatwienia dostępu osobom niepełnosprawnym. Przekazują one informacje i funkcje osobom niewidomym i niedowidzącym, a także osobom z niepełnosprawnością fizyczną lub poznawczą. Pomagają również zrozumieć grafikę, zdjęcia i elementy obsługi. Czytniki ekranu lub wyświetlacze brajlowskie wykorzystują alternatywy tekstowe i udostępniają te elementy osobom niepełnosprawnym.
Z drugiej strony są one również przydatne do optymalizacji pod kątem wyszukiwarek. Alternatywy tekstowe przekazują informacje o obrazie do wyszukiwarek. Poprawia to możliwości wyszukiwania.
Jak tworzyć alternatywy tekstowe?
Odpowiedź na pytanie, jak utworzyć tekst alternatywny, jest dość prosta: wystarczy wstawić tekst alternatywny w odpowiednim obszarze elementu, który ma być wyposażony w taki tekst. Większość programistów używa tego w tak zwanym CMS. Skrót CMS oznacza System Zarządzania Treścią. Jest to oprogramowanie służące do tworzenia i zarządzania treścią stron internetowych.
W tym celu można również wykorzystać język programowania HTML. Tutaj do gry wkracza atrybut alt, znany również jako alt-Tag . Jest on wstawiany do znacznika img. Tekst jest zapisywany w wewnętrznym obszarze atrybutu alt, który jest następnie wyświetlany za pośrednictwem technologii wspomagających.
Samo to jednak nie wystarczy. Nie należy również zapominać o atrybucie title, ponieważ istnieją czytniki ekranu, które nie czytają opisu atrybutu alt, ale raczej atrybut title. Dlatego sensowne jest wprowadzenie identycznego tekstu dla obu tagów. Ma to również funkcję wyświetlania treści jako dodatkowych informacji o elemencie po najechaniu myszą na obszar.
Istnieje również atrybut aria. A dokładniej atrybut aria-label lub aria-labelledby. Są one używane do oznaczania przycisków lub pól formularzy.
Różne rodzaje obrazów
W świecie, w którym stajemy się coraz bardziej cyfrowi, nie wystarczy po prostu tworzyć alternatyw tekstowych. Znacznie skuteczniejsze jest prawidłowe opisanie różnych rodzajów obrazów, ponieważ różnią się one również pod względem funkcji. Jednak najpierw należy je rozpoznać. Opisy są bezużyteczne, jeśli nie mogą odzwierciedlać funkcji obrazu. Powstaje więc pytanie: Jakie są rodzaje obrazów? I jaki jest najlepszy sposób na ich opisanie?
Po pierwsze, należy zapoznać się z różnicami między różnymi rodzajami grafiki. Ważne jest, aby zrozumieć znaczenie i cel grafiki. Ogólnie rzecz biorąc, rozróżnia się grafikę informacyjną, funkcjonalną i dekoracyjną. Istnieją również tak zwane kroje pisma. Tutaj opis jest bardzo prosty, wystarczy skopiować tekst, który jest wyświetlany na grafice.
Zdjęcia informacyjne
W przypadku obrazów informacyjnych widoczna treść grafiki jest przekazywana za pomocą alternatywnych tekstów. Zwraca się uwagę na informacje, które są istotne dla przekazu obrazu. Przykładem tego jest opis logo. Opisuje on pokrótce, jak wygląda logo i kto je zaprojektował.
W poniższym przykładzie alternatywa tekstowa jest zintegrowana z logo w HTML:
<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 HTML za pomocą elementu img, z atrybutem src określającym źródło obrazu. Opis grafiki jest wstawiany w cudzysłowie w atrybutach alt i title. W ten sposób treść tekstowa "Logo Eye-Able. Reprezentuje oko" jest wyświetlana za pomocą czytnika ekranu lub wyświetlacza brajlowskiego.
W ten sposób bariera zostaje usunięta, a wszystkie osoby korzystające z technologii wspomagających mogą zrozumieć, co jest pokazane na tej grafice.
Schematy
Jeśli jednak jest to wykres, decyzję należy zawsze podejmować indywidualnie. Często zależy to od rodzaju wykresu i zawartych w nim informacji. Jeśli wykres 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 prezentowane jest coś bardziej złożonego lub dłuższego, zaleca się umieszczenie szczegółowych informacji w kolejnym tekście. Tekst alternatywny powinien wówczas określać jedynie rodzaj i cel diagramu. Ponadto można wskazać, że bardziej szczegółowy opis znajduje się poniżej. Przykładem może być wykres przedstawiający liczbę ludności krajów związkowych. 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 przyjrzymy się obrazom funkcjonalnym. Są to powiązane grafiki. Są one podzielone na linki, elementy lub przyciski. W alternatywach tekstowych definiuje się funkcję, a nie to, co ma zostać rozpoznane. Zamiast tego określają Państwo, dokąd prowadzi łącze.
Oto przykład w HTML dla połączonej grafiki:
<a href=“https://eye-able.com/“>
<img src=“logo.jpg“
alt="Strona główna Eye-Able"
title="Strona główna z Eye-Able"
</img>
</a>
Atrybut a-Tag i href są używane w HTML do tworzenia linków. 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 nie opisują grafiki, ale funkcję. Treść "Strona główna Eye-Able" jest teraz wyświetlana za pośrednictwem technologii wspomagających.
To samo dotyczy symboli. Na przykład, jeśli używana jest dyskietka, wygląd ikony nie ma znaczenia dla wyjścia z czytnikiem ekranu, ponieważ symbolizuje funkcję zapisywania. Innym przykładem są ikony wyszukiwania. To, czy jest to szkło powiększające, czy nie, nie ma znaczenia. O wiele bardziej interesujące jest działanie, które się za nią kryje. Symbolizuje ona opcję wyszukiwania lub rozpoczęcie wyszukiwania.
Podobnie jest w przypadku przycisków. Przycisk, który wyświetla strzałkę skierowaną w prawo, nigdy nie powinien być oznaczony jako "strzałka skierowana w prawo" w tekście alternatywnym. Dla osoby widzącej jest jasne, że po kliknięciu otworzy się następna strona, ale nie dla osób niewidomych. Dzieje się tak, ponieważ słyszą one tylko "strzałkę w prawo" za pośrednictwem komunikatu głosowego. Nie jest to wystarczająco jasne lub nie wskazuje, że następna strona otworzy się po kliknięciu przycisku. Dlatego bardziej sensowne jest dostarczenie tych alternatywnych tekstów z "do następnej strony" lub "przewiń do następnej strony".
Obrazy dekoracyjne
Innym rodzajem grafiki są obrazy dekoracyjne. Są one wykorzystywane do dekoracji strony internetowej. Procedura tworzenia tekstu alternatywnego jest tutaj bardzo prosta. Treść tekstu alternatywnego pozostaje pusta. Ważne jest, aby atrybut tekstu alternatywnego był nadal obecny. Tylko treść tekstu jest tutaj pusta. W rezultacie czytnik ekranu pomija tę nieistotną grafikę w danych wyjściowych.
Jak pisać dobre teksty alternatywne?
Teraz, gdy różne grafiki zostały już zaprezentowane, pozostaje tylko jedno pytanie: "Jak sformułować optymalne teksty alternatywne?". Gdy znają już Państwo wszystkie te subtelności i różnice między obrazami, pozostaje tylko kilka zasad, których należy przestrzegać. Poniższe wskazówki mogą okazać się pomocne:
- Początek alternatywy tekstowej:
Proszę zwrócić uwagę, aby nie powielać tych samych informacji. Początek nie powinien zatem zaczynać się od: "Obraz ...", "Grafika ...", "Zdjęcie ..." lub "Link" ..... To, czy jest to grafika, czy łącze, jest i tak rozpoznawane i wyświetlane przez czytniki ekranu. Dlatego należy to pominąć.
Długość tekstów:
Długość tekstu alternatywnego nie jest określona. Jedno lub dwa zdania powinny jednak wystarczyć do opisania grafiki. Idealna długość to 80 znaków. Dlaczego 80? Osoby niewidome często czytają te teksty za pomocą monitora brajlowskiego. Wyświetlacze brajlowskie mogą wyświetlać od 40 do 80 znaków jednocześnie. Ze względu na przejrzystość zaleca się zatem trzymanie się tego limitu. Oczywiście tekst może być dłuższy. Nie powinien on jednak przekraczać 120 znaków.
Pisownia i interpunkcja:
Proszę upewnić się, że pisownia jest poprawna. Jeśli słowo zawiera błąd ortograficzny, może szybko stać się niejasne, ponieważ czytnik ekranu wyświetla dokładnie to, co jest zapisane w tekście alternatywnym. Poprawna gramatyka również odgrywa ważną rolę w zrozumieniu obrazów. Istotna jest również poprawna interpunkcja. Nieprawidłowa interpunkcja lub jej brak utrudnia słuchaczowi zrozumienie grafiki. Z tego powodu przed wstawieniem treści tekstowej należy przeprowadzić kontrolę pisowni i gramatyki.
Prawa autorskie:
Wiele grafik posiada informację o prawach autorskich. Ale czy ta informacja jest ważna dla zrozumienia obrazu? Odpowiedź brzmi: Nie! Informacje te nie są interesujące dla dobrego sformułowania alternatyw tekstowych, ponieważ opis obrazu zawiera tylko najważniejsze informacje. Informacje te należy zatem pominąć.
Informacje zwrotne:
Mogą Państwo szybko określić, czy opis obrazu jest udany. Ale w jaki sposób? Odpowiedź na to pytanie jest prosta. Nie wymaga to wielkiego wysiłku. Krótka informacja zwrotna od osoby niewidomej lub niedowidzącej dostarcza informacji o tym, czy treść tekstu została sformułowana sensownie. Nie każdy jednak zna osobę z dysfunkcją wzroku. Tę kwestię również można rozwiązać inaczej. Każdemu, kto jeszcze nie widział obrazu, można zadać pytania. Można to oczywiście zrobić pisemnie, ale także telefonicznie. Gdy tylko otrzymamy "pozytywną" odpowiedź, opis jest udany.
Co się dzieje, gdy brakuje tekstów alternatywnych?
Brak alternatywnych tekstów dla obrazów może być szczególnie irytujący dla niewidomych użytkowników. Oznaczałoby to, że nie byliby oni w stanie rozpoznać zawartości grafiki. Jednocześnie czytnik ekranu wyświetlałby w takim przypadku jedynie nazwę pliku, na przykład: "img123.jpg". Taki opis nikomu by nie pomógł. Deweloperzy powinni zatem zawsze upewnić się, że używają treści tekstowych. Ważne jest jednak również, aby znać różnice, aby móc opisywać obrazy i grafiki w znaczący sposób. Technologie wspomagające mogą następnie odtworzyć je za pomocą alternatyw tekstowych. Dzięki temu Internet jest bardziej dostępny dla wszystkich.
