SEO ma kluczowe znaczenie, jeśli chcesz, aby Twoje treści mogły być łatwo znalezione w internecie. Z kolei dostępność pozwala każdemu cieszyć się tym, co stworzyłeś, bez względu na jego ograniczenia. Jeśli chodzi o dodatkowe elementy na Twojej stronie, takie jak grafiki, możesz osiągnąć oba cele dzięki tekstom alternatywnym (alt texts). Zapoznaj się z niniejszym artykułem, aby dowiedzieć się więcej na ich temat!
Czym jest alt text?
Tekst alternatywny, znany także jako alt text, alt attribute, alt description lub alt tag, opisuje zawartość lub funkcję grafiki na stronie internetowej. Alt text jest zazwyczaj zaimplementowany w kodzie HTML lub w dedykowanym polu w wybranym systemie CMS (jak WordPress). Tekst alternatywny w kodzie HTML może wyglądać w następujący sposób:
<img src="Lewandowski.jpg" alt="Znany polski piłkarz Robert Lewandowski na stadionie Camp Nou">
Jak sprawa wygląda w przypadku filmów wideo? Tekst alternatywny jest używany do opisywania grafik. Jednak aby sprawić, by Twoje wideo było bardziej dostępne, powinno ono być wyposażone w standardowe napisy (ukazujące treść filmu) i pełną transkrypcję (która oprócz dialogów opisuje wszystkie dźwięki słyszalne w wideo, jak np. klaksony samochodowe), a także audiodeskrypcję, która zawiera dodatkowe elementy, opowiadające „na głos” o wizualnych aspektach filmu osobom niedowidzącym.
Dlaczego alt texts są istotne?
Pierwszym powodem, dla którego nie należy zapominać o tekstach alternatywnych, jest SEO – wyszukiwarki potrzebują ich, aby odpowiednio pozycjonować treści wizualne w wynikach wyszukiwania. Giganci rynkowi, jak Google stale rozwijają swoje programy w zakresie technologii AI, by coraz lepiej „czytać” grafiki. Niestety, nie zawsze generują one jednak prawidłowe interpretacje! Tekst alternatywny pomaga botom lepiej zrozumieć kontekst grafiki, a nawet rozpoznać słowa kluczowe.
Po drugie, teksty alternatywne są ważne nie tylko ze względu na SEO, ale także ze względu na aspekt dostępności. Osoby z problemami wzrokowymi często korzystają z czytników ekranu, które czytają za nich na głos tekst znajdujący się na danej stronie internetowej. Jeśli grafiki zawierają teksty alternatywne, odbiorca może zrozumieć, co one przedstawiają. Są jednak również inne powody! Alt text może być wyświetlany także w sytuacji, gdy grafika nie zostanie załadowana. W takich przypadkach użytkownik zobaczy ikonę uszkodzonego obrazu, z umieszczonym obok tekstem alternatywnym.
Alt texts – najlepsze praktyki
- Opisuj wyłącznie grafiki, które przedstawiają coś istotnego – unikaj tego w sytuacjach, gdy obraz służy wyłącznie celom dekoracyjnym;
- Długość tekstu alternatywnego nie powinna przekraczać 125 znaków, ponieważ większość czytników ekranu przestaje odczytywać treść po przekroczeniu tej liczby;
- Nie zapomnij opisać wykresów, infografik i wszystkiego, czego zrozumienie może być cenne dla użytkownika;
- Unikaj stosowania takich wyrażeń jak „grafika”, czy „zdjęcie” na początku alt textu, ponieważ czytniki ekranu przeczytają je dwukrotnie. Na przykład, jeśli wpiszesz „zdjęcie czarnej sukienki”, użytkownicy czytników ekranu usłyszą „zdjęcie zdjęcie czarnej sukienki”;
- Nie zapominaj o interpunkcji i używaniu wielkich liter na początku zdań. Co więcej, nazwy plików często zawierają myślnik, np. „John-Williams.jpg”, ale nie byłoby najlepszym pomysłem używać ich zamiast spacji między słowami w tekście alternatywnym, gdyż czytnik tekstu odczyta również słowo „myślnik”;
- Warto dopasować styl swojego tekstu do utworzonego alt tagu, aby ogólny odbiór strony był bardziej spójny;
- Spróbuj użyć kilku słów kluczowych w swoim tekście alternatywnym, może to pomóc grafice zająć wyższą pozycję w wynikach wyszukiwania obrazów;
- Jeśli się spieszysz, możesz spróbować skorzystać z generatorów tekstów alternatywnych. Możesz na przykład skorzystać z bezpłatnego generatora od Ahrefs. Po przesłaniu pliku i wybraniu stylu żądanego tekstu alternatywnego wygenerowanych zostanie 5 wariantów;
- Możesz także rozważyć dodanie alt tagów do postów w mediach społecznościowych na platformach takich jak Instagram, Facebook czy LinkedIn, aby sprawić, by były bardziej przystępne dla Twoich obserwujących.
Jak dodać tekst alternatywny do grafiki?
Wiele systemów zarządzania treścią oferuje opcje dodawania i edytowania tekstu alternatywnego podczas przesyłania grafik. Jeśli chcesz dodać alt text w dokumencie HTML, poniżej znajdziesz dwa sposoby, jak zrobić to poprawnie:
- w większości przypadków tekst należy wpisać po atrybucie alt:
<img src="zdj_dziewczyna.jpg" alt="Dziewczyna w kurtce" width="500" height="600"> - aby opisać zdjęcia czysto dekoracyjne – zamiast opisu należy posłużyć się pustym atrybutem alt:
<img src="nazwa-zdjęcia-dekoracyjnego.jpg" alt="">– w ten sposób użytkownik nie przeczyta (ani nie usłyszy, w przypadku korzystania z czytnika ekranu) dziwnego tytułu, jak „zdj1456125”.
Jeśli chodzi o platformy mediów społecznościowych, niektóre z nich ułatwiają dodawanie tekstów alternatywnych do postów. Facebook posiada funkcję automatycznych alt textów, które możesz dodać lub edytować. Z kolei, aby dodać tekst alternatywny na platformie LinkedIn, należy wykonać poniższe czynności:
- kliknij „Alt.text” po przesłaniu grafiki;
- aby zakończyć, kliknij „Zapisz” (jeśli korzystasz z komputera) lub „Gotowe” (jeśli przechodzisz przez analogiczny proces na urządzeniu mobilnym).
Wszystko sprowadza się do UX
Posiadasz już całą niezbędną wiedzę na temat tekstów alternatywnych! Chociaż dodawanie ich do wszystkich grafik znajdujących się na Twojej stronie może z początku wydać się żmudne, warto to robić. Nie tylko sprawi to, że korzystanie z Twojej witryny będzie przyjemniejsze. Prawidłowe alt tagi mogą również przyczynić się do polepszenia UX Twojej witryny, co ostatecznie doprowadzi do łatwiejszego znajdywania ich w bezkresach internetu.
Przeczytaj również
Czym jest misclick i Confirmed Click?
Monetyzujesz swoje treści przy użyciu reklam? Jesteś pewien, że nie przeszkadzają one użytkownikom? Jeśli Twoje jednostki reklamowe generują przypadkowe kliknięcia, może być to irytujące dla odbiorców! Jednak czy tylko oni zauważą ten problem? Dowiedz się tutaj!
Czytaj więcej
Jak zainstalować wtyczki CAPTCHA na WordPress
Bezpieczeństwo Twojej witryny to nie przelewki! Jeśli nie wiesz, jak zainstalować reCAPTCHA na swojej stronie WordPress – trafiłeś we właściwe miejsce!
Czytaj więcej