Tekst alternatywny, zwany również alt tekst, to krótki opis obrazu umieszczony w kodzie HTML strony internetowej. Jest on wykorzystywany przez czytniki ekranu do opisania zawartości obrazu osobom niewidomym lub niedowidzącym. Alt tekst pojawia się również w sytuacji, gdy obraz nie może zostać załadowany, informując użytkowników o jego treści.
Atrybut „alt”, czyli tekst alternatywny, to opisowy element stosowany w treściach internetowych, takich jak strony www, blogi i media społecznościowe. Jego zadaniem jest zastąpienie obrazu w sytuacji, gdy ten nie może się wyświetlić, na przykład z powodu wolnego połączenia internetowego.
Dlaczego tekst alternatywny jest ważny?
Zgodnie z wytycznymi WCAG 2.1, instytucje publiczne mają obowiązek zapewnienia tekstów alternatywnych dla wszelkich elementów nietekstowych. Jest to również zalecana praktyka dla osób publikujących w internecie – na przykład na Facebooku czy Twitterze, gdzie istnieją funkcje umożliwiające dodanie opisu alternatywnego do grafik. W przypadku udostępniania cudzych obrazów warto umieścić opis w nawiasie kwadratowym pod grafiką, jeśli nie mamy pewności, czy oryginalny autor zamieścił atrybut alt.
-
Dostępność (Accessibility) – Pomaga osobom z niepełnosprawnościami w odbiorze treści wizualnych.
-
SEO (Search Engine Optimization) – Wspiera optymalizację strony pod kątem wyszukiwarek internetowych, zwiększając jej widoczność.
-
Poprawa użyteczności – Ułatwia użytkownikom z wolnym połączeniem internetowym zrozumienie kontekstu obrazów.
Jak napisać skuteczny tekst alternatywny "alt"?
Tworzenie tekstu alternatywnego "alt" może wydawać się proste, jednak aby był on użyteczny, warto stosować się do kilku zasad. Oto wskazówki, które pomogą stworzyć wartościowy opis:
1. Precyzyjnie i zwięźle opisz obraz
Google zaleca, aby tekst alternatywny był „krótki, ale pełen treści”. Niektórzy specjaliści podają limit 125 znaków, ale nie jest to ścisła reguła – ważniejsze jest przekazanie najistotniejszych informacji. Unikaj niepotrzebnych szczegółów i skup się na tym, co jest kluczowe dla zrozumienia obrazu. Jeśli na zdjęciu są emocje, opisz je, aby osoby niewidome mogły lepiej wyobrazić sobie jego zawartość.
Tekst powinien jasno i zwięźle opisywać to, co znajduje się na obrazie. Warto uwzględnić kluczowe elementy, ale unikać zbędnych szczegółów.
Przykłady:
-
❌ "Obrazek przedstawia piękną scenę z natury."
-
✅ "Zachód słońca nad górskim jeziorem, otoczonym przez las."
-
❌ "Zdjęcie grupy ludzi."
-
✅ "Czterech przyjaciół śmieje się podczas pikniku w parku."
-
❌ "Na zdjęciu widać piękny zachód słońca, który odbija się w wodzie.”
-
✅ "Zachód słońca nad jeziorem, pomarańczowe niebo odbija się w spokojnej wodzie.”
2. Omiń zbędne zwroty
Nie używaj wyrażeń typu „zdjęcie przedstawia” czy „grafika pokazuje”. Czytniki ekranowe i tak informują użytkowników, że mają do czynienia z obrazem. Przejdź od razu do sedna opisu.
Alt text powinien być krótki, najlepiej do 125 znaków. Nadmiernie długie opisy mogą być uciążliwe dla użytkowników czytników ekranu.
Przykłady:
-
❌ "Na obrazku widać trzy osoby siedzące na drewnianej ławce w parku, rozmawiające i śmiejące się, a w tle widać drzewa i spacerujące osoby."
-
✅ "Trzy osoby rozmawiające na ławce w parku."
-
❌ "Duży pies rasy golden retriever bawi się na trawniku, skacząc i łapiąc piłkę."
-
✅ "Golden retriever bawi się piłką na trawie."
-
❌ "Zdjęcie przedstawia grupę ludzi na koncercie.”
-
✅ "Tłum ludzi tańczy i klaszcze podczas koncertu na świeżym powietrzu.”
3. Unikaj fraz typu „obraz przedstawia” oraz nadmiaru przymiotników i przysłówków
Czytniki ekranu automatycznie informują użytkowników, że dany element to obraz, więc nie ma potrzeby dodatkowego podkreślania tego w alt tekście.
Zbyt barwne opisy mogą rozmywać przekaz. Skup się na konkretnych informacjach, unikając zbędnych epitetów. Dynamiczne czasowniki sprawiają, że opis staje się bardziej czytelny i naturalny.
Przykłady:
-
❌ "Zdjęcie przedstawia czarnego kota siedzącego na parapecie."
-
✅ "Czarny kot siedzi na parapecie."
-
❌ "Ilustracja pokazuje osobę piszącą na laptopie."
-
✅ "Osoba pisze na laptopie przy biurku."
-
❌ „Ogromny, brązowy pies z długą sierścią dynamicznie skacze wysoko nad starannie wykonanym, drewnianym ogrodzeniem.”
-
✅ „Duży pies skacze przez drewniane ogrodzenie.”
4. Uwzględnij kontekst obrazu
Jeśli obraz pełni określoną funkcję (np. jest przyciskiem lub ikoną), tekst alternatywny powinien informować o jego przeznaczeniu.
Przykłady:
-
Przycisk koszyka w sklepie internetowym: „Dodaj do koszyka” zamiast „Ikona koszyka”.
-
Infografika przedstawiająca statystyki: „Wzrost sprzedaży o 20% w pierwszym kwartale 2024 roku.”
-
Zdjęcie zespołu w zakładce „O nas” na stronie firmowej: „Zespół ekspertów firmy XYZ w biurze.”
5. Nie stosuj alt tekstu dla dekoracyjnych obrazów
Jeśli obraz jest jedynie elementem dekoracyjnym, pozostaw atrybut alt pusty (alt=""). W ten sposób czytniki ekranu go zignorują, co poprawi komfort użytkowania.
Przykłady:
-
❌
alt="Piękna ornamentowa linia ozdobna" -
✅
alt=""
Podsumowanie
Tworzenie tekstów alternatywnych jest kluczowe dla dostępności i użyteczności treści w internecie. Dzięki kilku prostym zasadom można stworzyć skuteczne opisy, które ułatwią korzystanie z sieci osobom z niepełnosprawnością wzroku. Warto o tym pamiętać i stosować w swoich publikacjach, aby internet był bardziej przyjaznym miejscem dla wszystkich użytkowników.
Dobry tekst alternatywny:
- Jest zwięzły i konkretny.
- Opisuje kluczowe elementy obrazu.
- Uwzględnia kontekst użycia.
- Nie zawiera zbędnych informacji.
- Nie opisuje obrazów dekoracyjnych.
Tworzenie przemyślanych opisów alternatywnych nie tylko zwiększa dostępność strony, ale także wspiera jej pozycjonowanie w wyszukiwarkach i poprawia ogólne doświadczenie użytkowników.
