Jak używać atrybutu alt w HTMLu?

Data ostatniej aktualizacji: 25 września 2019


Czym jest atrybut alt i dlaczego warto go używać?

Alt jest atrybutem używanym w językach HTML i XHTML służącym do określenia alternatywnego opisu dla renderowanego elementu, który wyświetli się w momencie gdy dany element nie może zostać wyrenderowany.

Alt jest także wykorzystywany przez czytniki ekranowe, których używają osoby słuchające stron internetowych (np. osoby ślepe). Dzięki niemu mogą one w pełni zdawać sobie sprawę z tego, co znajduje się na stronie.

W celu budowania sieci przyjaznej dla wszystkich użytkowników stosowanie atrybutu alt jest niezbędne, dodatkowo przyczynia się do lepszej oceny naszej witryny przez roboty sieciowe, czyli lepszej pozycji naszej strony w wyszukiwarce.

Jakie elementy mogą zawierać atrybut alt?

  • zdjęcie <img>
  • input <input>
  • area <area>

Jak używać atrybutu alt wewnątrz <img>?

Zdjęcie zawiera ważne informacje

W takim przypadku tekst zawarty w alt powinien opisywać to, co znajduje się na zdjęciu.

Czerwona budka telefoniczna stojąca na trawie koło drogi
Alt powinien wyglądać tak: Czerwona budka telefoniczna stojąca na trawie koło drogi

Wewnątrz elementu <a>

Tekst powinien wskazywać na to, gdzie kieruje dany link.

Przejdź do wpisu o grach wideo
Alt: Przejdź do wpisu o grach wideo

Wyjątek!

Jeśli w tym samym tagu <a> znajdzie się tekst, to atrybut alt pozostawiamy pusty.

<a href="lista-gier-do-zagrania">
  <img src="img/pad.jpg" alt="">
  Wpis o grach
</a>

Zdjęcie jest dekoracją

W takim przypadku zdjęcie wciąż powinno zawierać atrybut alt, ale powinien on być pusty: alt=.

To zdjęcie jest tutaj jedynie w celach dekoracyjnych. Alt pozostaje pusty.

Atrybut alt wewnątrz <input>

Atrybutu alt w przypadku znacznika wprowadzania danych może być stosowany jedynie dla type="image", a więc zasady jego stosowania są takie same jak w przypadku tagu <img>.

Atrybut alt wewnątrz <area>

Tag <area> jest wykorzystywany wewnątrz tagu <map>, który służy do tworzenia obrazów z elementami klikalnymi.

Tag <area> służy do oznaczania obszarów na danym obrazku – mapie.

<img src="mapa-wroclawia.jpg" usemap="#mapawroclawia">

<map name="mapawroclawia">
  <area shape="circle" coords="15,58,3" href="wyspa-slodowa.html" alt="Wyspa Słodowa">
  <area shape="circle" coords="23,95,8" href="skytower.html" alt="SkyTower">
</map>

Podsumowanie

Używanie atrybutu alt na stronach internetowych wcale nie musi być trudne, należy pamiętać o kilku prostych zasadach i starać się je stosować. Wszyscy na tym skorzystamy. Internet będzie miejscem bardziej dostępnym dla osób niepełnosprawnych, a nasze strony będą zajmowały lepsze pozycje w rankingach wyszukiwarek.


Dziękuję Ci za przeczytanie mojego wpisu. Jeśli Ci pomógł, to będzie mi miło, jeśli podzielisz się z innymi. Gdybyś znalazł jakieś błędy lub niedopowiedzenia, napisz w komentarzu, żeby wpis mógł być jeszcze lepszym źródłem dla szukających pomocy.

avatar