Testo Alt / Tag Alt / Attributo del testo

o

.

Nessuno di questi testi alternativi è consigliato. La prima riga non contiene alcun testo alternativo e la seconda è ovviamente parole chiave di riempimento o accumulo di parole chiave

Esempio di testo Alt descrittivo (consigliato):

.

Questo testo descrittivo è il miglior Attributo Testo per questa immagine, come descrive con precisione ciò che l’immagine riflette. Non si tratta di un semplice noodle come descritto nella prima immagine, ma di un noodle cinese con pollo e verdure.

1.3) Come si scrive un buon testo alternativo?

Una cosa è sapere come scrivere un testo alt, un’altra cosa è saperlo scrivere bene. Per scrivere un buon testo alt, deve :

1.3.1. Descriva l’immagine

Prima di tutto, il testo alt fornisce una descrizione chiara delle immagini agli utenti che non possono visualizzarle per un motivo o per l’altro

Per questo è necessario comprendere il contesto dell’immagine e il messaggio che trasmette, per poterlo descrivere meglio

Esempi di testo alternativo:

• “Gruppo musicale che suona in un bar”
• “Due cuccioli che corrono in un parco
• “Un bambino che giace in un canguro

Se le immagini che inserisce nei suoi contenuti non hanno alcun significato, oppure se sono lì per motivi di designquesto non dovrebbe essere il caso. Si consiglia di inserire queste immagini nel suo CSS e non nel suo HTML

Se non è possibile cambiare l’immagine, le consigliamo di dare loro un’immagine vuota testo alt come:

Il tag alt vuoto assicura che l’utente ignori la presenza di un’immagine (torneremo su questo punto nel prossimo capitolo).

1.3.2. Mantenga il testo alt conciso

Il strumenti di lettura dello schermo o browser gli strumenti o i browser generalmente considerano 125 caratteri per un testo alternativo. Pertanto, si raccomanda di non superare questo numero o rimanere al di sotto di esso in modo che il suo testo venga considerato e compreso.

A volte possiamo pensare che gli utenti di screen reader debbano conoscere tutti i dettagli dell’immagine dettagli sull’immagine per esempio

• Età
• Ambiente
• Il tipo di abbigliamento indossato
• Su quale mobile è seduta una persona
• I tipi di vegetazione intorno

È vero che un solo sguardo è sufficiente per catturare tutte le informazioni importanti in un’immagine per una persona con una buona vista

È lo stesso è la stessa sensazione che cerchiamo di riprodurre con testi alternativi. Ma sia conciso sui testi alternativi, fornendo al contempo informazioni importanti.

1.3.3. Utilizzi le sue parole chiave

Il testo Alt le offre l’opportunità di inserire il suo parole chiave parole chiave. Questa è un’altra opportunità per lei di dire al motore di ricerca che la pagina che ha creato è di alta qualità ed è in grado di soddisfare una specifica query di ricerca query di ricerca.

Il suo obiettivo deve rimanere lo stesso rispetto ai testi alternativi: spiegare il contesto di un’immagine in termini concreti. Quindi, dopo che il contesto dell’immagine è stato sufficientemente compreso, può semplicemente aggiunga una parola chiave di sua scelta.

Il motore di ricerca non le rinfaccerà un testo alternativo scritto male. Ma se utilizza il suo testo alt come un’opportunità di la riempie con tutte le parole chiave utili che le vengono in mentepuò ottenere delle sanzioni

Altrimenti, si concentri sulla stesura di un ottimo testo di descrizione dell’immagine e, se possibile, includa la sua parola chiave e questo è tutto. Non faccia nient’altro che possa influenzare il suo sito o la sua pagina.

1.3.4. Non usi un’immagine come testo

Questa non è necessariamente una tecnica migliore per scrivere un testo alternativo

Motori di ricerca i motori di ricerca non capiscono molto bene il testo delle immagini, pertanto, dovrebbe evitare di sostituire i testi con le immagini. Questo è particolarmente importante se vuole che i motori di ricerca tengano conto di questi testi

Tuttavia, se vuole farlo, descriva cosa dice l’immagine nel testo alternativo.

1.3.5. Eviti di inserire nel testo alternativo “immagini di tali e quali”

Non è consigliabile iniziare un testo alternativo con “immagine di“, “immagine dio qualsiasi altra formulazione simile”.

Tenga presente che il lo screen reader inizia a leggere un testo alternativo qui. Quindi, per non far sì che il lettore di schermo ripetizioni come “immagine di immagine di”, che è meno piacevole da ascoltareeviti di iniziare il suo tag alt da lì.

Dovrebbe già considerare che il testo alt vuole descrivere il contesto di un’immagine. Pertanto, non è più necessario specificarlo

1.3.6. Eviti di scrivere moduli con pulsanti

Quando il <&lt presentare >> Il pulsante di un modulo sul suo sito web è un’immagine, la inserisca in un attributo alt

L’attributo alt del pulsante specificherà al lettore la funzione del pulsante “ condividere su “ o “ ricerca “… In questo modo sarà ancora più facile da leggere.

1.3.7. Eviti di usare il titolo dell’immagine

Scopriamo diversi tipi di interfacce di gestione delle immagini che presentano titoli di immagini oltre a testi alternativi. Le consigliamo di non scrivere titoli per le immagini, perché nessuno li usa.

Innanzitutto, questi titoli non non funziona sui touch screen. Inoltre, i computer richiedono che lei utilizzi uni computer richiedono l’uso del mouse di lasciare il puntatore sul titolo prima che appaia, cosa che nessuno fa

Inoltre, quando si aggiunge un titolo di testo, si ottengono due tracce su alcuni screen reader alcuni screen reader su due tracce il testo alternativo e il titolo dell’immagine. Questo la rende una ripetizione

Ecco perché è una buona idea non intitolare le immagini e scrivere solo l’attributo testo.

1.4. Le macchine possono scrivere testi alternativi?

Anche se intelligenza artificiale e automatico rilevamento automatico possono descrivere accuratamente un articolo, ma non sono ancora in grado di capire il contesto di una capire il contesto di un’immagine

Anche se i computer sono molto bravi, non hanno ancora le capacità di rendere conciso un testo illustrato. O fornisce una descrizione molto dettagliata dell’immagine o è il contrario, la descrizione è molto scarsa

Facebook, invece, dispone di una funzione che fornisce una descrizione automatica delle immagini, ma anche in questo caso è una descrizione molto breve che non tiene conto del contesto.

Esempio di descrizione su Facebook: << cavallo all'interno >>

In realtà, l’immagine mostrava un cavallo che galoppava in un ranch. Non è un testo alternativo molto veritiero, vero?

Per questi motivi, dovrebbe scrivere i suoi testi alt da solo, in modo da assicurarsi della sua qualità.

È importante utilizzare testi alternativi, perché migliora la comprensione di tutti gli utenti di Internet. Tuttavia, in alcuni casi particolari è meglio evitarlo

Capitolo 2: Quando si dovrebbero evitare i testi alternativi?

In generale, è importante, persino obbligatorio, utilizzare un testo alternativo per le immagini. Tuttavia, va detto che esiste un’eccezione a questa regola

Ci sono casi in cui è consigliabile lasciare vuoto il campo del testo alternativo.

Vale la pena ricordare che l’attributo alt non deve essere rimosso, in quanto potrebbe danneggiare lo standard HTML. Ma può semplicemente mantenere il campo vuoto

Esempio:

Alt=””

Ecco i casi in cui dovrebbe lasciare il testo alt vuoto.

2.1. Ripetizione di immagini nei feed

Supponiamo che stia scorrendo il suo feed di Twitter. Ma ogni volta che si vuole visualizzare un tweet recente, si è costretti a sentire prima lo screen reader dire “immagine del profilo dell’utente”, “nome utente della persona che ha fatto il post”

Siamo tutti d’accordo che questo sarebbe molto insopportabile per chiunque

Altri tipi di alimentazione:

• Link agli articoli;
• Feed di messaggistica;
• Alimentazioni per i commenti.

Pertanto, per facilitare l’accesso agli utenti, è ideale lasciare il testo alternativo vuoto per immagini che appaiono ripetutamente nei feed.

2.2. Aggiunta di testo alle icone

Le sue icone devono sempre essere seguite da un testo. Solo l’uso di testi alternativi richiede delle condizioni. Se prendiamo l’esempio dei pulsanti dei social network:

Se aggiunge un testo alt a un’icona di Instagram, uno screen reader dovrà leggere qualcosa come:”Instagram Instagram“Suona male, naturalmente

È vero che ovviamente questo testo non è alternativo. Deve essere sicuro che l’icona e il testo del link sono combinati nello stesso link alt, per un utilizzo molto più flessibile

Quindi, dovrebbe lasciare il campo del testo alt vuoto, come in questo caso:

HTML

Parlando di icone, abbiamo anche i pulsanti del Menu

Fonte Icona-biblioteca

Innanzitutto, dobbiamo distinguere un’icona semplice da un’icona con un’etichetta

Considerando l’immagine qui sopra, l’icona semplice è la prima che non ha la menzione “Menu”, l’altra rappresenta ovviamente le icone del Menu e le loro etichette.

Quando un pulsante di menu non ha un’etichetta, cosa che tra l’altro è sgradevole per i lettori, il menu ha bisogno di un testo alternativo

Tuttavia, deve descrivere la funzione dell’icona, scrivendo “Menusemplicemente scrivendo “Menu”. Non metta “tre barre orizzontali o “Incrocioo qualsiasi altra descrizione simile”.

Tuttavia, se l’etichetta appare sull’icona Menu, può lasciare il testo alternativo vuoto. Gli screen reader spesso leggono i pulsanti Menu come “menu dal menu”. Questo è probabilmente il risultato di la combinazione di un’icona etichettata e di un testo alt.

2.3. immagini e link

Le immagini e i link di solito si completano a vicenda. In queste condizioni, il link e l’immagine si trovano negli stessi attributi alt dell’HTML. Poiché il link contiene del testo, il testo alt dovrebbe essere lasciato vuoto. Ciò che è essenziale per i lettori è poter vedere il testo del link

Alternare il testo in un’immagine con un link non farà altro che aggiungere altre frasi. L’attributo text rischierebbe di ripetere le stesse descrizioni del testo del link

Quindi, può semplicemente fornire una spiegazione adeguata nel testo alt del link, in modo che gli utenti non si ritrovino con due informazioni simili.

2.4. Immagini decorative

Come abbiamo detto nel capitolo precedente, le immagini che non hanno alcun valore per il lettore dovrebbero essere rimosse dall’HTML e spostate nel CSS o nello sfondo

Per quanto riguarda le immagini decorative, si tratta di immagini che non forniscono alcuna informazione agli utenti e dovrebbero essere spostate nei CSS. L’esempio dell’immagine di sfondo di Netflix:

Per questo tipo di immagini, non è necessario un testo alt.

2.5. Testo e logo alternativi

Di solito i loghi che si trovano a livello di intestazione sono legati alla homepage del sito web

Per alcuni, il testo alt per i loghi dovrebbe specificare il nome dell’azienda e la natura dell’immagine (che si tratta di un logo)

Esempio: << Netflix, logo, vai alla homepage >> .

Per noi, questo testo è troppo completo, perché uno screen reader segnala già che si tratta di un’immagine (logo) e che si tratta di un link che indirizza a una homepage

Quindi, dobbiamo solo menzionare il nome dell’azienda. Per il resto, l’utente deve indovinare che si tratta di una logo e un link.

Ora sappiamo quando evitare di usare testi alternativi. Tuttavia, sapeva che è più facile aggiungere il testo alt a WordPress ?

Capitolo 3: Come si applica il testo alt a WordPress?

Prima di continuare con questo argomento, dobbiamo prima affrontare un punto essenziale. Sapeva che il testo alt può dare alla sua pagina una spinta SEO?

3.1. testo alt delle immagini e SEO

L’uso di tag alt sulle sue immagini non solo la aiuterà a soddisfare meglio le aspettative dei suoi utenti, ma potrà anche ottimizzare le sue possibilità di essere trovato

Sebbene la tecnologia di riconoscimento delle immagini di Google sia migliorata nel corso degli anni i crawler hanno ancora problemi a visualizzare le immagini nel modo in cui le visualizziamo noi

Quindi, non è consigliabile affidare tutta l’interpretazione delle sue immagini a questi robot, perché se sbagliano, lei potrebbe perdere la posizione in classifica.

Quindi tutto si riduce al gioco che lei fa con la pertinenza del suo testo alt e il parola chiave di destinazione usato

Infatti, l’uso di parole chiave a questo livello non farà altro che rafforzare la pertinenza del suo contenuto sul tema in questione con Google.

Inoltre, sarà ben posizionato nell’immagine di Google quando gli utenti cercano immagini per vari motivi. Questo le offre un’altra fonte di traffico

3.2. Come aggiungere un testo alternativo a WordPress

WordPress è un CMS che rende facile l’inserimento degli attributi alt

Per farlo correttamente, segua questi passaggi per aggiungerlo alle sue immagini. Questo può giovare al suo SEO e agli utenti che non possono vedere le immagini.

• Acceda al sito WordPress Una volta effettuato l’accesso, vada alla sua <>;
• Apra la sua libreria multimediale ;

• Clicchi sulle immagini per accedere alle opzioni :

Capitolo 4: Altre domande poste sul testo Alt

4.1. Che cos’è il testo alt per le immagini?

Si tratta di una breve descrizione scritta di un’immagine, che dà un senso a quell’immagine quando non può essere visualizzata per qualche motivo. Un testo alt ben scritto è importante per l’accessibilità del suo sito web e per l’ottimizzazione dei motori di ricerca (SEO).

4.2. Che cos’è l’attributo ALT in HTML?

Utilizzando l’attributo Alt, può inserire una descrizione alternativa per ogni immagine sul sito web nel codice HTML. Questa descrizione appare quando l’immagine non può essere visualizzata per qualche motivo.

4.3. Che cos’è un attributo ALT vuoto?

I tag Alt sono utilizzati per descrivere il contenuto delle immagini, ma alcune immagini non trasmettono alcun significato e sono quindi considerate “decorative”. Le immagini decorative non devono essere annunciate dallo screen reader, quindi se l’attributo alt è vuoto (alt = “”) non verrà annunciato all’utente.

4.4. Che aspetto ha un testo alt dell’immagine?

Il testo Alt viene aggiunto al tag nell’HTML di una pagina. Ecco un esempio di testo alt dell’immagine

.

4.5. Perché il tag Alt Text è importante per la SEO?

Utenti: Il tag alt descrive l’immagine o almeno indica ciò che l’immagine sta cercando di trasmettere alla persona che visualizza la pagina. Inoltre, questo tag consente agli utenti ipovedenti di conoscere lo scopo dell’immagine attraverso lo screen reader.

Motori di ricerca: Quando utilizza un attributo alt ottimizzato con una parola chiave target, aumenta la rilevanza della sua immagine. Il contenuto del testo alt è un segnale utile ai motori di ricerca per capire di cosa tratta la sua pagina.

4.6. Il testo alt dovrebbe essere una parte fondamentale della mia strategia SEO?

Sì, perché è una facile opportunità per migliorare l’accessibilità e l’esperienza dell’utente. L’ottimizzazione delle immagini con il testo alternativo fornirà una maggiore rilevanza ai motori di ricerca per i suoi contenuti e contribuirà a portare traffico al suo sito.

4.7. Come scrivere un buon testo alt?

• Sia specifico e conciso
• Descriva il contenuto dell’immagine senza scrivere troppo
• Non inizi mai con “Immagine di…” ;
• Utilizzi le parole chiave con parsimonia;
• Includa il testo che fa parte dell’immagine;
• Non ripetere;
• Non aggiunga testo alternativo alle immagini “decorative”.

4.8. Quale dovrebbe essere la lunghezza ideale di un tag ALT?

Sebbene il tag ALT debba essere descrittivo, deve anche essere breve. Non devono essere frasi o paragrafi completi. Con un limite di circa 125 carattericon un limite di circa 125 caratteri, un tag ALT dovrebbe fornire dettagli sufficienti agli utenti e ai motori di ricerca per associare l’immagine al contesto della pagina.

4.9. Come posso aggiungere il testo alt a un’immagine in Google doc?

Per aggiungere il testo alt a un’immagine nel suo documento Google, ha due opzioni:

• Clicchi sull’immagine e digiti Ctrl+Alt+Y
• Posizioni il suo cursore sull’immagine e clicchi sul pulsante destro del mouse. Poi scelga ”Testo alternativo” e aggiunga un titolo e una descrizione per la sua immagine.

4.10. Come faccio a sapere se un’immagine contiene un testo alt?

Ci sono due modi semplici per vedere se un’immagine su un sito web contiene un testo alt.

Può verificare se un’immagine ha un attributo di testo attivando uno screen reader e selezionando l’immagine per sentire come viene descritta.

Può anche ispezionare l’HTML dell’immagine in qualsiasi browser, cliccando con il tasto destro del mouse su di essa e scegliendo “Ispeziona”.

4.11. dove devo posizionare i tag alt?

È sufficiente aggiungere un attributo alt al file tag nel codice HTML. Se utilizza un CMS moderno, ha la possibilità di aggiungere il testo alt senza dover scavare nel codice HTML. Per esempio, in WordPress, c’è un campo per il testo alternativo quando aggiunge un’immagine a una pagina o a un post: la procedura è simile in altri CMS. (Vedere maggiori dettagli nel capitolo 3)

4.12. I tag alt e title possono essere identici?

La somiglianza del titolo e del valore alt può portare ad un aumento della densità delle sue parole chiave. Questo potrebbe portare i motori di ricerca a considerare il suo sito come spam. Pertanto, è molto importante specificare il valore alt in modo diverso dal titolo.

4.13. Che cos’è il testo alt in Shopify?

Quando un elemento multimediale non può essere visualizzato per qualche motivo, il testo alt viene visualizzato al suo posto. Consente anche di descrivere un’immagine o un prodotto a un cliente ipovedente che utilizza una tecnologia di assistenza.

4.14. Quando il testo alt viene visualizzato al posto dell’immagine?

Ci sono diverse situazioni in cui il testo alt può essere visualizzato al posto di un’immagine

• Quando Internet si carica troppo lentamente
• Quando utilizza un browser per ipovedenti (ad esempio MozBraille)
• Quando c’è uno speciale lettore di schermo che le dice letteralmente cosa c’è nell’immagine.

4.15. Che cos’è il testo alt per Instagram?

Il testo Alt è una breve frase utilizzata per identificare le immagini, solitamente nelle pagine web. Ma con lo sviluppo dei social media, il tag alt viene spesso aggiunto alle immagini caricate sulle piattaforme sociali

Quando un’immagine non viene caricata, il testo descrittivo che appare al posto dell’immagine rappresenta il testo alt che è stato aggiunto a quell’immagine.

4.che cos’è l’attributo testo automatico in Facebook?

L’attributo di testo automatico utilizza la tecnologia di riconoscimento del testo, del volto e degli oggetti per creare una descrizione di un’immagine per la comunità dei non vedenti e degli ipovedenti. Per ascoltare l’attributo testo automatico di un’immagine, apra Facebook con uno screen reader e si concentri sull’immagine.

4.17. Qual è la differenza tra testo alt e descrizione?

Il testo Alt fornisce all’utente le informazioni più importanti, mentre le descrizioni delle immagini forniscono maggiori dettagli. Per esempio, il testo alt dice a qualcuno “c’è una pozzanghera per terra”, mentre la descrizione dell’immagine dice “la pozzanghera per terra è al centro del terreno ed è succo d’arancia”.

4.18. Quali sono gli errori più comuni nell’uso del testo alternativo all’immagine per fermarsi?

• Uso della parola ‘immagine’;
• Non ripetere il testo in un’immagine;
• Utilizza il testo alt per le immagini o gli oggetti decorativi;
• Ripetizione dello stesso testo nella didascalia e nel testo alt;
• Utilizzo di “logo aziendale” come attributo di testo;
• Non usando un linguaggio semplice;
• Non utilizzare l’ortografia o la punteggiatura corretta;
• Non riveda o aggiorni mai il testo.

Sommario

I testi alternativi sono molto importanti. Forniscono informazioni aggiuntive agli utenti di Internet, in particolare a coloro che sono ipovedenti e non possono visualizzare le immagini.

Il vero scopo di questi testi è descrivere la presentazione di un’immagine e il suo contesto. Devono essere scritti in un certo modo, tenendo conto delle parole chiave, delle informazioni precise e concise.

I testi alternativi potrebbero non essere indicati sulle immagini in alcuni casi, come ad esempio le ripetizioni di immagini e altri già citati.

Inoltre, questi testi possono partecipare attivamente alla referenziazione di una pagina. Google può infatti utilizzare la parola chiave inserita nel testo e la qualità dell’immagine per indicizzare meglio una pagina o un sito

Ci auguriamo che il termine testo Alt / Tag Alt / Attributo di testo non sia più un problema per lei.

A presto!