Jak używać atrybutu alt w HTMLu?

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.

Wewnątrz elementu <a>

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

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=.

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.