Tekst alternatywny obrazów — kiedy i jak go stosować
Pisanie tekstu alternatywnego, który przekazuje znaczenie obrazów niedekoracyjnych
Tekst alternatywny obrazów — kiedy i jak go stosować to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest tekst alternatywny (alt)?
Atrybut alt zawiera tekst alternatywny dla obrazów:
- Jest odczytywany przez czytniki ekranu zamiast obrazu
- Jest wyświetlany, gdy obraz nie może zostać wczytany
- Jest indeksowany przez wyszukiwarki
- Jest wymagany w celu zapewnienia zgodności z WCAG
Złota zasada
Tekst alternatywny powinien przekazywać te same informacje lub pełnić tę samą funkcję, co obraz dla osoby widzącej:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Obrazy informacyjne
Obrazy przekazujące informacje: opisz ich zawartość:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Obrazy dekoracyjne: pusty alt
Obrazy czysto dekoracyjne powinny mieć pusty atrybut alt, aby czytnik ekranu je pomijał:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Obrazy funkcjonalne
W przypadku obrazów pełniących funkcję — opisz funkcję, a nie wygląd:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Obrazy złożone: elementy figure i długie opisy
Złożone wykresy lub diagramy mogą wymagać czegoś więcej niż krótkiego tekstu alt:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Obrazy zawierające tekst
Unikaj obrazów zawierających tekst — jeśli musisz ich użyć, tekst alt musi dokładnie odpowiadać zawartemu tekstowi:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->Kontekst zmienia tekst alt
Ten sam obraz może wymagać innego tekstu alt w różnych kontekstach:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Długość tekstu alt
Wskazówki dotyczące długości tekstu alt:
- Niech będzie zwięzły — nie trzeba zaczynać od „Obraz przedstawiający” ani „Zdjęcie przedstawiające”
- Celuj w mniej niż 125 znaków (niektóre czytniki ekranu skracają tekst po 125 znakach)
- W przypadku złożonych obrazów użyj krótkiego tekstu alt oraz aria-describedby dla rozszerzonego opisu
- Nie upychaj słów kluczowych — pisz z myślą o użytkownikach
Testowanie tekstu alt
Jak testować tekst alt:
- Wyłącz obrazy w przeglądarce (Firefox: Narzędzia → Styl strony → Bez stylu)
- Użyj narzędzia WAVE, aby wyświetlić cały tekst alt jednocześnie
- Posłuchaj za pomocą VoiceOver/NVDA, aby usłyszeć, co jest odczytywane
- Uruchom Lighthouse: Accessibility → Image elements have [alt] attributes
SVG i dostępne nazwy
W przypadku wbudowanego kodu SVG dostępne nazwy należy podawać w inny sposób:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Szybkie sprawdzenie
Jaką wartość alt powinien mieć czysto dekoracyjny obraz?
Podsumowanie: tekst alt
Najważniejsze zasady dotyczące tekstu alt:
- Zawsze dodawaj atrybut alt; w przypadku obrazów dekoracyjnych używaj alt=""
- Opisuj informacje, a nie wygląd
- Obrazy funkcjonalne: opisuj działanie lub miejsce docelowe
- Obrazy złożone: krótki tekst alt + aria-describedby z pełnym opisem
- Obrazy zawierające tekst: tekst alt musi dokładnie odpowiadać zawartemu tekstowi
Często zadawane pytania
Czy lekcja „Tekst alternatywny obrazów — kiedy i jak go stosować” jest bezpłatna?
Tak — pełny tekst „Tekst alternatywny obrazów — kiedy i jak go stosować” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Tekst alternatywny obrazów — kiedy i jak go stosować”?
Pisanie tekstu alternatywnego, który przekazuje znaczenie obrazów niedekoracyjnych Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Tekst alternatywny obrazów — kiedy i jak go stosować”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dlaczego dostępność ma znaczenie — poziomy WCAG
- Hierarchia nagłówków dla czytników ekranu
- Tekst alternatywny obrazów — kiedy i jak go stosować
- Nawigacja klawiaturą i kolejność fokusu