figure

Kiedy stosować

Używaj <figure> i <figcaption>. Natywny element obsługuje rolę, powiązanie podpisu oraz semantykę konspektu dokumentu.

role="figure" jest odpowiedni tylko gdy nie możesz użyć natywnego elementu. Połącz go z dostępną nazwą — albo aria-labelledby wskazującym na element podpisu, albo aria-label zawierającym tekst podpisu.

Figura ogłaszana jest jako „figura, [podpis]” w czytnikach ekranu, sygnalizując, że to co następuje ma charakter ilustracyjny, a nie jest ciągłą prozą. Stosuj ją do listingów kodu, schematów, wykresów i obrazów osadzonych, które zasługują na podpis — nie dla każdego dekoracyjnego obrazu.

Częste błędy

• <figure> bez <figcaption> i bez aria-label. Figura nie ma dostępnej nazwy, a rola nie wnosi żadnej wartości.
• role="figure" na <div> opakowującym <img>, którego alt już zawiera opis. Redundantne; wystarczy samo <img>.
• Umieszczenie <figcaption> poza <figure>. Podpis musi być bezpośrednim dzieckiem, aby natywne powiązanie działało.
• Wiele figur na stronie z tym samym tekstem podpisu. Dodaj aria-labelledby wskazujące na unikalny element, aby nawigacja po figurach działała.
• role="figure" bezpośrednio na <img>. Użyj go na elemencie-kontenerze, z obrazem wewnątrz.

Przykład

<!-- Zalecane -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Focus indicator stuck on a modal overlay with no escape route">
  <figcaption>A keyboard trap inside a poorly built modal.</figcaption>
</figure>

<!-- Gdy <figure> jest niemożliwy -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab order through an inaccessible single-page app.</p>
</div>