Co to jest atrybut ALT

Atrybut ALT (ang. alternative text) czyli tekst alternatywny, to opis obrazów publikowanych na stronach internetowych. Innymi słowy to tekstowy opis zawartości obrazka. Jego zadaniem jest dostarczenie informacji o tym, co zawiera tagowany obraz z przeznaczeniem dla robotów indeksujących oraz osób korzystających z czytników ekranowych, które są powszechnie stosowane przez osoby niedowidzące lub niewidome. Atrybut „alt” umożliwia poprawne zrozumienie kontekstu obrazu, nawet gdy sam obraz nie może być wyświetlony, na przykład ze względu na problemy z ładowaniem strony lub wyłączone ładowanie obrazów. O czym jeszcze powinniście wiedzieć o tym ważnym atrybucie?

Szacowany czas czytania: 7 minut

O czym piszemy dalej?

1. Za co odpowiada atrybut ALT?
2. Jak dodać atrybut ALT?
3. Jaka powinna być treść atrybutu alternatywnego?
4. Jak sprawdzić atrybut ALT?

Za co odpowiada atrybut ALT?

Atrybut „alt” pełni istotną rolę w dostarczaniu tekstowego opisu dla obrazów na stronach www. Jest to informacja alternatywna, którą interpretują przeglądarki czytników ekranowych. W ten sposób umożliwiają użytkownikom niewidomym lub niedowidzącym zrozumienie zawartości obrazu. Przykładowo, gdy przeglądarka nie może wczytać obrazu lub gdy użytkownik korzysta z technologii wspomagających, takich jak czytniki ekranowe, to tekst zawarty w atrybucie „alt” odczytuje się jako zastępcza reprezentacja treści wizualnej. Dzięki temu osoby korzystające z tych narzędzi mogą skorzystać z pełnej funkcjonalności strony internetowej. Natomiast właściciele i twórcy witryn mogą zadbać o zgodność z zasadami dostępności.

Natomiast w kontekście SEO, atrybut ALT również odgrywa istotną rolę. Wpływa na indeksowanie treści przez wyszukiwarki internetowe. Poprawnie zdefiniowany tekst w atrybucie „alt” pomaga wyszukiwarkom zrozumieć tematykę i treść obrazów. To może wpłynąć pozytywnie na pozycję strony w wynikach wyszukiwania. Dlatego dbając o precyzyjne i opisowe wartości w atrybucie „alt”, twórcy witryn nie tylko spełniają normy dostępności, ale także korzystają z korzyści związanych z lepszym zrozumieniem treści przez maszyny wyszukiwawcze. To zaś przyczynia się do efektywniejszej widoczności strony w wynikach wyszukiwania.

Jak dodać atrybut ALT?

Aby dodać atrybut ALT do obrazka w kodzie, można skorzystać z kilku różnych metod. Najczęściej stosowane są dwie z nich: bezpośrednio w tagu <img> oraz za pomocą elementu <figure> i <figcaption>. Można również zastosować metodę tagowania samego obrazu, przed dodaniem go do strony www. Zatem:

Dodanie tagu w znaczniku <img>.

Atrybut „alt” umieszcza się bezpośrednio w tagu <img> i dostarcza tekstowy opis obrazu. Przykładowo fragment kodu z zastosowaniem tego atrybutu mógłby wyglądać tak:

<img src="nazwa_obrazu.jpg" alt="Dowolny opis obrazu"/>

W tym przypadku tekst „Dowolny opis obrazu” jest właśnie tekstem alternatywnym. Właśnie ten tekst wyświetli się, gdy obraz nie będzie mógł być załadowany. Dodatkowo tekst ten posłuży jako opis dla użytkowników korzystających z czytników ekranowych. Jednocześnie roboty indeksujące szybciej będą mogły „zapamiętać” treść obrazka.

Dodanie tagu za pomocą elementu <figure> i <figcaption>.

Alternatywnie, można skorzystać z elementów <figure> i <figcaption>. To umożliwia dodanie dodatkowej semantyki do struktury HTML. Na przykład jak poniżej:

<figure>
  <img src="nazwa_obrazu.jpg" alt="Dowolny opis obrazu"/>
  <figcaption>Dowolny opis obrazu</figcaption>
</figure>

Element <figcaption> zawiera opis obrazu, a całość jest otoczona elementem <figure>. Takie rozwiązanie może być przydatne zwłaszcza w przypadku, gdy obraz wymaga dodatkowego kontekstu lub opisu. Czasami warto zastosować to rozwiązanie.

W obu powyższych przypadkach kluczowe jest dostarczenie zwięzłego, opisowego tekstu. Powinien precyzyjnie opisywać zawartość obrazu. Dbałość o poprawność i adekwatność tekstu „alt” wpływa zarówno na dostępność witryny dla użytkowników z niepełnosprawnościami, jak i na optymalizację treści dla wyszukiwarek internetowych.

Dodanie tagu w systemie WordPress.

W CMS WordPress tagowanie obrazków jest bardzo proste. Wystarczy wejść w edycję wpisu lub strony, gdzie znajduje się obraz. Kliknąć w celu zaznaczenia obrazu. Z prawej strony w narzędziach ustawień bloku wyświetlą się nam parametry obrazka. Znajdźmy sekcję „Tekst alternatywny”. W polu edycji możemy wpisać odpowiednią treść opisu obrazka. Na koniec wystarczy zapisać dokonane zmiany. W kodzie strony pojawi się atrybut „alt” obrazka.

Jaka powinna być treść atrybutu alternatywnego?

Treść atrybutu alternatywnego ALT obrazka powinna być zwięzłym opisem tego, co obrazek przedstawia. Co oznacza „zwięzły”? To taki jednozdaniowy, konkretny opis, bez zbędnych dodatków. Poniżej kilka istotnych wskazówek jak poprawnie tworzyć atrybuty obrazków:

• Opisz treść obrazka. Atrybut „alt” powinien zawierać opis samej treści obrazu, skoncentrowany na informacji istotnej dla zrozumienia kontekstu wizualnego.
• Tekst w atrybucie „alt” powinien być unikatowy dla każdego obrazu i jednoznacznie opisywać to, co przedstawia obraz.
• Unikaj używania o znaczeniu ogólnym, typu „zdjęcie” czy „grafika”, chyba że nie jest to możliwe do jednoznacznego opisania zawartości obrazu.
• Zachowaj zwięzłość – opis w atrybucie „alt” powinien być krótki, ale jednocześnie dostarczać wystarczających informacji.
• Nie powtarzaj w tekście „alt” informacji, które są już dostępne w treści otaczającej obraz, aby uniknąć nadmiernego powtarzania.
• Unikaj zbędnych skrótów czy języka technicznego, chyba że są one powszechnie zrozumiałe przez większość odbiorców.
• Dostosuj tekst „alt” do kontekstu strony, zapewniając spójność z tematem i celem witryny.
• W przypadku, gdy obraz jest jedynie elementem dekoracyjnym i nie przenosi istotnej informacji, użyj pustego atrybutu „alt” (alt=””). Jest to lepsze rozwiązanie niż całkowite pominięcie umieszczenia atrybutu.
• W przypadku bardziej skomplikowanych obrazów, rozważ użycie dłuższego opisu w atrybucie ALT, ale nadal staraj się utrzymać klarowność i zwięzłość.
• Przetestuj witrynę pod kątem dostępności, korzystając z czytników ekranowych, aby upewnić się, że atrybuty „alt” poprawnie opisują zawartość obrazów.

Zachowanie przejrzystości atrybutów obrazków i poprawność ich stosowania pomaga nie tylko w spełnieniu standardów dostępności, ale także korzystnie wpływa na indeksację całej treści przez wyszukiwarki. Atrybut ALT bardzo często jest pomijany podczas procesu tworzenia strony www, dlatego warto zwrócić szczególną uwagę na jego zastosowanie podczas odbioru zrobionej strony. Zachęcamy również do zapoznania się ze sposobami optymalizacji obrazków pod SEO.

Jak sprawdzić atrybut ALT?

Sprawdzanie poprawności atrybutów „alt” obrazków na stronie internetowej można przeprowadzić na różne sposoby, zarówno manualnie, jak i za pomocą narzędzi dostępnych online. Oto kilka metod:

Metoda ręczna: przeglądanie kodu HTML:

• Otwórz stronę internetową w dowolnej przeglądarce.
• Kliknij prawym przyciskiem myszy na obrazie i wybierz opcję „Zbadaj element” lub „Zbadaj”.
• W okienku z wyświetlonym kodem znajdź tag <img> i sprawdź, czy zawiera atrybut „alt” oraz, czy jego wartość jest adekwatna i opisuje treść obrazu.
• Można również w przeglądarce wyłączyć ładowanie obrazów. Wówczas strona wyświetli się z treścią zawierającą opisy obrazków. Jeśli wyświetlony tekst jest zrozumiały, to oznacza, że atrybuty obrazków są prawidłowo dodane.

Sposób półautomatyczny: Narzędzia przeglądarki.

• W wielu nowoczesnych przeglądarkach istnieją narzędzia do analizy dostępności. Przeważnie można je znaleźć w zakładce „Narzędzia dla deweloperów” lub o podobnej nazwie.
• Skorzystaj z funkcji „Audit” lub „Accessibility” w narzędziach dla deweloperów, aby sprawdzić zgodność strony z normami dostępności, w tym poprawność atrybutów „alt”.

Metoda automatyczna: Narzędzia online.

• Istnieją narzędzia online, które automatycznie analizują witrynę pod kątem dostępności. Przykłady to np. Google Lighthouse czy WAVE.
• Wprowadź adres URL strony do narzędzia, a następnie sprawdź raport dotyczący dostępności, w którym powinny być uwzględnione informacje o atrybutach „alt” obrazków.

Czy artykuł był pomocny? Wystaw ocenę.