Comprendere l'importanza degli attributi Alt

Cos'è l' alt e perché è importante?

attributo alt (per testo alternativo) descrive il contenuto di un'immagine nel codice HTML:

In caso di problemi di visualizzazione, questo testo viene visualizzato al posto dell'immagine. Fondamentalmente, viene letto dalle tecnologie assistive (screen reader) e funge da segnale semantico per i motori di ricerca. Se ben scritto, migliora l'accessibilità, l'esperienza utente e la SEO.

Accessibilità: dare significato alle immagini

• Lettori di schermo : il testo alternativo è la descrizione vocale di un'immagine. Senza di esso, l'utente percepisce un messaggio privo di significato: "immagine...".

• Comprensione del contenuto : un buon testo alternativo colloca l'immagine nel contesto editoriale, non in senso assoluto.

• Navigazione : evita i vicoli ciechi (soprattutto per i link alle immagini o le icone dei pulsanti).

Quando usare alt="" (vuoto)

• Immagini decorative che non forniscono alcuna informazione (caratteristiche, sfondi, motivi):

  <img src="ornament.svg" alt="" aria-hidden="true">


  Sono silenziati per non interferire con l'esperienza di lettura.

SEO: un segnale rilevante, ma da gestire con cura

I motori di ricerca non "vedono" i pixel; interpretano ciò che dichiari. Un testo alternativo :

• Fornisce contesto alla pagina e all'immagine (utile per Google Immagini).

• La pertinenza complessiva aumenta se il testo incorpora in modo naturale i termini relativi all'argomento.

• Evitate l'abuso di parole chiave : siate naturali, specifici e concisi.

Buone pratiche di scrittura

1. Descrivi cosa mostra l'immagine + l'intento della pagina.
   Cattivo: alt="immagine di una scarpa"
   Buono: alt="Décolleté nere in pelle a punta, collezione Inverno 2025"

2. Sii conciso : cerca di utilizzare da 5 a 15 parole (o circa 80-140 caratteri, se necessario).

3. Evitate prefissi superflui : niente "foto di", "immagine di", "visuale di" (il lettore di schermo annuncia già che si tratta di un'immagine).

4. Adattarsi al ruolo dell'immagine :

   • Funzionale (link/pulsante immagine): descrivi l'azione, non l'immagine.

     <a href="/cart">img src " " >
<" = " cart.svg alt = carrello >
Visualizza a


   • Logo : utilizzare il nome dell'organizzazione.

     <img src="logo.svg" alt="Maison Dupont">


   • Infografica/grafica : alternativo + didascalia o descrizione dettagliata nelle vicinanze (<figcaption>(link “Scopri di più”).

     <figure>img >
<src = "sales-2024.png" = " 2020-2024, tendenza al rialzo" > <figcaption>
alt Andamento dettagliatidelle vendite Dati nella sottostante
tabella .


5. Linguaggio e precisione : utilizzare il linguaggio della pagina, termini chiari, evitare gergo superfluo.

6. Immagini contenenti testo : se il testo è essenziale (ad esempio, in un poster), includetelo nel testo alternativo o, meglio ancora, nella didascalia accessibile.

Casi speciali frequenti

• Icone decorative nei pulsanti con testo preesistente :

  <button>" >
<img src = "download.svg" alt = "" aria-hidden = true" per scaricare la guida
> Pulsante


• SVG inline : prefer <title> pour l’accessibilité, et role="img" si nécessaire.

• Immagini prodotto variabili : genera dinamicamente un testo alternativo : "Abito midi in seta, blu notte, taglia 38".

Errori comuni da evitare

• Dimenticare l'attributo : è un difetto di accessibilità e un'occasione SEO persa.

• Descrizioni vaghe : "immagine", "foto", "banner".

• Testi troppo lunghi o di marketing ("il migliore sul mercato, incredibile..."): attieniti ai fatti.

• L'eccessivo utilizzo di parole chiave come "borsa di lusso, borsa di lusso da donna, borsa di lusso in pelle" ostacola la comprensione.

Esempi concreti

• Buona pratica

  <img src="plage-coucher-soleil.jpg"
alt="Tramonto su una spiaggia sabbiosa con palme">


• Cattiva pratica

  <img src="plage.jpg" alt="Immagine della spiaggia">


• Collegamento all'immagine

  <a href="/lookbook-ete">img Apri il lookbook " >
<src = " vignette-lookbook.jpg" = " estivo >
alt a


Integrazione e processo editoriale

• Lista di controllo nel CMS : alt , guida contestuale con esempi.

• Formazione del team : progettisti, redattori, integratori, tutti devono conoscere la regola "descrivi l'intento".

• Audit periodici : strumenti di accessibilità/SEO per identificare le immagini senza alt o con alt irrilevante

• Governance : definire chi scrive, chi revisiona e in quale momento (ad esempio, durante il controllo qualità pre-pubblicazione).

Mini check-up in 7 domande

1. L'immagine è informativa o puramente decorativa?

2. Il testo alternativo descrive ciò che è utile nel contesto della pagina?

3. È conciso, naturale, senza "immagine di / foto di"?

4. Nel caso di un link a un'immagine, il testo alternativo descrive l'azione ?

5. Nel grafico, ho aggiunto una legenda o un link ai dati ?

6. La lingua, l'ortografia e la terminologia sono

7. Il testo alternativo impedisce il keyword stuffing ?

Punti chiave da ricordare

L' alt è un piccolo dettaglio con un grande impatto: rende i tuoi contenuti accessibili anche a chi non può visualizzare le immagini, chiarisce il tuo messaggio per i motori di ricercae migliora la qualità complessiva del tuo sito.

Adotta un approccio semplice: descrivi l'intento, sii conciso, distingui tra immagini informative e decorative e stabilisci un processo di verifica. L'accessibilità migliorerà, il posizionamento sui motori di ricerca trarrà vantaggio e l'esperienza utente risulterà più chiara.

Fonte: Leggi l'articolo originale