figure

Quando usarlo

Si raccomanda l’uso di <figure> e <figcaption>. L’elemento nativo gestisce il ruolo, l’associazione della didascalia e la semantica dello schema del documento.

role="figure" è appropriato solo quando non è possibile utilizzare l’elemento nativo. È necessario abbinarlo a un nome accessibile: un aria-labelledby che punta a un elemento di didascalia oppure un aria-label che ne riporta il testo.

Un figure annuncia «figure, [didascalia]» nei screen reader, segnalando che il contenuto che segue è illustrativo e non testo corrente. Va utilizzato per listati di codice, schemi, grafici e immagini inline che giustificano una didascalia — non per ogni immagine decorativa.

Errori comuni

• <figure> senza <figcaption> e senza aria-label. Il figure non ha un nome accessibile e il ruolo offre scarso valore.
• role="figure" su un <div> che avvolge un <img> il cui alt copre già la descrizione. Ridondante; è sufficiente usare l’<img>.
• <figcaption> posizionato fuori dal <figure>. La didascalia deve essere un figlio diretto affinché l’associazione nativa funzioni.
• Più figure nella stessa pagina con lo stesso testo di didascalia. Occorre aggiungere aria-labelledby che punta a un elemento univoco, in modo che la navigazione per figure funzioni correttamente.
• role="figure" applicato direttamente su un <img>. Il ruolo va sull’elemento contenitore, con l’immagine al suo interno.

Esempio

<!-- Preferito -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Indicatore di focus bloccato su un overlay modale senza via d'uscita">
  <figcaption>Una keyboard trap all'interno di un modal mal realizzato.</figcaption>
</figure>

<!-- Quando <figure> non è utilizzabile -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Ordine di tabulazione in una single-page app non accessibile.</p>
</div>