SEO
W 1911 roku, w trakcie amerykańskiego sympozjum poświęconego dziennikarstwu i reklamie, redaktor Arthur Brisbane miał powiedzieć: „Używajcie obrazów. Każdy jest wart tysiąc słów”. Jego słowa nie poszły na marne. Sto lat później, w rzeczywistości poddanej cyfrowej transformacji, obrazy stanowią integralną część i budulec świata sieci internetowej. Ale nie wszyscy mogą cieszyć się obrazami w ich oryginalnej formie. Z myślą o nich powstają teksty alternatywne.
Alternatywa dla obraz(k)ów
Czym jest tekst alternatywny (alt tekst)? Zasadniczo jest to „tekst opisowy, który pokazuje znaczenie i kontekst elementu wizualnego w ustawieniu cyfrowym, na przykład w aplikacji lub na stronie internetowej” [Microsoft]. Innymi słowy, jest to tekstowy substytut, który zastępuje dany element graficzny w przypadku, gdy jest on dla użytkownika niedostępny. Może tak się stać, gdy na przykład przeglądarce nie udało się załadować obrazu w wyniku błędu przesyłania danych lub celowego ustawienia blokującego wyświetlanie grafik (istnieją wszak przeglądarki, które pracują tylko w trybie tekstowym, jak chociażby Lynx). Oddzielną kategorię stanowią sytuacje, w których niedostępność grafiki dla użytkownika wiąże się nie tyle z ograniczeniem lub nieprawidłowościami działania oprogramowania lub sprzętu, a ze stanem chorobowym lub ograniczeniami prawidłowego funkcjonowania organizmu człowieka (niepełnosprawność, podeszły wiek). We wszystkich tych przypadkach pojawia się bariera, która ogranicza bądź uniemożliwia odbiór treści prezentowanych na stronie, a tekst alternatywny staje się wówczas próbą ominięcia tej bariery i dostarczenia jak najpełniejszego doświadczenia osobom, które nie mają dostępu do obrazów.
Alternatywne, ale dobre
Odpowiednio przygotowane teksty alternatywne będą widoczne na ekranie w zastępstwie grafik, a ponadto – i tu uwydatnia się ich funkcja ułatwiania dostępu do treści – będą odczytywane przez programy czytające, przeznaczone dla osób niedowidzących bądź niewidomych.
Składnia atrybutu włączanego do kodu HTML jest następująca alt=”opis tego, co się znajduje na obrazku”.
Powstał już ogólny zbiór zasad – dobrych praktyk – które powinny towarzyszyć tworzeniu tekstów tego typu:
- Alternatywa, a nie suplement – tekst alternatywny ma stanowić zamiennik danego obrazka czy grafiki, nie stanowi dla nich uzupełnienia, nie jest też tytułem ani legendą, alt tekst nie powinien także powtarzać informacji zawartych w tekście głównym. (Poradniki radzą wyobrazić sobie czytanie komuś strony przez telefon. W jaki sposób można odczytać grafikę, by była zrozumiała?).
- Krótko a węzłowato – tekst alternatywny powinien zwięźle, lecz wyczerpująco opisywać zawartość grafiki, lecz nie zawsze musi to być dosłowny opis. W przypadku ostrzegawczej grafiki w postaci czerwonego koła z białym wykrzyknikiem towarzyszącej tekstowi lepiej byłoby użyć wyrażenia „Ostrzeżenie” niż opisu „Czerwone koło, wewnątrz którego znajduje się pionowa linia, a pod tą linią – biała kropka”. I odwrotnie – gdyby grafika miała towarzyszyć testowi na znajomość flag państwowych, lepszy byłby dosłowny opis elementów na obrazie.
- Kontekst, kontekst, kontekst – zawartość alt tekstu, długość opisu i sam opis są zawsze ściśle związane z kontekstem, niezbędnym do ustalenia, co jest tak naprawdę ważne w danym obrazie. Nigdy jednak nie należy poprzestawać na ogólnikach. Zamiast jednosłownych tekstów (np. „Robotnik”) warto poświęcić czas na umieszczanie bardziej wyczerpujących opisów („Pracownik na budowie w kombinezonie roboczym, trzymający w ręku młotek”).
- Obrazek to obrazek – programy czytające tekst informują użytkownika o tym, że odczytują tekst alternatywny dla grafiki, więc podanie w treści wyrazu „grafika” bądź „zdjęcie” jest zbędne, inaczej może dojść do podwójnego odczytania: „Grafika: grafika przedstawiająca…”.
Pięknie, ale bez dekoracji – niektóre elementy strony internetowej służą wyłącznie celom dekoracyjnym (ozdobne linie, punktory). W takim przypadku standardowo zaleca się użycie pustego alt tekstu (alt=””). Spowoduje to pominięcie danego elementu przez program czytający i zapobiegnie bombardowaniu użytkownika niepotrzebnymi informacjami. Jednak nie wszyscy zgadzają się z takim podejściem. Często dany element nie służy funkcji informacyjnej, a mimo to jest integralną częścią strony, przyczyniając się do budowania jej charakteru czy wytworzenia odpowiedniego nastroju. (Więcej informacji na temat wykorzystania tekstu alternatywnego do budzenia emocji znajdziesz w artykule „Więcej niż informacja – tekst alternatywny i emocje”).
Użyteczność a optymalizacja
Roboty indeksujące, niestrudzenie przemierzające sieć w poszukiwaniu nowych elementów do internetowych katalogów i wyszukiwarek, jeszcze nie rozpoznają obrazów w witrynach w adekwatnym stopniu, pozwalającym na trafne rozpoznanie treści. Rozwój technologii umożliwił już interpretowanie obrazów, ale finalny efekt może pozostawiać wiele do życzenia. „Jeśli roboty nie rozpoznają grafiki lub zinterpretują ją niepoprawnie, możliwe, że trafisz do rankingu silnika wyszukiwarki na pozycję pod niezamierzonym słowem kluczowym albo w ogóle tam nie trafisz” [Moz]. Dodanie tekstu alternatywnego ułatwia pracę robotów i włącza grafiki w obręb indeksowanych treści, co przekłada się także na pozycjonowanie strony. Dobrą praktyką jest połączenie opisu oddającego treść grafiki z najbardziej pasującym słowem kluczowym. Należy jednak zachować ostrożność, gdyż nadużywanie słów kluczowych w tekście alternatywnym nie jest dobrze widziane, np. przez Google, i może negatywnie wpłynąć na pozycję strony. Z punktu widzenia e-commerce teksty alternatywne stają się kolejnym sposobem na konkurowanie w sieci i warto je uwzględnić już na poziomie planowania sklepu czy witryny.
Obrazy są potężnym środkiem przekazywania informacji i wpływania na odbiorcę oraz narzędziem marketingowym. Nie wszyscy mają jednak do nich dostęp. Nawet najpiękniejsza grafika staje się bezwartościowa dla osoby, która nie ma możliwości jej zobaczyć. W takim wypadku znów na wartości zyskuje słowo, a odpowiednio przygotowany tekst alternatywny pozwala doświadczyć tego, co dla użytkownika pozostaje niewidoczne.
Źródła
Harvard University. (b.d.). Write good Alt Text to Describe Images. Digital Accessibility, online: https://accessibility.huit.harvard.edu/describe-content-images, dostęp: 04.04.2022.
Fundacja Widzialni. (b.d.). WCAG 2.0 – WYTYCZNA 1.1 Tekst Alternatywny – 1.1.1 Informacja Nietekstowa (a), online: https://wcag20.widzialni.org/informacja-nietekstowa,new,mg,165,169.html,56, dostęp: 04.04.2022.
Microsoft. (b.d.). Wszystko, co musisz wiedzieć, aby napisać efektywny tekst alternatywny. Microsoft Support, online: https://support.microsoft.com/pl-pl/office/wszystko-co-musisz-wiedzie%C4%87-aby-napisa%C4%87-efektywny-tekst-alternatywny-df98f884-ca3d-456c-807b-1a1fa82f5dc2, dostęp: 04.04.2022.
Alt Text. Moz. (b.d.), online: https://moz.com/learn/seo/alt-text, dostęp: 04.04.2022.
