AI & MCP

Alt text generato e revisionato: tre regole prima del prompt

Un alt text generato descrive quello che il modello vede, non lo scopo dell'immagine. Va revisionato, tenuto sotto i 125 caratteri e svuotato se decorativo.

In sintesi

  • L'alt descrive lo scopo dell'immagine nella pagina, non i pixel che contiene.
  • Un'immagine decorativa vuole alt vuoto, non una descrizione inventata.
  • Il modello non vede la pagina: senza il testo accanto produce didascalie generiche.

Un alt text generato è una bozza: descrive quello che il modello vede, non lo scopo dell'immagine nella pagina. Va revisionato, accorciato e a volte cancellato.

Tre regole che valgono più del prompt

  • Scopo, non pixel: «pulsante per aprire i filtri», non «icona grigia con tre linee».
  • Decorativo, vuoto: se l'immagine ripete il testo accanto, un alt vuoto è la risposta corretta.
  • Corto: sotto i 125 caratteri si ascolta tutto; oltre, il lettore di schermo viene interrotto.
grep -o ']*>' dist/index.html | grep -vc 'alt='

Il comando conta le immagini senza attributo alt in un file HTML costruito: è il primo controllo, non l'ultimo. Un alt vuoto e un alt assente si vedono uguali in pagina e sono due cose diverse nel DOM.

Il giro di revisione

Genera, poi confronta con la pagina: ogni alt che nomina un colore o una forma senza dire a cosa serve l'immagine va riscritto. La revisione costa più della generazione, ed è l'unica parte che migliora il risultato.

import { generateText } from 'ai';

const alt = await generateText({
  model: 'openai/gpt-6-luna',
  messages: [
    {
      role: 'user',
      content: [
        {
          type: 'text',
          text: 'Write alt text under 125 characters. State the purpose, not the pixels. If the image is decorative, answer exactly: decorative.',
        },
        { type: 'image', image: new URL(imageUrl) },
      ],
    },
  ],
  maxOutputTokens: 60,
});

console.log(alt.text);

Cosa non delegare

  • Testo dentro l'immagine: il modello lo trascrive con errori; l'alt deve riportarlo esatto.
  • Nomi propri: una persona o un marchio riconosciuto a metà è peggio di nessun nome.
  • Grafici: un grafico ha bisogno dei dati e della conclusione, non di una descrizione della forma.

La limitazione

Il modello non vede la pagina: senza il testo che sta accanto produce didascalie generiche. E nessuna metrica pubblica misura la qualità di un alt, quindi il controllo resta una lettura umana pagina per pagina.

Dove continuare

Il giro completo di verifica è in audit di accessibilità, gli errori ricorrenti in errori comuni WCAG, il confronto fra librerie headless in Radix, Base UI e React Aria. I record: 12.808 icone, 111.985 componenti, 1.556 blocchi.

Domande frequenti

Posso pubblicare un alt text generato senza rileggerlo?

No. Il modello descrive ciò che vede e non sa a cosa serve l'immagine in quella pagina, quindi sbaglia proprio la parte che conta. Rileggi sempre e riscrivi quando l'alt non spiega lo scopo.

Quanto deve essere lungo un alt text?

Sotto i 125 caratteri nella maggior parte dei casi: una frase che dice cosa fa l'immagine. Le immagini con dati, come un grafico, hanno bisogno di una descrizione più lunga e di una tabella equivalente nel testo.

Quando l'alt deve restare vuoto?

Quando l'immagine è decorativa o ripete il testo che sta accanto. Un alt vuoto è esplicito per il lettore di schermo; un alt assente è un errore di markup.

Quanto costa generare l'alt di un catalogo di immagini?

Dipende dai token dell'immagine e del prompt. Con gpt-6-luna a 0,10 $ per milione di token in ingresso e 0,50 $ in uscita, il costo per immagine resta basso, ma trenta caratteri di risposta non valgono il risparmio di una revisione saltata.

L'alt text migliora la SEO?

Aiuta la comprensione dell'immagine e l'accessibilità, non la posizione. Un alt pieno di parole chiave viene ignorato dai motori e letto ad alta voce agli utenti, che è peggio.