Alt text — skrót od alternative text (tekst alternatywny) — to opis tekstowy dostarczany przez atrybut alt obrazu w HTML.
Alt text — skrót od alternative text (tekst alternatywny) — to opis tekstowy dostarczany przez atrybut alt obrazu w HTML. Przekazuje cel i istotne informacje o obrazie, gdy nie można go zobaczyć.
Czytniki ekranu odczytują alt text na głos dla użytkowników niewidomych lub słabowidzących. Przeglądarki wyświetlają alt text zamiast obrazu, jeśli plik graficzny nie może zostać załadowany. Wyszukiwarki czytają alt text, aby zrozumieć, co przedstawia obraz i jaki ma związek z otaczającą treścią strony.
Atrybut alt jest częścią specyfikacji HTML od wersji HTML 2.0 (1995). Z czasem zmieniały się nie jego techniczne funkcje, ale standardy jakości — współczesne wytyczne dotyczące dostępności, takie jak WCAG 2.2 i Section 508, wymagają alt textu, który przekazuje znaczenie, a nie tylko etykietę.
Znacznik obrazu z alt textem ma następującą strukturę:
<img src="golden-retriever-beach.jpg" alt="Golden retriever biegnący po piaszczystej plaży o zachodzie słońca">
src wskazuje lokalizację pliku obrazu. Atrybut alt zawiera opis tekstowy.Nie — choć terminy te są często używane zamiennie w codziennych rozmowach. „Alt tag" to kolokwializm. Prawidłowym terminem technicznym jest atrybut alt, ponieważ alt jest atrybutem elementu <img>, a nie samodzielnym znacznikiem HTML. W praktyce „alt text", „atrybut alt" i „tekst alternatywny" odnoszą się do tego samego pojęcia.
Skonfiguruj zaawansowane śledzenie w kilka minut. Karta kredytowa nie jest wymagana.
Alt text służy trzem różnym grupom odbiorców, z których każda ma inne potrzeby.
Wiele osób korzysta z czytników ekranu — oprogramowania, które przekształca treść z ekranu na mowę lub brajla.
Nie jest to opcjonalne udogodnienie — to wymóg funkcjonalny zgodny z Web Content Accessibility Guidelines (WCAG) 2.2, a konkretnie z kryterium sukcesu 1.1.1 (Treść nietekstowa).
Użytkownicy czytników ekranu polegają na alt tekście, aby nawigować po stronach produktów, rozumieć infografiki, identyfikować przyciski i w pełni pojmować znaczenie strony. Brak lub źle napisany alt text wyklucza tych użytkowników z uczestnictwa w treści.
Obrazy się psują. Wolne połączenie, błąd serwera, usunięty plik, klient poczty blokujący obrazy domyślnie — to wszystko częste sytuacje. Gdy obraz się nie ładuje, a alt text nie jest obecny, użytkownicy widzą albo nic, albo enigmatyczną nazwę pliku.
Alt text zapewnia zastępczy komunikat, który zachowuje znaczenie. W marketingu e-mailowym — gdzie blokowanie obrazów jest powszechne — alt text często decyduje o tym, czy odbiorca w ogóle zrozumie wiadomość. Dla marketerów afiliacyjnych wysyłających e-maile promocyjne, alt text na obrazach produktów może być różnicą między kliknięciem a usunięciem.
Wyszukiwarki używają alt textu wraz z nazwami plików, otaczającą treścią i strukturą strony do indeksowania obrazów. Dokumentacja Google potwierdza, że alt text pomaga wyszukiwarce zrozumieć, co przedstawia obraz i jaki ma związek z tematem strony.
Obrazy z opisowym, dokładnym alt textem mają większe szanse pojawić się w wynikach Google Image Search — kanale, który generuje ruch niezależnie od standardowego wyszukiwania internetowego. Dla witryn e-commerce i afiliacyjnych wyszukiwanie obrazów może być znaczącym źródłem ruchu, gdy obrazy produktów mają odpowiedni alt text.
Tak — z pewnym zastrzeżeniem. Systemy AI coraz częściej wykorzystują komputerowe rozpoznawanie obrazów do bezpośredniej analizy grafik. Jednak gdy model AI przetwarza stronę głównie poprzez jej tekst i HTML (jak robią to roboty wyszukiwarek i niektóre narzędzia do indeksowania treści), alt text dostarcza jawny, autorski sygnał o tym, co obraz oznacza w kontekście. Jest to szczególnie istotne, gdy funkcje wyszukiwania oparte na AI — takie jak AI Overviews Google — syntezują treść strony, aby odpowiedzieć na pytania użytkowników.
Decyzja o napisaniu alt textu zależy od celu obrazu. Inicjatywa W3C Web Accessibility Initiative kategoryzuje obrazy na kilka typów, z których każdy ma inne wymagania dotyczące alt textu.
Obrazy przekazujące informacje istotne dla strony wymagają opisowego alt textu. Zadaj pytanie: Gdyby ten obraz zniknął, czy czytelnik straciłby istotną treść? Jeśli tak, napisz alt text, który przekazuje informacje dostarczane przez obraz.
Obrazy funkcyjne inicjują działania — pojawiają się wewnątrz przycisków, linków lub innych elementów interaktywnych. Ich alt text powinien opisywać działanie, a nie sam obraz.
Przykład: Ikona lupy wewnątrz przycisku wyszukiwania potrzebuje alt="Szukaj", a nie alt="Ikona lupy".
W przypadku obrazów funkcyjnych użytkownik musi wiedzieć, co się stanie po kliknięciu — a nie jak wygląda ikona.
Jeśli to możliwe, tekst powinien być rzeczywistym tekstem HTML, a nie osadzonym w obrazie. Gdy obrazy z tekstem są nieuniknione (banery, grafiki promocyjne, niektóre szablony mediów społecznościowych), alt text powinien odtwarzać dokładny tekst widoczny na obrazie.
Przykład: Baner promocyjny z napisem „20% zniżki na wszystkie plany — użyj kodu SUMMER20" powinien mieć alt text zawierający te same słowa.
Bądź pierwszym, który dowie się o nowych funkcjach i aktualizacjach produktu.
Obrazy dekoracyjne nie służą celom informacyjnym ani funkcyjnym — istnieją wyłącznie dla estetyki. Wzory tła, typowe zdjęcia stockowe używane jako separatory sekcji oraz czysto ornamentalne ikony należą do tej kategorii.
W przypadku obrazów dekoracyjnych użyj pustego atrybutu alt: alt="". Nazywa się to również null alt text.
To prawidłowe zachowanie; odczytywanie obrazów dekoracyjnych dodaje szum, nie wnosząc znaczenia.
Ważny szczegół: Atrybut alt musi być nadal obecny, tylko pusty. Całkowite pominięcie atrybutu alt (<img src="decoracyjne.jpg">) zmusza czytniki ekranu do odczytywania nazwy pliku, co tworzy gorsze doświadczenie niż null alt text.
Gdy obraz powtarza informacje już obecne w sąsiednim tekście, dodanie alt textu tworzy duplikację. Na przykład, jeśli karta produktu pokazuje obraz „Bezprzewodowych słuchawek Bluetooth" obok nagłówka „Bezprzewodowe słuchawki Bluetooth", alt text powinien być pusty — alt="" — ponieważ informacja jest już dostępna dla użytkowników czytników ekranu poprzez nagłówek.
Różnica między odpowiednim alt textem a bezużytecznym często sprowadza się do kilku podstawowych zasad.
Opisuj informacje, które obraz przekazuje, a nie każdy szczegół wizualny. Zdjęcie osoby wędrującej nie potrzebuje koloru sznurowadeł — potrzebuje akcji, kontekstu i szczegółów istotnych dla otaczającej treści.
Większość skutecznych alt textów mieści się w 125 znakach. Czytniki ekranu robią pauzy przy znakach interpunkcyjnych, więc długi, nieprzerwany alt text staje się ścianą dźwięku. Siteimprove zaleca utrzymywanie alt textu poniżej około 100 znaków, gdy jest to możliwe.
Ten sam obraz może potrzebować innego alt textu w zależności od tego, gdzie się pojawia. Zdjęcie laptopa na biurku może wymagać alt textu opisującego model laptopa na stronie produktu lub alt textu opisującego scenę pracy zdalnej na blogu o produktywności.
Zawsze pisz alt text dla roli obrazu na konkretnej stronie, a nie dla obrazu w izolacji.
Alt text istnieje przede wszystkim dla dostępności. Używaj odpowiednich terminów tylko wtedy, gdy naturalnie opisują obraz.
Czytniki ekranu już informują, że dany element jest obrazem.
Rozpocznij od wielkiej litery. Kończ zdania kropką. Czytniki ekranu używają interpunkcji do określenia tempa i intonacji. Poprawny gramatycznie alt text brzmi bardziej naturalnie i jest łatwiejszy do zrozumienia.
Gdy atrybut alt jest całkowicie nieobecny w znaczniku <img>, zachowanie jest różne:
DSC00472.jpg.Obraz z brakującym atrybutem alt zasadniczo różni się od obrazu z pustym alt="". Pierwszy powoduje zamieszanie; drugi to świadomy wybór, który mówi technologii asystującej, aby pominęła obraz. Każdy znacznik <img> na stronie powinien mieć atrybut alt — czy to wypełniony, czy pusty.
Większość platform CMS — WordPress, HubSpot, Shopify i inne — zawiera pole alt textu w interfejsie przesyłania obrazów lub biblioteki multimediów.
W WordPressie, po wybraniu obrazu w edytorze blokowym lub bibliotece multimediów, pole „Tekst alternatywny" pojawia się w panelu ustawień po prawej stronie. Wpisz swój opis i zapisz. CMS automatycznie dodaje atrybut alt do HTML.
Dodaj atrybut alt bezpośrednio wewnątrz znacznika <img>:
<img src="affiliate-dashboard.jpg" alt="Panel Post Affiliate Pro z podsumowaniem miesięcznej prowizji">
alt może pojawić się w dowolnym miejscu wewnątrz znacznika <img>, choć umieszczenie go po src jest konwencją.Większość platform społecznościowych oferuje opcję alt textu podczas publikowania posta z obrazem:
Zawsze zastępuj automatycznie wygenerowany alt text opisem napisanym przez człowieka. AI generuje raczej ogólne etykiety — „pies, w pomieszczeniu, osoba" — które pomijają cel i kontekst obrazu.
Alt text odgrywa specyficzną i często pomijaną rolę w procesach marketingu afiliacyjnego, wpływając zarówno na reklamodawców, jak i wydawców oraz menedżerów programów.
Gdy udostępniasz banery, obrazy produktów i materiały promocyjne swoim afiliantom, te obrazy rzadko są dostarczane z alt textem. Afilianci, którzy otrzymują plik obrazu przez panel afiliacyjny, mogą nie wiedzieć, co wpisać — a wielu pozostawi atrybut alt pusty lub go pominie.
Menedżerowie programów, którzy dołączają sugerowany alt text do każdego materiału w portalu afiliacyjnym, eliminują to tarcie.
Posty z recenzjami produktów i artykuły porównawcze w dużym stopniu opierają się na zrzutach ekranu, zdjęciach produktów i tabelach porównawczych renderowanych jako obrazy. Każdy z tych obrazów potrzebuje alt textu, który służy zarówno czytelnikowi, jak i wyszukiwarce.
Gdy czytelnicy korzystający z czytników ekranu napotkają ten alt text, otrzymują te same informacje, co widzący użytkownik oglądający zrzut ekranu. Gdy wyszukiwarki indeksują ten alt text, obraz może pojawić się w odpowiednich zapytaniach dotyczących ustawień prowizji afiliacyjnych.
Obrazy produktów z dokładnym, opisowym alt textem mogą pozycjonować się w Google Image Search dla długich zapytań. Kliknięcie w obraz prowadzi do strony — a potencjalnie do rejestracji.
Nie zastępuje to pisanych treści i standardowego SEO. Jest to dodatkowy, mało wymagający kanał, który działa tylko wtedy, gdy alt text jest konsekwentnie stosowany.
Zoptymalizuj swoją witrynę pod kątem dostępności i wyszukiwarek. Odkryj, jak skuteczny alt text może poprawić wyniki marketingu afiliacyjnego.
Dowiedz się, jak powinien wyglądać dobry tekst alternatywny na przykładach praktycznych. Poznaj najlepsze praktyki tworzenia zwięzłych, precyzyjnych alt tekstów...
Dowiedz się, jak pisać skuteczne teksty alternatywne dla obrazów. Poznaj najlepsze praktyki dotyczące dostępności, optymalizacji SEO oraz szczegółowe wskazówki ...
Dowiedz się, jak dodać obraz w HTML przy użyciu tagu img. Poznaj najlepsze praktyki dotyczące atrybutów src, alt, obrazów responsywnych oraz technik optymalizac...
Dołącz do naszej społeczności zadowolonych klientów i zapewnij doskonałą obsługę klienta dzięki PostAffiliatePro.
Zgoda na Pliki Cookie
Używamy plików cookie, aby poprawić jakość przeglądania i analizować nasz ruch. See our privacy policy.