Atrybut alt zapewnia alternatywę tekstową opisującą zawartość lub funkcję obrazu. Służy użytkownikom i narzędziom, które nie mogą zobaczyć obrazu.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
Atrybut alt zapewnia alternatywę tekstową opisującą zawartość lub funkcję obrazu. Służy użytkownikom i narzędziom, które nie mogą zobaczyć obrazu.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt na głos, więc niewidomy użytkownik wie, co obraz przekazuje. Bez niego słyszą tylko nazwę pliku lub po prostu "obraz" — bezużyteczne.alt zamiast ikony uszkodzonego obrazu.alt do zrozumienia i indeksowania obrazów (SEO obrazów).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
Atrybut alt="" (pusty, ale obecny) jest ważny: mówi czytelnikom ekranu "to jest dekoracyjne, zignoruj to". Całkowite pominięcie alt jest inne — wtedy czytnik może ogłosić nazwę pliku.
alt to najważniejszy atrybut dostępności dla obrazów i wymóg prawny zgodnie z normami dostępności (WCAG).
Czyni zawartość dostrzegalną dla niewidomych użytkowników, zapewnia rezerwę w przypadku uszkodzenia obrazów oraz pomaga w SEO — opisz, co obraz oznacza w kontekście, i użyj alt="" dla czysto dekoracyjnych obrazów.