Ilustrace ve stránce: značky Figure a Figcaption

Značka <figure> slouží k vložení ilustrací vztahujících se k  hlavnímu obsahu:

<figure>
  <img src="obrazek.jpg" 
    alt="Start rakety Falcon 9">
</figure>

Nemusí jít jen o obrázky. Je možné takto vkládat videa, schémata, grafy, tabulky, ilustrace, ukázky kódu nebo třeba reklamy. Klidně ale kusy textu, citace. Prostě cokoliv, k čemu se může hodit přidat popisek.

Obvykle značkou vkládáme ilustraci či doplnění hlavního obsahu. Prvek <figure> ale někdy použijeme i pro hlavní obsah stránky. To za chvíli uvidíte.

Proč to používat?

Může to mít pozitivní dopad na sémantiku, hlavně při zpracování stránky odečítači obrazovky. Ale nijak zásadní pomoc to myslím v době psaní článku není.

Dobře se to styluje. Ale hlavně: je to jediný rozumný způsob, jak do stránky vložit ilustraci doplněnou popiskem.

<figure> je vždy soběstačná, ale ne nezávislá jednotka

Soběstačnou jednotku si můžete představit jako jednu větu v textu. Kdybyste do obrázku dali jen část sdělení věty, <figure> použít nemůžete:

<p>
  Start rakety
  <img src="falcon-9.png" alt="Falcon 9">.
</p>  

Obsah elementu <figure> ovšem není nezávislý na hlavním obsahu stránky. Buď je z hlavního obsahu odkazovaný, v hlavním obsahu vložený nebo sám tvoří hlavní obsah. <figure> byste tedy neměli použít pro vložení čehokoliv nerelevantního k hlavnímu obsahu stránky.

Textový popisek: <figcaption>

Je nepovinný. Mělo by jít o první nebo poslední potomek uvnitř <figure>:

<figure>
  <img src="obrazek.jpg" alt="…">
  <figcaption>…</figcaption>
</figure>

Nojo, ale jak se liší parametr alt a popisek <figcaption>?

• alt je textový popis obsahu obrázku.
• <figcaption> komentuje obrázek v kontextu obsahu, ke kterému se vztahuje.

Zkusím to ukázat:

<figure>
  <img src="falcon.jpg" alt="Pohled zdola na Falcon 9 
    připravený ke startu z mysu Canaveral na Floridě">
  <figcaption>
    Americká společnost SpaceX jako první na světě 
    opakovaně použila první stupeň nosné rakety 
    Falcon 9 k vynesení družice na oběžnou dráhu.
    <br>
    <small>
      Foto: 
      <a href="http://www.apimages.com/">SpaceX via AP</a>
    </small>
  </figcaption>    
</figure>

Jak vidíte, <figcaption> může obsahovat plnohodnotný HTML obsah. Takže dokáže obrázek popsat lépe než alt. To se vám bude hodit u složitějších grafů nebo schémat.

Podrobnější a stále platné pojednání o textových alternativách k obrázkům před lety napsal Radek Pavlíček pro Zdroják.

Odkazování na <figure>

Prvek nemusí být součástí hlavního obsahu. Lze jej přesunout třeba do postranní lišty a pojmenovat pro potřeby odkazu:

<p>
  …jak je vidět <a href="#f-1">na prvním videu</a>,
  Falcon 9 odstartoval z mysu Canaveral…
</p>

<aside role="complementary">
  <figure id="f-1">
    <video></video>
    <figcaption>První video: …</figcaption>
  </figure>
</aside>

Jak už víte z textu o HTML5 značkách, do <aside> dáváme méně významné informace, které se vztahují k hlavnímu obsahu stránky.

Různé asistivní technologie podporují <figure> různě. Proto je vhodné kromě HTML odkazu (<a href="#f-1">) použít i provázání přes pojmenování („Obrázek 1“).

Nedoporučuji používat relativní textové odkazy: „na obrázku níže“ nebo „jak ukazuje následující graf“. Po přestylování stránky totiž přestávají platit.

Více médií v jednom <figure>

Fotogalerii s jedním společným popiskem si asi představit umíte. Tohle je samozřejmě správně:

<figure>
  <img src="falcon-1.jpg" alt="…">
  <img src="falcon-2.jpg" alt="…">
  <img src="falcon-3.jpg" alt="…">
  <figcaption>
    …
  </figcaption>
</figure>

Fotogalerie s mnoha obrázky

<figure> je možné zanořovat, proto značku klidně využijte pro vyznačení fotogalerie. Tentokrát s jedním společným a několika samostatnými popisky:

<figure>
  <figcaption>
    Fotogalerie ze startu Falcon 9
  </figcaption>
  <figure>
    <img src="falcon-1.jpg" alt="…">
    <figcaption> … </figcaption>
  </figure>
  <figure>
    <img src="falcon-2.jpg" alt="…">
    <figcaption> … </figcaption>
  </figure>
</figure>

Stylování

Ve výchozích stylech všech prohlížečů, které jsem během psaní článku testoval, má <figure> nastavený vnější okraj zleva i zprava na 40px. Pravděpodobně se toho budete chtít zbavit:

figure {
  margin-left: 0;
  margin-right: 0;
}

Normalize.CSS ani Reboot z Bootstrapu to samy neodstraňují.

Podpora v prohlížečích a odečítačích

Vazba na odečítače obrazovky funguje ve všech aktuálních prohlížečích kromě všech verzí Exploreru a Safari. Plná podpora u prohlížečů je asi jen otázkou času.

A co odečítače obrazovky? Testoval jsem to v Chrome přes VoiceOver na Macu a NVDA na Windows. Obrázek i popisek z ukázky v pohodě přečtou. Na druhou stranu nijak speciálně nehlásí, že jde o obrázek s popiskem nebo přímo značku <figure>. Ale to se samozřejmě může v různých čtečkách různit a do budoucna změnit.

Ukázka používaná v článku je na CodePenu. cdpn.io/e/oZOOer