Obrázky (img)

Doba čtení: cca 2 min

Obrázky jsou neodmyslitelnou součástí webu – ale jsou také jedním z nejčastějších zdrojů přístupnostních problémů. Atribut alt (alternativní text) je pro nevidomé uživatele stejně důležitý jako samotný obrázek pro vidící. Tato lekce tě naučí, jak obrázky vkládat správně.

Základní použití – tag <img>

Tag <img> vloží obrázek na stránku. Je samouzavírací – nemá uzavírací variantu. Povinné atributy jsou src a alt:

<img src="foto.jpg" alt="Portrét muže s tmavými vlasy, usmívající se do kamery">
  • src – cesta k souboru obrázku (relativní nebo absolutní URL).
  • alt – alternativní text: popis obrázku pro odečítače obrazovky a pro případ, že se obrázek nenačte.

Atribut alt – jak ho psát správně

Atribut alt je klíčový pro přístupnost. Nevidomý uživatel obrázek nevidí – VoiceOver mu místo obrázku přečte text alt. Proto musí alt text srozumitelně popsat, co obrázek zobrazuje a k čemu slouží.

Informativní obrázek

Popiš obsah a kontext obrázku. Popis by měl být stručný, ale výstižný:

<img src="diagram-html.png" alt="Diagram znázorňující hierarchii HTML tagů: html obsahuje head a body">

Funkční obrázek (odkaz nebo tlačítko)

Pokud je obrázek klikatelný, alt popisuje funkci, nikoli obsah:

<a href="index.html">
  <img src="logo.png" alt="Přejít na domovskou stránku Crazy-Mac.cz">
</a>

Dekorativní obrázek

Pokud obrázek nepřináší žádnou informaci (dekorativní pozadí, ozdobný prvek), nastav alt na prázdný řetězec. VoiceOver ho pak zcela přeskočí:

<img src="dekorace.png" alt="">

Pozor: prázdný alt="" a chybějící alt jsou dvě různé věci. Bez alt atributu VoiceOver přečte název souboru – což obvykle nedává žádný smysl.

Rozměry a responzivita

Atributy width a height říkají prohlížeči, jak velký prostor má pro obrázek rezervovat ještě před jeho načtením. Tím se zabrání posunu obsahu stránky při načítání:

<img src="foto.jpg" alt="Popis" width="800" height="600">

Pro responzivní zobrazení přidej do CSS:

img {
  max-width: 100%;
  height: auto;
}

Tato kombinace zajistí, že obrázek se přizpůsobí šířce kontejneru, ale nezkreslí se.

Obrázek s popisem – <figure> a <figcaption>

Pokud chceš k obrázku přidat viditelný popisek pod ním, použij sémantické tagy <figure> a <figcaption>:

<figure>
  <img src="diagram.png" alt="Diagram CSS box modelu">
  <figcaption>Schéma CSS box modelu – content, padding, border, margin.</figcaption>
</figure>

Pokud má obrázek <figcaption>, může být alt zkrácen nebo prázdný – popisek je viditelný pro všechny a VoiceOver ho přečte.

Tip od Zdeňka

Zdeněk radí: Chybějící nebo špatný alt text je jeden z nejčastějších a nejotravnějších přístupnostních problémů. Když procházím web a narazím na „image.jpg“ nebo „foto_001.jpg“ čtené jako alternativní text, nevím vůbec nic o tom, co obrázek ukazuje. Piš alt jako bys obrázek popisoval příteli telefonem: co je na obrázku, co je důležité, jaký má v kontextu stránky smysl. Dekorativní obrázky? Prázdné alt="" – a nic jiného.