Przykłady tekstu alternatywnego: co napisać dla każdego rodzaju obrazu

Przykłady tekstu alternatywnego

Przykłady tekstu alt: dobre i złe, według rodzaju obrazu | We.Inc

Czym jest tekst alt, dobre i złe przykłady dla logo, produktów, ikon, wykresów i obrazów ozdobnych, kroki decyzyjne W3C oraz krótki quiz do ćwiczeń.

Tekst alternatywny to krótki opis zastępujący obraz, umieszczany w atrybucie alt znacznika img. Czytniki ekranu odczytują go na głos, a przeglądarki wyświetlają, gdy obraz się nie wczyta. Dobry tekst alt mówi, co obraz znaczy w danym miejscu strony; obrazy ozdobne dostają pusty alt.

Szybkie przykłady według rodzaju obrazu

Obraz
Słaby alt
Lepszy alt

Logo z linkiem do strony głównej
Smith Roofing, strona główna

Zdjęcie produktu
Brązowa skórzana torba shopper z mosiężną klamrą

Przycisk z ikoną wyszukiwania
lupa
Szukaj

Ozdobny zawijas oddzielający
ozdobny zawijas
(pusty: alt="")

Zdjęcie zespołu
Naszych czterech dekarzy przed busem warsztatowym

Wykres sprzedaży
Sprzedaż według miesięcy, szczegóły w tabeli poniżej

Właściwe słowa zależą od tego, po co obraz jest na stronie, a nie od tego, jak wygląda. Lupa w przycisku oznacza Szukaj; ten sam kształt jako dekoracja strony nie znaczy nic. Rozwiąż pytania ćwiczeniowe, a potem skopiuj wzorce do własnego sklepu lub strony.

Przeczytaj sytuację na każdej karcie ćwiczeniowej: co pokazuje obraz i gdzie znajduje się na stronie.
Wybierz z trzech opcji tekst alt, który byś napisał.
Karta powie Ci, czy ten wybór się sprawdza i który krok drzewa decyzyjnego W3C ma zastosowanie.
Korzystaj z tabeli przykładów poniżej jako ściągi, gdy dodajesz obrazy do własnych stron.

Pomijaj słowa typu obraz przedstawiający czy zdjęcie. Czytniki ekranu i tak informują, że to obraz.
W zdjęciach produktów podawaj szczegóły, o które zapytałby kupujący: kolor, materiał, czym ten wariant się wyróżnia.
Jeśli ta sama informacja jest w tekście tuż obok obrazu, pusty alt pozwala uniknąć powtarzania jej dwa razy.
Nigdy nie upychaj słów kluczowych. Google ostrzega, że wypełnianie atrybutów alt słowami kluczowymi może sprawić, że Twoja strona zostanie uznana za spam.

Najczęściej zadawane pytania

Co oznacza alt w tekście?

Alt to skrót od alternative, czyli alternatywny. Tekst alt to tekst alternatywny obrazu: słowa, które wypowiada czytnik ekranu, i to, co przeglądarka pokazuje zamiast obrazu, który nie może się wczytać. Znajduje się w atrybucie alt elementu img.

Czy każdy obraz powinien mieć tekst alt?

Każdy img powinien mieć atrybut alt, ale nie każdy potrzebuje słów. MDN wyjaśnia, że pusty alt oznacza obraz jako niebędący kluczową częścią treści. Całkowity brak alt jest gorszy: niektóre czytniki ekranu odczytują wtedy nazwę pliku.

Jak długi powinien być tekst alt?

Przy większości obrazów na tyle krótki, by dało się go powiedzieć na jednym oddechu. Drzewo W3C wymaga krótkiego opisu prostych zdjęć. Wyjątkiem są wykresy i diagramy: daj krótką etykietę w alt, a pełne informacje umieść w tekście na stronie.

Czy tekst alt pomaga w SEO?

Tak. Przewodnik Google po obrazach mówi, że Google wykorzystuje tekst alt razem z rozpoznawaniem obrazu i treścią strony, by rozumieć obrazy. Jego własny przykład woli szczeniak dalmatyńczyka aportujący piłkę zamiast samego szczeniak i ostrzega przed listami słów kluczowych.

Jaki tekst alt powinno mieć logo?

Jeśli logo prowadzi do Twojej strony głównej, alt powinien opisywać cel linku, na przykład nazwę firmy plus strona główna. Jeśli logo jest tylko wyświetlane, a Twoja nazwa widnieje obok jako tekst, pusty alt jest w porządku.

Drzewo decyzyjne W3C prostymi słowami

Po pierwsze, czy obraz zawiera tekst? Jeśli ten tekst występuje też w pobliżu jako prawdziwy tekst, użyj pustego alt; jeśli nie, wpisz ten tekst do alt. Następnie: czy obraz jest w linku lub przycisku? Wtedy opisz, dokąd prowadzi link lub co robi przycisk.
Czy obraz wnosi znaczenie? Proste zdjęcia opisz krótko, a dane z wykresów umieść w innym miejscu strony. Czy to tylko dekoracja? Użyj pustego alt.

Tekst alt w sklepach internetowych

Kupujący korzystający z czytników ekranu polegają na tekście alt zdjęć produktów tak, jak inni polegają na powiększaniu. Gdy produkt ma kilka zdjęć, nadaj każdemu inny alt: widok z przodu, detal tylnej kieszeni, na modelce o wzroście 170 cm.

Więcej przykładów dla stron sklepów i firm

Przykłady tekstu alt dla typowych obrazów firmowych

Gdzie jest obraz
Przykładowy tekst alt
Dlaczego

Główne zdjęcie wnętrza kawiarni
Słoneczna lada kawiarni ze świeżymi wypiekami na wystawie
Buduje klimat w kilku słowach

Zdjęcie portretowe na stronie O nas
Dr Amira Khan, główna dentystka
Imię i rola, a nie kolor włosów

Ikona społecznościowa z linkiem do Instagrama
Harbour Bakery na Instagramie
Opisuje cel linku

Zrzut mapy z adresem obok
(pusty: alt="")
Adres jest już tekstem w pobliżu

Zdjęcie dachu przed i po naprawie
Dach przed naprawą, z brakującymi dachówkami przy kalenicy
Mówi, co zmienia się między zdjęciami

Odznaka certyfikatu
Certyfikat regionalnej izby rzemieślniczej
Mówi, co potwierdza odznaka

Przykłady kodu

Trzy typowe przypadki w HTML

Logo z linkiem, zdjęcie produktu i obraz ozdobny. Zwróć uwagę, że ozdobny nadal ma atrybut alt, tylko pusty.

Wykres z danymi w tekście

Alt nazywa wykres i wskazuje szczegóły, które znajdują się w podpisie czytelnym dla każdego odwiedzającego.

Ćwiczenie: wybierz najlepszy tekst alt

Poprawne odpowiedzi: {n} z {v}.

Dobrze.

Nie do końca. Najlepsza odpowiedź to: {v}.

Zacznij od nowa

Opcje tekstu alt

Twoje logo jest w nagłówku i prowadzi do strony głównej. Nazwa firmy nie jest nigdzie indziej napisana w nagłówku.

Harbour Bakery, strona główna
Nasze piękne niebieskie logo

Obraz będący linkiem potrzebuje tekstu alt, który mówi, dokąd prowadzi link.

Cienka falista linia oddziela dwie sekcje. Nie niesie żadnej informacji.

falista linia
obraz oddzielający
Pusty alt (alt="")

Obrazy czysto ozdobne dostają pusty alt, aby czytniki ekranu je pomijały.

Główne zdjęcie na stronie produktu kubka dostępnego w trzech kolorach. To jest wersja szałwiowa.

Szałwiowozielony kubek z kamionki z wygiętym uchem
kubek kubek kubek do kawy najlepszy kubek prezent
zdjęcie produktu

Krótki opis ze szczegółami, które odróżniają ten wariant. Listy słów kluczowych to spam.

Przycisk z samą ikoną koszyka otwiera koszyk zakupowy.

Ikona wózka sklepowego
Zobacz koszyk

Dla obrazu w przycisku opisz działanie, a nie rysunek.

Baner ze słowami Darmowa dostawa w ten weekend. Tych samych słów nie ma na stronie jako tekstu.

Przykłady tekstu alternatywnego: co napisać dla każdego rodzaju obrazu