Atrybut alt (ang. alternative text) to atrybut HTML używany w tagu <img>, który dostarcza opis tekstowy obrazka. Jest on wyświetlany, gdy obrazek nie może być załadowany, i odgrywa kluczową rolę w dostępności stron internetowych dla osób z niepełnosprawnościami oraz w optymalizacji SEO.
Rozwinięcie definicji
Atrybut alt jest jednym z kluczowych elementów semantyki w HTML. Jego głównym celem jest zapewnienie treści zastępczej dla obrazków w sytuacjach, gdy:
- Użytkownik korzysta z czytnika ekranu (np. osoby niewidome lub słabowidzące).
- Przeglądarka nie może załadować obrazka z powodu problemów technicznych.
- Roboty wyszukiwarek indeksują stronę internetową – tekst alt pozwala lepiej zrozumieć treść obrazka.
Tekst w atrybucie alt powinien być krótki, precyzyjny i opisowy, aby w pełni przekazać istotę grafiki, szczególnie w kontekście treści strony.
Przykłady zastosowania w praktyce
- Dostępność strony (WCAG): Strona e-commerce, na której produkt przedstawiony na obrazku ma opis w atrybucie alt: np.
<img src="buty.jpg" alt="Czarne buty sportowe męskie Nike Air Max">. - SEO: Blog kulinarny optymalizujący obrazy poprzez opis alt, np.
<img src="ciasto.jpg" alt="Domowe ciasto czekoladowe z orzechami">. - Poprawa doświadczenia użytkownika: Strona wyświetlająca komunikat alternatywny, gdy zdjęcie nie ładuje się: „Obrazek nie został znaleziony”.
Powiązane narzędzia lub techniki
- WCAG (Web Content Accessibility Guidelines): Zbiór wytycznych dotyczących dostępności, które zalecają stosowanie altów.
- Google Lighthouse: Narzędzie do audytu stron internetowych, które sprawdza, czy wszystkie obrazy mają atrybut alt.
- SEO Tools (np. Ahrefs, SEMrush): Analizują obecność i jakość altów na stronie w kontekście optymalizacji pod kątem wyszukiwarek.
Zalecenia i dobre praktyki
- Używaj opisowych i precyzyjnych tekstów: Zamiast „obrazek1”, napisz „Krajobraz górski w Alpach o zachodzie słońca”.
- Unikaj przesycenia słowami kluczowymi: Nadmiar keywordów w alt może być uznany za spam przez wyszukiwarki.
- Nie zostawiaj pustych altów: Pusta wartość alt (np.
alt="") jest uzasadniona jedynie w przypadku dekoracyjnych obrazków, które nie niosą istotnej treści. - Dostosuj treść do kontekstu strony: Opis alt powinien odnosić się do tematu strony i treści otaczającej obrazek.
Powiązane pojęcia
- WCAG: Zasady tworzenia dostępnych stron internetowych.
- Tekst zastępczy: Treść pełniąca funkcję alternatywną dla elementów wizualnych.
- SEO: Optymalizacja stron internetowych pod kątem wyszukiwarek.
FAQ
Czy każdy obrazek na stronie musi mieć atrybut alt?
Nie, obrazki dekoracyjne mogą mieć pusty alt (np. alt=""), aby nie przeszkadzać użytkownikom czytników ekranowych.
Czy atrybut alt wpływa na SEO?
Tak, dobrze napisany tekst alt pomaga wyszukiwarkom lepiej zrozumieć zawartość obrazka, co może wpłynąć na ranking strony.
Podsumowanie
Atrybut alt to ważny element HTML, który wpływa na dostępność i SEO stron internetowych. Dzięki niemu strony są bardziej przyjazne dla użytkowników z niepełnosprawnościami i lepiej widoczne w wynikach wyszukiwania. Warto poświęcić czas na optymalizację tekstów alt, aby poprawić jakość strony i zwiększyć jej użyteczność.