Testo alternativo

Immagini e video non possono essere visti da chi ha deficit visivo e l’audio ascoltato da chi ha deficit uditivo. L’importanza quindi di dare un contenuto alternativo è fondamentale: in questa sezione vengono trattato il tag img. Per oggetti multimediali, consultare la sezione specifica Multimedia accessibili.

Esempi

<img src="dinosaur.png">

<img src="dinosaur.png"
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">

<img src="dinosaur.png"
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
     title="The Mozilla red dinosaur">

<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

Note: Leggi Images in HTML and Responsive images per approfondimenti sull’implementazione delle immagini e best practices.

<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>

In questo caso non viene utilizzato il tag alt ma invece la descrizione dell’immagine viene inserita all’interno di un normale paragrafo, con un ID e quindi viene richiamato con aria-labelledby attribute riferito a quello stesso ID. Il lettore vocale leggerà quella descrizione come fosse inserita nel tag alt. Questo è particolarmente utile quando si vuole utilizzare la stessa descrizione per molte immagini (es. carosello).