Popis obrázku

Při vložení obrázku na stránku bývá často potřebné k němu uvést nějaký popis.

Atribut alt

Jedno z míst, kam je možné umístit popis obrázku, je HTML atribut alt. Zásadní jeho nevýhoda ale je, že jeho obsah není standardně viditelný.

<img src="obrazek.jpg" alt="popisek obrázku">

Smysl má tak hlavně pro roboty vyhledávačů.

Nevidomí návštěvníci

Atribut alt může zlepšit zážitek ze stránky nevidomým návštěvníkům, kteří používají hlasové čtečky.

Pro takové návštěvníky by obrázek:

1. měl mít alt vyplněný, jinak na obrázek čtečka neupozorní,
2. neobsahovat totéž, co viditelný popisek – jedná se o duplicitní informaci

Z praktického hlediska je ale tvorba správných popisků často nemožná/nerentabilní – například popisovat stovky obrázků v galerii.

HTML kód pro popisek

Aby si běžný návštěvník mohl popis obrázku přečíst, je ho nutné vložit přímo do HTML.

Značka <figure>

HTML 5 přišlo se značkami <figure> a <figcaption>, které se mimo jiné hodí k obalení obrázku a jeho popisu. Obě značky jsou blokové a <figure> má výchozí margin.

<figure>
    <img src='obrazek.jpg' alt='obrázek'>
    <figcaption>Popis obrázku</figcaption>
</figure>

Ukázka

Jediná nevýhoda je absence podpory v IE8 a starších, kterou je kvůli stylování nutné doplnit skriptem.

Odstavec

Asi nejjednodušší možná varianta je prosté použití odstavce.

<p>
    <img src='obrazek.jpg' alt='obrázek'>
    <br>
    Popis obrázku
</p>

Tento HTML kód ale nedává moc prostoru k pohodlnému stylování, takže v případě, že je obtížné formát výsledného kódu obrázku s popiskem hromadně měnit, bude lepší navrhnout HTML ve stylu <figure> a <figcaption>.

Odkaz

Pro zobrazení miniatury obrázku s popisem, která bude odkazovat na velký obrázek, by mohl HTML kód vypadat následovně:

<a href="velky-obrazek.jpg">
  <img src="maly-obrazek.jpg" alt="obrazek">
  <div class="popisek">Popis obrázku</div>
</a>

Odkazy jinam

• MDN: <figure>
• MDN: <figcaption>