---
id: 587d778a367417b2b2512aa5
title: Migliorare l'accessibilità di un grafico con l'elemento figure
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJMqtE'
forumTopicId: 301015
dashedName: improve-chart-accessibility-with-the-figure-element
---
# --description--
HTML5 ha introdotto l'elemento `figure`, insieme al relativo `figcaption`. Usati insieme, questi elementi contengono una rappresentazione visiva (come un'immagine, un diagramma o un grafico) e la sua didascalia. Avvolgere questi elementi insieme dà un doppio impulso di accessibilità raggruppando semanticamente i contenuti correlati e fornendo un testo alternativo che spiega la `figure`.
Per la visualizzazione di dati come nei grafici, la didascalia può essere utilizzata per annotare brevemente le tendenze o i risultati per gli utenti ipovedenti. Un'altra sfida spiegherà come spostare una versione tabulare dei dati del grafico fuori dallo schermo (utilizzando CSS) per chi utilizza uno screen reader.
Ecco un esempio - nota che il `figcaption` va dentro i tag `figure` e può essere combinato con altri elementi:
```html
Master Camper Cat demonstrates proper form of a roundhouse kick.
```
# --instructions--
Camper Cat sta lavorando sodo per creare un grafico a barre che mostra la quantità di tempo settimanale da trascorrere allenandosi in invisibilità, combattimento e armi. Aiutalo a strutturare meglio la sua pagina cambiando il tag `div` che usava con un tag `figure`, e il tag `p` che circonda la didascalia con un tag `figcaption`.
# --hints--
Il tuo codice dovrebbe avere un tag `figure`.
```js
assert($('figure').length == 1);
```
Il tuo codice dovrebbe avere un tag `figcaption`.
```js
assert($('figcaption').length == 1);
```
Il tuo codice non dovrebbe avere alcun tag `div`.
```js
assert($('div').length == 0);
```
Il tuo codice non dovrebbe avere alcun tag `p`.
```js
assert($('p').length == 0);
```
La `figcaption` dovrebbe essere un elemento figlio (child) del tag `figure`.
```js
assert($('figure').children('figcaption').length == 1);
```
Il tuo elemento `figure` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/figure>/g) &&
code.match(/<\/figure>/g).length === code.match(//g).length
);
```
# --seed--
## --seed-contents--
```html
Training
Breakdown per week of time to spend training in stealth, combat, and weapons.
Stealth & Agility Training
Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
```
# --solutions--
```html
Training
Breakdown per week of time to spend training in stealth, combat, and weapons.
Stealth & Agility Training
Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
