Corso di HTML / Associare immagini e didascalie con figure e figcaption
figure riunisce contenuti autonomi come un'immagine, un grafico o un esempio di codice, e figcaption fornisce una didascalia visibile a questa figura. Non tutte le immagini necessitano di questi elementi. Utilizzateli quando il contenuto e la sua spiegazione formano insieme un'unità.
Mantenere insieme un'immagine e la sua didascalia
Un'immagine di viaggio e la sua posizione o contesto possono formare una figura. Inserite figcaption come primo o ultimo figlio di figure. Usate la stessa immagine di esempio di immagine scaricabile e la configurazione del percorso come
Inserire immagini con img: testo alternativo e dimensioni .
<figure>
<img src="html-image-sample-lake-tree-960-v1.webp"
alt="Un albero su una piccola isola al centro di un lago, con le montagne sullo sfondo"
width="960" height="540">
<figcaption>Illustrazione: il lago e l'albero utilizzati in questa lezione</figcaption>
</figure>Se l'immagine supera la larghezza del contenuto, aggiungete questo CSS nell'elemento style del head. Modificare la didascalia non cambia automaticamente il testo alternativo, quindi controllateli separatamente.
figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }Scaricate l'immagine di esempio con larghezza di 960 pixel e salvatela accanto al file HTML. Inserite il seguente codice HTML in body e le regole CSS in un elemento style in head. Il nome del file è html-image-sample-lake-tree-960-v1.webp e le dimensioni effettive sono 960×540 pixel. La didascalia appare sotto; spostate figcaption nella posizione del primo figlio per posizionarla in alto.
Il testo alternativo e le didascalie hanno funzioni diverse
Il testo alt trasmette le informazioni o la funzione dell'immagine, quando questa non può essere percepita. Il figcaption visibile fornisce un titolo, una fonte o un contesto per tutti. Ripetere esattamente la stessa cosa in entrambi può portare a un'esperienza di lettura ridondante. In questo esempio, l'attributo alt descrive l'informazione visibile e la didascalia dell'immagine identifica il suo ruolo come esempio per una lezione. Esaminate la funzione dell'immagine insieme all'uso della tastiera in Principi fondamentali di accessibilità: intestazioni, link, immagini e tastiera.
Per un'immagine puramente decorativa, considerate alt="", ma assicuratevi prima che le informazioni importanti siano disponibili altrove. Un grafico dovrebbe trasmettere la sua tendenza principale o il suo risultato e non solo la dicitura "diagramma a barre". Se i dati del grafico richiedono una spiegazione più lunga, fornitela nel testo o in una tabella vicina e usate il testo alternativo per indicare dove trovarla. L'albero decisionale W3C WAI per il testo alternativo aiuta in questa scelta.
Quando si può omettere figure?
Un'immagine comune all'interno di un paragrafo non necessita di figure se non ha una didascalia o riferimento separato. Un diagramma discusso come "la figura seguente" o un esempio di codice con didascalia è un candidato più appropriato. Un figure può contenere più di un'immagine. Consultate la documentazione di figure su MDN per il suo modello di contenuto.
Per collegare una fonte nella didascalia, sostituite il precedente figcaption come segue. Questo link porta alla lezione che fornisce il file di esempio effettivo. Per un'altra immagine, identificate l'autore o la fonte effettivi e verificate le condizioni d'uso; la semplice citazione non concede alcun permesso.
<figcaption>Fonte dell'immagine di esempio: <a href="https://www.codingfactory.net/it/18555">il file fornito nella lezione sulle immagini</a>.</figcaption>L'attribuzione e il link appaiono sotto l'immagine, mentre l'attributo alt continua a descrivere l'albero, il lago e le montagne. Non ripetete tutti i dettagli dell'attribuzione nel testo alt.
Se il risultato sembra sbagliato
I browser possono aggiungere margini intorno a figure per impostazione predefinita. Controllate la proprietà CSS margin prima di modificare la struttura HTML. Se l'immagine manca, verificate il nome del file e il percorso relativo. Se manca la didascalia, assicuratevi che figcaption sia all'interno di figure e che i tag di chiusura siano presenti. Una didascalia non fornisce automaticamente un testo alternativo adeguato; controllateli separatamente.
