Atrybut ALT

Atrybut ALT, zwany również tagiem ALT lub tekstem alternatywnym, to kluczowy element języka HTML odpowiedzialny za opis grafik osadzonych na stronach internetowych. Jest on umieszczany wewnątrz znacznika “img” i ma na celu dostarczenie robotom indeksującym oraz czytelnikom z niepełnosprawnościami wzroku informacji na temat zawartości danego obrazu. Właściwie zastosowany atrybut ALT pełni istotną rolę w procesie optymalizacji SEO, zwiększając szanse na lepszą widoczność grafik w wynikach wyszukiwania.

Znaczenie atrybutu ALT dla osób z niepełnosprawnościami wzroku

Jedną z kluczowych funkcji atrybutu ALT jest ułatwienie dostępu do treści internetowych osobom z poważnymi problemami ze wzrokiem lub całkowitą niewydolnością narządu wzroku. Zgodnie z danymi opublikowanymi przez portal gov.pl, w Polsce oficjalnie potwierdzonych przypadków niepełnosprawności wzrokowej jest ponad 3 miliony, jednak szacunki ekspertów wskazują, że rzeczywista liczba może sięgać nawet 7 milionów osób. Globalna perspektywa przedstawiona przez Światową Organizację Zdrowia (WHO) jest równie alarmująca – ponad 2,2 miliarda ludzi na świecie cierpi na różnego rodzaju zaburzenia widzenia.

Dla tej grupy użytkowników Internetu, programy odczytu treści na głos oraz czytniki ekranu stanowią niezbędne narzędzia umożliwiające przeglądanie zasobów sieci. Właśnie tutaj atrybut ALT odgrywa kluczową rolę, ponieważ oprogramowanie to wykorzystuje zawarte w nim opisy do odczytywania na głos informacji o grafikach, które są niedostępne dla osób niewidomych lub niedowidzących. Dzięki temu uzyskują oni pełniejszy obraz treści zamieszczonych na stronie, a ich doświadczenie użytkowania Internetu staje się bardziej kompletne.

Atrybut ALT a roboty indeksujące

Kolejnym istotnym aspektem atrybutu ALT jest jego znaczenie dla robotów indeksujących, które odwiedzają strony internetowe w celu właściwego zindeksowania ich zawartości. W przypadku elementów HTML “img” oraz innych zagnieżdżonych w nich elementów, takich jak “picture”, semantyczne znaczniki są wykorzystywane przez roboty, zwłaszcza te należące do wyszukiwarki Google, aby poprawnie zidentyfikować i zindeksować obrazy.

Roboty indeksujące nie są w stanie interpretować grafik osadzonych bezpośrednio w arkuszach stylów CSS, dlatego ważne jest, aby obrazy były zawarte w elemencie HTML "img". Właściwa optymalizacja atrybutu ALT pozwala robotom lepiej zrozumieć zawartość obrazu i dostarcza im dodatkowych informacji, co przekłada się na lepsze dopasowanie grafiki do wyników wyszukiwania.

Zastosowanie atrybutu ALT na stronie WWW

Atrybut ALT jest częścią kodu HTML i powinien być stosowany przy każdym osadzeniu elementu graficznego na stronie. Jego prawidłowa struktura wygląda następująco:

img src="adres_grafiki.jpg" alt="Tu znajdzie się tekst opisujący obrazek"

Brak atrybutu ALT utrudni wyszukiwarce skuteczną interpretację i indeksowanie grafiki, co może negatywnie wpłynąć na jej widoczność w wynikach wyszukiwania. Poniższy przykład ilustruje sytuację, w której atrybut ALT pozostaje pusty:

img src="adres_grafiki.jpg" alt=""

Aby zapewnić optymalne wykorzystanie atrybutu ALT, należy pamiętać o kilku kluczowych zasadach:

1. Atrybut ALT powinien zawierać główne słowo kluczowe związane z treścią grafiki, co ułatwi jej identyfikację przez potencjalnych klientów w wyszukiwarce Google.
2. Nie należy dodawać w tym miejscu wielu fraz kluczowych oddzielonych przecinkami, ponieważ może to zostać odebrane jako spam i przynieść efekt odwrotny do zamierzonego.
3. W tekście alternatywnym można używać polskich znaków oraz dostarczać szczegółowy opis obrazka, aby umożliwić czytelnikom zrozumienie jego treści.
4. W przypadku podpisywania grafik i umieszczania ich na serwerze, wymagane jest opisywanie plików graficznych bez polskich znaków.
5. Zaleca się tworzenie unikalnych i opisowych atrybutów ALT dla każdego obrazka na stronie, które adekwatnie opisują jego zawartość.

Zasady tworzenia poprawnych atrybutów ALT

Aby zapewnić prawidłową optymalizację atrybutu ALT, warto przestrzegać następujących zasad:

1. Zachowaj zwięzłość i treściwość opisu, unikając ogólnych sformułowań, ale dostarczając jak najwięcej istotnych szczegółów.
2. Opis powinien być krótki, zawierając się w kilku słowach, bez pełnych zdań.
3. Stosuj umiar w liczbie dodawanych słów kluczowych.
4. Fraza kluczowa tekstu alternatywnego powinna być zgodna z treścią wyświetlaną na stronie wraz z danym obrazem.
5. Główną frazę kluczową należy umieszczać na początku opisu, zachowując jednak naturalność i czytelność.
6. Każdy obraz zamieszczony na stronie powinien posiadać unikalny tekst alternatywny.
7. Zwróć szczególną uwagę na tekst alternatywny w witrynach, gdzie znajduje się mało tekstu.
8. W atrybutach ALT dopuszcza się korzystanie z polskich znaków diakrytycznych.
9. Pamiętaj, że grafiki, do których tworzysz opis ALT, powinny być zoptymalizowane do odpowiednich rozmiarów, aby nie spowalniały ładowania się strony.

Optymalna struktura atrybutu ALT

Atrybut ALT powinien składać się ze słowa kluczowego, które nawiązuje do nagłówka artykułu i tekstu alternatywnego. Optymalna długość atrybutu powinna liczyć od 80 do 110 znaków ze spacjami. Pisanie dłuższych tekstów może spowodować, że czytniki dla osób niepełnosprawnych będą skracać treść, dlatego warto trzymać się tej rekomendowanej długości, aby zapewnić czytelność. Jeśli treść nie będzie wnosiła nic pożytecznego, warto popracować nad jej formą i umieścić wartościowe informacje, które przyciągną uwagę czytelnika.

Przykłady poprawnych atrybutów ALT

Tworząc tekst alternatywny, należy używać prostego języka i trzymać się tematyki zdjęcia, czyli opisywać tylko i wyłącznie to, co jest widoczne na grafice. Atrybut ALT powinien być nieskomplikowany, a przede wszystkim zrozumiały dla odbiorcy. Oto kilka przykładów poprawnego stosowania atrybutu ALT:

1. Zamiast: "Usmiechnieta-kobieta-w-pokoju", użyj sformułowania: "Uśmiechnięta kobieta w pokoju".
2. Zamiast: "Duże miasto, zachód słońca, korki, światło lamp", napisz: "Zakorkowane miasto na tle zachodzącego słońca".
3. Zamiast: "Znajdujący się po lewej stronie czarny pies i rudy kot po prawej stronie, próbują się bawić na zielonej łące pełnej żółtych kwiatów", sformułuj tekst alternatywny: "Czarny pies i rudy kot bawią się na łące pełnej kwiatów".
4. Skupiaj się na tym, co faktycznie jest widoczne na grafice, np. "Nowoczesny biurowiec dla urzędników".
5. Zmieniaj nazwę plików zgranych z aparatu fotograficznego lub smartfona, np. z "IMG_012345.jpg" na coś bardziej opisowego, jak "prezydent-miasta-rzeszow", a następnie sformułuj odpowiedni tekst alternatywny: "Prezydent Miasta Rzeszów rozpoczyna konferencję i mówi do mikrofonu".

Wpływ atrybutu ALT na pozycjonowanie stron WWW

Choć nie ma oficjalnych stwierdzeń developerów z Google, że atrybut ALT bezpośrednio wpływa na pozycjonowanie stron, to bez wątpienia podnosi on pozytywne doświadczenia użytkowników, co jest jednym z kluczowych czynników branych pod uwagę przez algorytmy wyszukiwarek. 

Właściwie zoptymalizowane atrybuty ALT ułatwiają robotom indeksującym identyfikację i zrozumienie zawartości grafik, co przekłada się na lepsze dopasowanie ich do wyników wyszukiwania. W efekcie, strony z prawidłowo zaimplementowanymi atrybutami ALT mają większe szanse na wyższe pozycje w wynikach wyszukiwania, a co za tym idzie – na pozyskanie większego ruchu organicznego.

Kiedy tekst alternatywny jest widoczny?

W większości przypadków atrybut ALT pozostaje niewidoczny dla użytkowników odwiedzających stronę internetową. Istnieją jednak sytuacje, w których tekst alternatywny staje się widoczny:

1. Gdy zawartość witryny nie może zostać poprawnie załadowana, np. z powodu błędu po stronie użytkownika, tekst alternatywny zastępuje niewyświetloną grafikę, umożliwiając zrozumienie, co powinno się na niej znajdować.
2. Osoby korzystające z programów dla osób niedowidzących, takich jak czytniki ekranu, będą miały wyświetlany atrybut ALT, aby uzyskać informacje o zawartości grafiki.

Z tych powodów ważne jest, aby teksty alternatywne były ciekawe, precyzyjne i dokładnie opisywały zawartość obrazka.

Kiedy atrybut ALT nie jest potrzebny?

Istnieją sytuacje, w których atrybut ALT nie jest wymagany lub nie powinien być stosowany. Przykładem jest umieszczenie obrazu bezpośrednio w arkuszach stylów CSS, ponieważ roboty indeksujące nie są w stanie zinterpretować grafik osadzonych w ten sposób.

Ponadto, jeśli grafika pełni jedynie rolę stricte dekoracyjną i nie jest istotna w kontekście struktury witryny oraz nie będzie wpływać na wyświetlanie się w wynikach wyszukiwania, dodawanie atrybutu ALT może nie być konieczne.

Według specyfikacji HTML, zamieszczonej na stronie w3schools.com, atrybut ALT jest wymagany dla znacznika "img". Dlatego atrybut ALT może znaleźć swoje zastosowanie w następujących elementach na stronie:

1. Wpisach blogowych
2. Logach, banerach reklamowych i ilustracjach na stronie głównej
3. Grafikach w treści artykułów
4. Zdjęciach produktowych w sklepie internetowym
5. Linkach osadzonych w grafice
6. Przyciskach CTA
7. Mapach i wykresach
8. Menu nawigacyjnym
9. Galerii zdjęć

Atrybut ALT w sklepach internetowych

Sklepy internetowe często zawierają dużą liczbę podstron i grafik, dlatego nie można zapomnieć o dodaniu do zdjęć atrybutów ALT. Platformy dostarczające oprogramowanie dla sklepów online, takie jak Shoplo czy Shoper, są wyposażone w mechanizmy pozwalające na automatyczne uzupełnianie tekstów alternatywnych. Dzięki takiemu rozwiązaniu można zoptymalizować grafiki w stosunkowo krótkim czasie.

Dodanie znacznika ALT jest szczególnie ważne dla właścicieli sklepów oferujących odzież, kosmetyki czy dekoracje, ponieważ konsumenci często wyszukują te produkty po ich określonych cechach. Jest to również istotne, gdy chcemy, aby zdjęcia naszych produktów były prawidłowo wyświetlane w Google Grafika, co może przyczynić się do wygenerowania dodatkowego ruchu na stronie i zwiększenia konwersji.

Atrybut ALT na Facebooku i Instagramie

Facebook i Instagram, jako jedne z najpopularniejszych portali społecznościowych na świecie, wprowadzają coraz więcej udogodnień dla osób z niepełnosprawnościami. W 2016 roku Facebook wprowadził funkcję automatycznego dodawania tekstów alternatywnych do grafik, znaną jako Automatic Alternative Text (AAT).

Jak to działa? Podczas ładowania zawartości witryny, sztuczna inteligencja rozpoznaje, co znajduje się na zdjęciu. Jeśli na pliku graficznym znajduje się napis, to zostanie on automatycznie dopisany do tekstu alternatywnego. Użytkownicy mogą skorzystać z podpowiedzi systemu lub samodzielnie uzupełnić pole niestandardowym atrybutem ALT. Jeśli to miejsce pozostanie puste, zdjęcie zamieszczone na stronie nie będzie identyfikowane.

Opcja AAT działa także na Instagramie i potrafi rozpoznać ponad 1200 detali zamieszczonych na zdjęciu. Warto w tym miejscu wspomnieć, że narzędzie to zostało stworzone przez niewidomego inżyniera Matta Kinga, który od urodzenia zmaga się z barwnikowym zwyrodnieniem siatkówki.