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

W czasach cyfryzacji nie można zaniedbywać kwestii dostępności. Jednym ze sposobów ułatwienia osobom niepełnosprawnym dostępu do treści w Internecie są tzw. teksty alternatywne. Teksty te mają na celu dostarczenie osobom z pewnymi niepełnosprawnościami treści strony internetowej w formie dla nich zrozumiałej. Ale: Czym dokładnie jest taki tekst alternatywny? Kto ich potrzebuje? I jak można go stworzyć?

Aby strony internetowe i treści internetowe były dostępne, bardzo ważne są między innymi teksty alternatywne, które ułatwiają dostęp 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 sterujące. Czytniki ekranu lub wyświetlacze brajlowskie wykorzystują alternatywy tekstowe, dzięki czemu elementy te są dostępne dla osób niepełnosprawnych.

Z drugiej strony są one również przydatne do optymalizacji pod kątem wyszukiwarek. Alternatywy tekstowe przenoszą 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: aby to zrobić, wystarczy wstawić tekst alternatywny w odpowiednim obszarze elementu, który zostanie wyposażony w taki tekst. Większość deweloperów stosuje to 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.

Do tego celu można również wykorzystać język programowania HTML. W tym miejscu do gry wkracza atrybut alt lub nazywany również tagiem alt. Jest on wstawiany wewnątrz znacznika img. Tekst jest zapisywany w wewnętrznym obszarze atrybutu alt, który jest następnie wyprowadzany za pomocą 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 atrybutu title. Dlatego też sensowne jest 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 myszą na obszar.

Ponadto istnieje atrybut aria. A dokładniej atrybut aria-label lub atrybut aria-labelledby. Są one używane do oznaczania przycisków lub pól formularzy.

Różne typy 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 typów obrazów, ponieważ różnią się one również pod względem funkcji. Należy je jednak najpierw 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 typami grafiki. Ważne jest, aby zrozumieć cel grafiki. Ogólnie rzecz biorąc, rozróżnia się grafikę informacyjną, funkcjonalną i dekoracyjną. Ponadto istnieją tak zwane kroje pisma. Tutaj opis jest bardzo prosty, po prostu przejmuje się tutaj tekst, który ma być widoczny na schemacie.

Obrazy 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. Tutaj podany jest krótki opis tego, jak wygląda logo i od kogo pochodzi.

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, gdzie atrybut src określa źródło obrazu. Opis grafiki jest umieszczany w cudzysłowie w atrybutach alt i title. W ten sposób treść tekstowa "Logo Eye-Able. Przedstawia 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 widać 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 zawrzeć 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ługiego, zaleca się umieszczenie szczegółowych informacji w kolejnym tekście. Tekst alternatywny powinien wówczas określać jedynie rodzaj i cel diagramu. Dodatkowo można wskazać, że bardziej szczegółowy opis znajduje się poniżej. Przykładem może być wykres przedstawiający liczbę ludności w niemieckich krajach związkowych. Treść brzmiałaby wówczas: "Przedstawia liczby 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 rozważmy obrazy funkcjonalne. Są to powiązane grafiki. Są one podzielone na linki, elementy lub przyciski. W alternatywach tekstowych definiuje się funkcję, a nie to, co należy rozpoznać. Zamiast tego określasz , dokąd prowadzi link.

Oto taki przykład w HTML dla połączonej grafiki:

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

<img src=“logo.jpg“

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

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

</img>

</a>

Znacznik a i atrybut 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 opisują funkcję, a nie grafikę. W ten sposób 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. Reprezentuje ona opcję wyszukiwania lub początek wyszukiwania.

Podobnie jest z przyciskami. Przycisk przedstawiający strzałkę skierowaną w prawo nigdy nie powinien mieć "strzałki skierowanej 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 "strzałkę w prawo" tylko za pośrednictwem komunikatu głosowego. Nie jest to wystarczająco jasne lub nie pokazuje, że następna strona otwiera się po naciśnięciu przycisku. Dlatego bardziej sensowne jest zapewnienie tych alternatywnych tekstów za pomocą "przejdź do następnej strony" lub "kontynuuj przewijanie".

Obrazy dekoracyjne

Innym rodzajem grafiki są obrazy dekoracyjne. Są one używane 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. Skutkuje to tym, że czytnik ekranu pomija tę nieistotną grafikę w danych wyjściowych.

Jak pisać dobre teksty alternatywne?

Teraz, gdy różne grafiki zostały wprowadzone, pozostało tylko jedno pytanie: "Jak sformułować optymalne teksty alternatywne?". Po zapoznaniu się ze wszystkimi subtelnościami i różnicami obrazów, pozostaje tylko kilka zasad, których należy przestrzegać. Poniższe wskazówki mogą okazać się pomocne:

1. Początek alternatywy tekstowej:

   Tutaj należy upewnić się, że nie występują duplikaty. Początek nie powinien zatem zaczynać się od: "Obraz ...", "Grafika ...", "Zdjęcie ..." lub "Link" .... To, czy jest to grafika, czy link, jest i tak rozpoznawane i wyświetlane przez czytniki ekranu. Dlatego należy z tego zrezygnować.

2. Długość tekstów:

   Długość tekstu alternatywnego nie jest określona. Jednak jedno do dwóch zdań powinno wystarczyć na opis 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 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 dwuznaczności, ponieważ czytnik ekranu wyświetla dokładnie to, co jest zapisane w tekście alternatywnym. Podobnie, poprawna gramatyka 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.

4. Prawa autorskie:

   Wiele grafik posiada informację o prawach autorskich. Ale czy ta informacja jest ważna dla zrozumienia obrazu? Odpowiedź brzmi: Nie! Dla dobrego sformułowania alternatyw tekstowych ta informacja jest nieinteresująca, ponieważ w opisie obrazu napisane są tylko najważniejsze rzeczy. Dlatego informacje te powinny zostać pominięte.

5. Informacje zwrotne:

   Łatwo jest określić, czy opis obrazu jest udany. Ale jak? Odpowiedź na to pytanie jest łatwa. Nie wymaga dużego 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 wadą wzroku. Można to rozwiązać w inny sposób. Każdy, kto jeszcze nie widział obrazka, może zostać tutaj przesłuchany. Można to oczywiście zrobić pisemnie, ale także telefonicznie. Jak tylko pojawi się "pozytywna" informacja zwrotna, opis jest udany.

Co tak naprawdę dzieje się, 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 w stanie zobaczyć zawartości grafiki. Jednocześnie czytnik ekranu wyświetliłby w takim przypadku tylko nazwę pliku, np: "img123.jpg". Taki opis nikomu by nie pomógł. Dlatego programiści powinni zawsze upewnić się, że używają treści tekstowych. Jednak ważne jest również, aby znać różnice, aby móc opisywać obrazy i grafiki w znaczący sposób. Technologie wspomagające mogą następnie renderować je przy użyciu alternatyw tekstowych. Dzięki temu Internet staje się nieco bardziej dostępny dla wszystkich.