Jak pisać tekst alternatywny do zdjęć na stronie internetowej

Dostępność cyfrowaJak pisać tekst alternatywny do zdjęć na stronie internetowej

Tekst alternatywny, często nazywany ALT-em, to krótki opis obrazu zapisany w kodzie strony lub w polu edycji obrazu w WordPressie. Dla wielu użytkowników jest niewidoczny, ale dla osób korzystających z czytników ekranu może być jedyną informacją o tym, co przedstawia zdjęcie, grafika, plakat, wykres albo ikona. ALT pomaga także wtedy, gdy obraz się nie załaduje. Dobrze napisany opis nie jest ozdobą techniczną. Jest częścią treści strony.

Najważniejsze pytanie brzmi: po co ten obraz jest w tym miejscu? Ten sam kadr może wymagać innego opisu w zależności od kontekstu. Zdjęcie Bartłomieja Wilka z aparatem podczas konferencji na stronie o fotografii eventowej może opisywać pracę fotografa przy wydarzeniu. To samo zdjęcie w krótkiej notce biograficznej może po prostu przedstawiać autora marki Bearded Wolf. Tekst alternatywny nie powinien opisywać wszystkiego, co widać, tylko przekazywać sens obrazu dla tej konkretnej treści.

Nie każdy obraz potrzebuje rozbudowanego ALT-u. Jeśli grafika jest czysto dekoracyjna, może mieć pusty tekst alternatywny. Pusty ALT nie oznacza zaniedbania, jeśli został użyty świadomie. Dzięki niemu czytnik ekranu pomija obraz i nie przerywa użytkownikowi lektury. Dekoracyjne tło, ozdobna linia, abstrakcyjna fotografia nie wnosząca informacji albo ikona powtarzająca tekst obok nie muszą być odczytywane. Problem pojawia się wtedy, gdy pusty ALT dostaje obraz, który niesie istotną treść.

Najgorsze opisy to „zdjęcie”, „grafika”, „obrazek” albo nazwa pliku w rodzaju „IMG_4821”. Czytnik ekranu i tak informuje użytkownika, że ma do czynienia z obrazem, więc słowo „zdjęcie” zwykle nic nie dodaje. Zamiast „zdjęcie sali” lepiej napisać „sala warsztatowa z ustawionymi stołami i materiałami dla uczestników”. Zamiast „grafika wydarzenia” lepiej zadbać, żeby najważniejsze informacje z plakatu były w treści strony, a sam ALT krótko opisywał funkcję obrazu.

Przy zdjęciach ludzi warto unikać zarówno przesadnej szczegółowości, jak i pustych ogólników. Jeśli fotografia przedstawia zespół firmy, dobry ALT może brzmieć: „Zespół pracowni przy stole podczas rozmowy projektowej”. Jeśli zdjęcie jest portretem właściciela, wystarczy: „Bartłomiej Wilk, twórca marki Bearded Wolf”. Jeśli kontekst jest ważny, można go dodać: „Fotograf podczas dokumentowania panelu dyskusyjnego w sali konferencyjnej”. Nie trzeba opisywać koloru koszuli, fryzury i każdego elementu tła, jeśli nie mają znaczenia.

Przy zdjęciach miejsc ALT powinien pomagać zrozumieć przestrzeń. Instytucja kultury może pokazać wejście do budynku, salę widowiskową, pracownię ceramiczną, bibliotekę, ekspozycję albo przestrzeń warsztatową. Opis powinien odpowiadać funkcji zdjęcia: „Wejście główne do domu kultury z podjazdem po lewej stronie” jest bardziej użyteczne niż „budynek domu kultury”, jeśli tekst dotyczy dostępności. „Sala koncertowa z widownią i sceną” wystarczy, jeśli obraz ilustruje miejsce wydarzeń.

Przy produktach opis powinien mówić, co użytkownik widzi i co może mieć znaczenie przy decyzji. „Drewniany stół z jasnego dębu z widocznym zaokrąglonym blatem” jest konkretniejszy niż „produkt”. Jeśli zdjęcie pokazuje wariant kolorystyczny, rozmiar, fakturę albo sposób użycia, warto to uwzględnić. Sklep, pracownia lub firma usługowa nie powinny traktować ALT-u wyłącznie jako miejsca na frazy SEO. Użytkownik korzystający z czytnika ekranu też chce wiedzieć, czym różni się jeden produkt od drugiego.

Wykresy i infografiki wymagają szczególnej uwagi. Krótki ALT może nazwać obraz, ale dane powinny być dostępne w treści lub w dłuższym opisie. Jeśli wykres pokazuje wzrost liczby uczestników wydarzeń, opis „wykres słupkowy” nic nie daje. Lepiej napisać w tekście obok, jakie są najważniejsze wartości i wnioski. ALT może wtedy brzmieć: „Wykres pokazujący wzrost liczby uczestników wydarzeń w latach 2022-2025”. Przy bardziej złożonych danych sam ALT nie wystarczy.

Plakaty to jeden z najczęstszych problemów na stronach instytucji. Plakat zawiera datę, godzinę, tytuł, miejsce, organizatora, czasem cenę biletu i logotypy partnerów. Jeśli zostanie dodany jako obraz bez tekstowego odpowiednika, część użytkowników nie otrzyma podstawowych informacji. Najlepsza praktyka jest prosta: wszystkie ważne informacje z plakatu powinny być przepisane w treści wydarzenia. ALT plakatu może być krótki, na przykład „Plakat koncertu zespołu w domu kultury”, bo szczegóły są dostępne obok. Jeśli szczegółów nie ma w treści, ALT musiałby być bardzo długi, a to nadal nie rozwiązuje problemu tak dobrze jak normalny tekst.

Zdjęcia eventowe opisuje się inaczej niż zdjęcia produktowe. Reportaż z wydarzenia ma pokazać atmosferę, uczestników, scenę, działanie. Nie każde zdjęcie w galerii musi mieć rozbudowany opis, ale obrazy użyte w treści relacji powinny mieć sensowne ALT-y. „Uczestnicy warsztatów fotograficznych pracujący w małych grupach” mówi więcej niż „warsztaty”. „Prelegentka podczas wystąpienia na konferencji o dostępności cyfrowej” daje kontekst. Jeśli galeria jest duża, warto zadbać przynajmniej o opisy najważniejszych zdjęć i nie publikować jej jako jedynego źródła informacji o wydarzeniu.

ALT nie jest miejscem na upychanie SEO. Opis „fotografia eventowa Jasło fotograf eventowy Podkarpacie zdjęcia firmowe” nie pomaga użytkownikowi i wygląda sztucznie. Wyszukiwarki także coraz lepiej rozpoznają nienaturalne opisy. Dobry ALT może wspierać SEO, bo jasno nazywa obraz i temat, ale robi to przy okazji, nie kosztem sensu. Jeśli zdjęcie przedstawia reportaż z konferencji w Jaśle, można to napisać normalnie: „Uczestnicy konferencji firmowej w Jaśle podczas panelu dyskusyjnego”.

Zbyt długie opisy też są problemem. ALT powinien być zwięzły. Jeśli obraz wymaga długiego wyjaśnienia, lepiej umieścić je w treści strony, podpisie, tabeli danych albo osobnym opisie. Czytnik ekranu odczytuje ALT w miejscu, w którym pojawia się obraz. Bardzo długi tekst alternatywny może przerywać lekturę i męczyć użytkownika. Warto pisać konkretnie, bez literackiego opisu światła, kolorów i nastroju, chyba że te elementy są ważne dla treści.

Brak kontekstu to błąd mniej oczywisty. Opis „mężczyzna przy komputerze” może być prawdziwy, ale mało przydatny. Jeśli tekst dotyczy pracy nad stroną WordPress, lepsze będzie „projektowanie układu strony WordPress na ekranie laptopa”. Jeśli artykuł dotyczy audytu WCAG, opis może brzmieć „sprawdzanie strony internetowej przy użyciu klawiatury”. Kontekst pozwala użytkownikowi zrozumieć, dlaczego obraz jest w tym miejscu.

W WordPressie pole tekstu alternatywnego znajduje się w bibliotece mediów i przy dodawaniu obrazu do treści. Redaktor powinien uzupełniać je przy obrazach informacyjnych od razu, a nie odkładać na później. Warto też pamiętać, że ten sam obraz może być użyty w różnych miejscach. Jeśli ALT zapisany globalnie nie pasuje do nowego kontekstu, można rozważyć inny obraz albo sposób publikacji. Najlepiej, gdy redaktor myśli o ALT-cie w momencie wyboru zdjęcia: po co je dodaję i co ma przekazać?

Z perspektywy użytkownika tekst alternatywny daje dostęp do informacji, której inaczej mógłby nie otrzymać. Z perspektywy redaktora pomaga uporządkować funkcję obrazów. Jeśli trudno napisać ALT, może się okazać, że zdjęcie jest przypadkowe i nie wnosi wiele do strony. Z perspektywy właściciela strony poprawne opisy wspierają dostępność, SEO i profesjonalne prowadzenie treści.

W Bearded Wolf teksty alternatywne są naturalnym punktem styku fotografii, WordPressa, SEO i WCAG. Zdjęcie może być świetne wizualnie, ale dopiero dobrze osadzone w treści staje się częścią dostępnej komunikacji. Dotyczy to zdjęć firmowych, reportaży eventowych, realizacji i materiałów instytucji kultury.

Dobrym ćwiczeniem jest przejrzenie kilku najważniejszych podstron i sprawdzenie obrazów po kolei. Które są dekoracyjne? Które niosą informację? Czy plakaty mają tekstowe odpowiedniki? Czy produkty są opisane konkretnie? Czy zdjęcia ludzi i miejsc mają kontekst? Po takim przeglądzie łatwiej wypracować własny standard. Tekst alternatywny nie musi być idealny literacko. Ma być uczciwy, krótki i użyteczny.