Il testo alt delle immagini prodotto è utile se spiega a chi fa acquisti che cosa apporta una determinata immagine: l’aspetto di un prodotto, un dettaglio mostrato in un’altra vista o lo scopo di un controllo basato su un’immagine. Il testo alt è un’alternativa testuale che software come uno screen reader possono usare per descrivere un’immagine. Parti dal suo scopo nella pagina, poi controlla il testo nel negozio effettivo dopo averlo salvato.
Una galleria può sembrare chiara anche se ogni immagine usa come testo alt lo stesso titolo del prodotto. La vista frontale, il dettaglio della chiusura e la variante di colore perdono così nel testo le proprie differenze. Suggeriamo di esaminare la galleria di un prodotto come un piccolo lavoro editoriale: chi cura il catalogo controlla il testo e chi gestisce il negozio controlla il risultato.
Perché il testo alt delle immagini prodotto perde dettagli utili
La descrizione utile dipende dal ruolo dell’immagine e dal contenuto circostante. Le indicazioni del W3C sulle immagini informative chiedono agli autori di comunicare le informazioni rilevanti nel contesto. Ripetere un titolo, un nome file o una frase di ricerca in tutta la galleria può tralasciare la caratteristica che una determinata fotografia dovrebbe mostrare. Compilare il campo è solo una parte del lavoro.
Il nome del prodotto viene considerato sufficiente. Un nome identifica l’articolo, ma un primo piano può aggiungere il dettaglio di una chiusura o di una tasca. Osserva che cosa apporta la fotografia oltre al titolo e alla descrizione vicina.
La funzione dell’immagine viene ignorata. Una fotografia può anche essere un link o un pulsante della galleria. Le indicazioni del W3C sulle immagini funzionali includono nel processo decisionale l’azione o la destinazione. Il nome accessibile, ossia l’etichetta ricevuta dalla tecnologia assistiva per quel controllo, deve renderne comprensibile lo scopo.
La voce salvata viene considerata il risultato finale. Mantieni il campo amministrativo e la pagina visualizzata come due punti di controllo distinti. In caso di importazione, immagine riutilizzata o logica personalizzata del tema, occorre esaminare l’output renderizzato, cioè ciò che la pagina interessata del negozio espone davvero, prima di modificare l’intero catalogo.
Anche le indicazioni di Google per le immagini mettono in guardia dal riempire le alternative di parole chiave. Scrivi per spiegare il dettaglio o l’azione di cui ha bisogno chi acquista; un elenco di termini di ricerca non fornisce tale spiegazione.
Decidi che cosa aggiunge ogni immagine
Esamina l’immagine insieme al testo circostante e all’eventuale link o pulsante di cui fa parte. Chiediti quali informazioni o quale azione diventerebbero poco chiare senza di essa. L’albero decisionale del W3C distingue tra usi informativi, funzionali e decorativi; per un’immagine riutilizzata altrove serve un’altra decisione contestuale. Una vista successiva della galleria non è automaticamente decorativa solo perché il titolo del prodotto è già apparso.
Considera un ipotetico negozio che vende una borsa a tracolla blu. Questi sono esempi di testo inventati, non descrizioni verificate rispetto a un catalogo reale.
| Posizione | Decisione da esaminare |
|---|---|
| Vista frontale | Descrivi l’aspetto visibile pertinente, per esempio una borsa blu con patta curva. |
| Primo piano della chiusura | Descrivi il dettaglio visibile della chiusura aggiunto da questa vista. |
| Colore diverso | Fai corrispondere la descrizione alla fotografia e alla variante selezionata. |
| Controllo della galleria composto solo da un’immagine | Rendi comprensibile l’azione del controllo, per esempio l’apertura della vista della chiusura. |
| Ripetizione puramente decorativa | Valuta un’alternativa intenzionalmente vuota dopo aver controllato informazioni e funzione. |
Un’alternativa vuota è un attributo alt="" intenzionale. Le indicazioni del W3C sulle immagini decorative distinguono questa scelta dall’omissione dell’attributo. Per l’immagine di una scheda prodotto inserita in un link, un testo adeguato all’interno dello stesso link può rendere appropriata un’alternativa vuota. Un titolo del prodotto separato e vicino non assegna automaticamente il proprio nome a un link composto solo da un’immagine.
Mantieni le informazioni dettagliate su misure o montaggio disponibili come contenuto accessibile della pagina. Le indicazioni del W3C sulle immagini complesse richiedono una spiegazione testuale più completa quando un’alternativa breve non riesce a comunicare le informazioni. Evita di comprimere le istruzioni di un diagramma in una breve descrizione eliminando tutto il resto.
Scrivi e salva un campione verificato
Prepara un campione da controllare prima di applicare il metodo all’intero catalogo. Noi useremmo una scheda con URL della pagina, lingua, variante selezionata, riferimento dell’immagine, scopo, testo proposto e risultato della verifica. Una miniatura o un riferimento chiaro al contenuto multimediale aiuta chi esamina la riga ad associarla all’immagine effettiva, senza fare supposizioni basate sul nome file.
- Registra il contributo dell’immagine. Scrivi che cosa serve a chi acquista da questa vista e che cosa fornisce già il testo vicino. Indica se l’immagine fa parte di un link o di un pulsante.
- Prepara una breve alternativa. Mantieni il dettaglio visibile distintivo. Verifica il colore e gli altri fatti pertinenti sulla fotografia e sulla voce di catalogo corrette; non dedurre dall’aspetto materiale, capacità o certificazione.
- Esamina i suggerimenti prima di accettarli. Una descrizione generata è una bozza. Chiedi a chi cura il prodotto di controllare ciò che dice e lo scopo a cui serve, compresi la variante e la lingua selezionate.
- Controlla i valori esistenti non spiegati. Se il campo contiene codici di magazzino o una formattazione insolita, chiedi a chi gestisce il sito se vi fa affidamento una logica personalizzata della galleria. Prova le modifiche in un’anteprima autorizzata o in un altro campione reversibile prima di sostituire quei valori in blocco.
- Salva tramite il campo multimediale pertinente. L’attuale guida desktop di Shopify indica di aprire Prodotti, il prodotto e poi il relativo elemento multimediale. Scegli Aggiungi testo alt, inserisci il testo esaminato e seleziona Salva testo alt. Questo percorso riguarda i contenuti multimediali del prodotto; le immagini nelle descrizioni o nelle sezioni del tema possono avere un’altra posizione di modifica.
- Passa i problemi di implementazione a chi gestisce il sito. Se il campo o il controllo non può esprimere lo scopo richiesto, fornisci la pagina, il riferimento dell’immagine e il risultato desiderato. Nel nostro lavoro sui siti ecommerce proposto, questo passaggio separa la decisione sul contenuto dalla modifica del tema e dalla relativa verifica.
Controlla il negozio prima di cambiare il catalogo
Dopo il salvataggio, apri la pagina interessata del negozio e controlla la posizione esatta che hai modificato. Conferma l’alternativa dell’immagine, il nome accessibile di ogni controllo di cui fa parte e che cosa accade quando cambi variante o vista della galleria. Se non puoi fare personalmente queste verifiche, chiedi a chi gestisce il sito di mostrarti l’output confrontandolo con la tua scheda prima di estendere la modifica.
- Associa l’immagine effettiva. Usa gli strumenti di ispezione del browser, oppure chiedi a chi gestisce il sito, per leggere l’attributo
altdell’immagine renderizzata. Confrontalo con il testo preparato e con la fotografia visualizzata in quel momento. - Controlla il nome e l’azione del controllo. Per un link o un pulsante, esamina sia l’etichetta esposta alla tecnologia assistiva sia l’alternativa dell’immagine. Verifica che l’azione o la destinazione dichiarata corrisponda a ciò che accade quando attivi il controllo. La sola descrizione dell’immagine potrebbe non determinare il nome completo del controllo.
- Cambia vista e variante. Apri il dettaglio della chiusura, seleziona un altro colore visibile e controlla di nuovo l’output corrispondente. Se una descrizione resta associata all’immagine sbagliata, registra per chi gestisce il sito l’esatta sequenza.
- Riapri la pagina e la lingua pertinente. Controlla che la modifica salvata sia ancora presente nella posizione prevista. Registra separatamente i casi irrisolti, compresi quelli in cui occorre esaminare un processo di importazione o traduzione.
Un’ispezione nel browser verifica l’implementazione; una verifica qualificata con screen reader può esaminare l’attività di acquisto con quella tecnologia assistiva. Mantieni chiaro l’ambito di ogni verifica. Easy Checks del W3C avverte che le verifiche preliminari non sono definitive, quindi né un campo compilato né questo campione dimostrano l’accessibilità dell’intero negozio. I nostri primi controlli di accessibilità del sito riguardano attività più ampie, come l’uso della tastiera e i moduli.
Mantieni corrette le alternative dopo la modifica
Assegna la responsabilità del testo sorgente e ripeti la verifica pertinente quando cambiano la fotografia, la variante, la lingua, il tema o l’importazione. Se più sistemi alimentano il catalogo, individua quello che controlla il campo. Noi includeremmo questa mappatura in un flusso di integrazione tra catalogo e CRM prima di estendere modifiche manuali che un altro processo potrebbe sostituire.
Tieni traccia delle posizioni esaminate, del testo confermato nel negozio e dei casi irrisolti. Queste registrazioni mostrano il lavoro completato e ciò che richiede ancora attenzione. Non misurano un effetto sulle vendite. Conserva insieme il riferimento dell’immagine, il testo attuale, chi lo cura e l’evento che richiede la prossima verifica, affinché un’altra persona possa mantenere la stessa decisione.
Dove interveniamo noi
Partiremmo dalle viste di un prodotto e concorderemmo ciò che ognuna deve comunicare. Il passaggio di consegne collega poi il testo editoriale alla posizione di salvataggio, all’output del negozio e a ogni comportamento irrisolto dei controlli. Inizia la tua scheda con un prodotto la cui galleria mostra dettagli distinti e controlla il campione prima di estenderlo.
