figure

Käyttötilanteet

Käytetään <figure>- ja <figcaption>-elementtejä. Natiivi elementti hoitaa roolin, kuvatekstin yhdistämisen ja dokumentin rakenteen semantiikan.

role="figure" on asianmukainen vain, kun natiivista elementtiä ei voi käyttää. Yhdistettäkön saavutettava nimi — joko aria-labelledby, joka osoittaa kuvatekstielementtiin, tai aria-label, joka kantaa kuvatekstin tekstin.

Hahmo ilmoittaa “hahmo, [kuvateksti]” ruudunlukuohjelmissa, merkiten, että seuravana on havainnollistusta eikä juoksevaa tekstiä. Käytetään koodilistauksia, kaavioita, kaavioita ja tekstissä olevia kuvia, jotka ansaitsevat kuvatekstin — ei jokaiselle koristeelliselle kuvalle.

Yleisimmät virheet

• <figure> ilman <figcaption>-elementtiä eikä aria-label-attribuuttia. Hahmolla ei ole saavutettavaa nimeä ja rooli lisää vain vähän arvoa.
• role="figure" <div>-elementissä, joka ympäröi <img>-elementtiä, jonka alt jo kattaa kuvauksen. Tarpeeton; pelkkä <img> riittää.
• <figcaption> sijoitettu <figure>-elementin ulkopuolelle. Kuvatekstin on oltava suora lapsi, jotta natiivi yhdistäminen toimii.
• Useita hahmoja samalla sivulla saman kuvatekstin tekstillä. Lisätään aria-labelledby, joka osoittaa yksilölliseen elementtiin, jotta hahmon mukaan navigointi toimii.
• role="figure" suoraan <img>-elementissä. Se asetetaan ympäröivässä elementissä, kuva sisällä.

Esimerkki

<!-- Suositeltava -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Kohdistusindikaattori jumissa modaalipäällyksessä ilman poistumisreittiä">
  <figcaption>Näppäimistöloukku huonosti rakennetussa modaalissa.</figcaption>
</figure>

<!-- Kun <figure> on mahdoton -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Sarkainjärjestys saavutettamattomassa yhden sivun sovelluksessa.</p>
</div>