figure

Кога да се използва

Използвайте <figure> и <figcaption>. Нативният елемент обработва ролята, асоциирането на надписа и семантиката на структурата на документа.

role="figure" е подходящ само когато нативният елемент не може да се използва. Свържете го с достъпно наименование — или aria-labelledby, сочещ към елемент с надпис, или aria-label, съдържащ текста на надписа.

Фигура се обявява като „figure, [надпис]” от екранните четци, като сигнализира, че следващото съдържание е илюстративно, а не основна проза. Използвайте я за листинги на код, схеми, диаграми и вградени изображения, за които е уместен надпис — не за всяко декоративно изображение.

Чести грешки

• <figure> без <figcaption> и без aria-label. Фигурата няма достъпно наименование и ролята добавя малко стойност.
• role="figure" върху <div>, обгръщащ <img>, чийто alt вече покрива описанието. Излишно е — просто използвайте <img>.
• Поставяне на <figcaption> извън <figure>. Надписът трябва да е пряк дъщерен елемент, за да работи нативното асоциране.
• Множество фигури на страница с еднакъв текст на надписа. Добавете aria-labelledby, сочещ към уникален елемент, за да работи навигацията по фигури.
• role="figure" директно върху <img>. Използвайте го върху обгръщащия елемент, с изображението вътре.

Пример

<!-- Предпочитан начин -->
<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>

<!-- Когато <figure> е невъзможен -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab order through an inaccessible single-page app.</p>
</div>