W3docs
it
Accedi

Attributo alt in HTML

L'attributo alt specifica un testo alternativo mostrato quando l'elemento non può essere visualizzato. Esempi su diversi elementi HTML.

L'attributo HTML alt fornisce un testo alternativo per un'immagine (o un elemento simile a un'immagine). Viene letto ad alta voce dagli screen reader e viene mostrato al posto dell'immagine quando questa non riesce a caricarsi. Questa pagina spiega come deve essere un buon testo alternativo, come si comporta alt su ciascun elemento che lo supporta e gli errori comuni da evitare.

Puoi usare l'attributo alt sui seguenti elementi: <area>, <img> e <input type="image">.

Perché il testo alt è importante

L'attributo alt svolge tre funzioni contemporaneamente:

  • Accessibilità. Gli utenti che usano screen reader non possono vedere l'immagine, quindi il testo alt è l'immagine per loro. Descrivere il contenuto consente loro di seguire la pagina. Un alt significativo è ciò che rende un'immagine accessibile.
  • Alternativa alle immagini non disponibili. Se il file immagine manca, il percorso è errato o la connessione è lenta, il browser mostra il testo alt al posto dell'immagine anziché una casella vuota. Questo mantiene la pagina fruibile.
  • SEO (un piccolo vantaggio). I motori di ricerca possono leggere il testo alt per capire cosa mostra un'immagine, il che aiuta la ricerca per immagini. Consideralo un beneficio secondario — scrivi alt pensando prima agli utenti, non per fare keyword stuffing.
Pericolo

Per l'elemento <img>, l'attributo alt è obbligatorio. Ometterlo del tutto è una violazione dell'accessibilità: uno screen reader ricorrerà all'annuncio del nome del file, che raramente è utile. Un alt="" vuoto è una scelta deliberata e valida per le immagini decorative — non equivale all'omissione di alt.

Come scrivere un buon testo alt

Cerca di descrivere l'immagine come la descriveresti a qualcuno che non può vederla, nel contesto del contenuto circostante.

  • Sii descrittivo e specifico, ma conciso — approssimativamente 125 caratteri o meno. Gli screen reader potrebbero non fare pause appropriate con testi alternativi molto lunghi.
  • Non iniziare con "immagine di" o "foto di". Gli screen reader annunciano già che si tratta di un'immagine, quindi il prefisso è ridondante.
  • Trasmetti la funzione o il contenuto rilevante nel contesto, non ogni dettaglio visivo.
  • Ometti il testo alt per le immagini puramente decorative usando alt="" (vedi sotto).

Testo alt buono vs. cattivo

Per la stessa foto di un golden retriever che prende un frisbee in un parco:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Immagini decorative: usa un alt vuoto

Se un'immagine non aggiunge alcuna informazione — un divisore, un elemento decorativo di sfondo, un'icona accanto a un testo che già trasmette lo stesso significato — assegnale un alt="" vuoto. Questo indica agli screen reader di saltare completamente l'immagine, invece di annunciare un nome di file.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Informazione

Ricorda la distinzione: alt="" = "questa immagine è decorativa, saltala." Nessun alt = un errore che lascia gli utenti di screen reader senza alcuna alternativa.

Sintassi

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

L'attributo alt su <area>

In una mappa immagine, ogni <area> cliccabile si comporta come un link, quindi il suo alt deve descrivere dove porta quell'area — proprio come si scriverebbe il testo di un link. Ogni <area> ha bisogno del proprio alt distinto; riutilizzare lo stesso valore per destinazioni diverse impedisce agli utenti di distinguere le aree.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Provalo tu stesso »

L'attributo alt su <img>

Questo è l'uso più comune. Descrivi cosa mostra l'immagine nel contesto della pagina. Se l'immagine ha anche una didascalia visibile, considera di racchiuderla in un <figure> con un <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Provalo tu stesso »

L'attributo alt su <input type="image">

Un <input type="image"> è un pulsante di invio grafico. In questo caso l'alt deve descrivere l'azione del pulsante, non l'immagine — ad esempio alt="Submit" o alt="Search" — perché è ciò che un utente deve sapere quando l'immagine non si carica. L'attributo alt è valido su <input> solo quando type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Provalo tu stesso »

Pratica

Pratica
Qual è lo scopo dell'attributo 'alt' in HTML?
Qual è lo scopo dell'attributo 'alt' in HTML?

Argomenti correlati

Was this page helpful?