Google spiega il testo alternativo per loghi e pulsanti
Pubblicato: 2022-11-01In un podcast Google Search Off the Record, Lizzi Sassman e John Mueller di Google discutono del modo migliore per gestire il testo alternativo per i loghi e i pulsanti basati su immagini.
Esistono procedure consigliate per aggiungere attributi alt a loghi e pulsanti.
Le regole possono sembrare un po' complicate all'inizio, ma in realtà sono semplici da capire.
Ottenere gli attributi alt corretti è positivo per gli utenti e a lungo termine è ottimo per i guadagni.
Aggiunta di testo alternativo alle immagini funzionali
Lizzi Sassman inizia la discussione facendo riferimento a immagini funzionali, immagini che hanno uno scopo funzionale sulla pagina web.
Chiede se il testo alternativo deve descrivere cosa fa il pulsante o qual è l'immagine sul pulsante nella situazione in cui un pulsante è un'icona.
Infine, chiede se c'è uno scopo SEO nell'aggiungere testo alternativo a immagini funzionali come i pulsanti.
“Lizzi Sassman:
…Il livello di cura in cui dedichiamo alla risorsa visiva, dovremmo anche mettere lo stesso livello di energia nelle parole che descrivono anche quella risorsa. Che penso sia fantastico.Un'altra categoria di immagini è come la cosa funzionale, che a volte potrebbe essere un pulsante.
Come se fosse un grafico che funziona anche come qualcosa.
Quindi il testo alternativo dovrebbe dirmi cosa sta per accadere?
Se fai clic su questo, ti porterà qui?
Potrebbe essere come un'immagine di qualcosa, che poi funziona anche come un pulsante.
E descrivi la funzione, o come fosse anche, non so... come un'immagine di una freccia?
E inoltre, è importante per la SEO?
John Mueller:
Sì. Penso…Lizzi Sassman:
Potrebbe essere come un logo.John Mueller:
Per l'accessibilità, probabilmente ha senso, semplicemente fare qualcosa al riguardo.Ma per la SEO, le persone non cercheranno il pulsante di pagamento o qualcosa del genere".
Il testo alternativo sui pulsanti è per l'accessibilità non per la SEO
John Mueller chiarisce che non esiste uno scopo SEO per aggiungere testo alternativo ai pulsanti.
Ma ha anche osservato che il testo alternativo per questo tipo di immagini è principalmente per motivi di accessibilità.
Lizzi ha continuato la discussione:
“Lizzi Sassman:
...Ma forse lo farebbero per il logo, o qualcosa di simile al logo. Quando fai clic su di esso, ti porta alla home page o qualcosa del genere.Ma è anche: "Oh, è un logo".
Quindi dici "Questo è il logo di Google Search Central".
John Mueller:
Sicuro.Lizzi Sassman:
O come quello che sarebbe un testo descrittivo.È Googlebot nel logo, ma la cosa più importante da sapere sull'immagine è il fatto che sia un logo?
O come appare il logo?
Immagino che da quel punto di vista le persone stiano probabilmente cercando il logo.
John Mueller:
Sì.Lizzi Sassman:
Ad esempio, qual è il logo dell'azienda X, forse?
John Mueller:
Sì. Voglio dire, risale a una sorta di strategia che stiamo cercando di evitare.Per cosa vuoi essere trovato?
Lizzi Sassman:
Sì, ma questa è la domanda più importante, immagino, perché poi in qualche modo dirige...Posso lasciarmi trasportare da tutte queste tane del coniglio, quindi in qualche modo, non lo so, dà la priorità a quali sono le cose a cui dovremmo pensare, perché non è necessario scrivere tutte le cose per queste cose, Credo."
L'uso corretto del testo alternativo su loghi e pulsanti
Il modo corretto di utilizzare il testo alternativo su immagini come i loghi dipende in realtà dal fatto che l'immagine sia un collegamento o meno.
Se l'immagine del logo funziona come un collegamento alla home page, è corretto etichettare quell'immagine con la funzione che ha, in modo che un visitatore del sito che utilizza uno screen reader non possa che questo logo sia un collegamento alla home page.
Il World Wide Web Consortium (W3C), l'ente ufficiale per la creazione di standard HTML, pubblica una spiegazione su come gestire i loghi.
Link alla home page del logo
Un logo che funge da collegamento alla home page deve contenere un testo alternativo che indica a un utente di screen reader che il logo è un collegamento alla home page.
Il W3C utilizza questo esempio di codice:
<a href="https://www.w3.org/"> <img src="w3c.png" alt="W3C home"> </a>
Il codice sopra è per un logo che si potrebbe incontrare nella parte superiore della pagina che funge anche da collegamento alla home page.
L'esempio di testo alternativo fornito dal W3C dice semplicemente "W3C home", ma potrebbe essere più descrittivo se lo desideri.
Logo e link alla home page di testo
Esistono altri tipi di link del logo in cui è presente un logo dell'immagine e un testo proprio accanto o sotto di esso e sia l'immagine che il testo sono codificati all'interno dello stesso codice di collegamento.
In altre parole, non ci sono due collegamenti come un collegamento per il logo e un collegamento per il testo, è solo un collegamento per il logo e il testo insieme.
In tal caso, poiché il testo descrive la funzione del collegamento, sarebbe ripetitivo ripetere la funzione del collegamento del logo.
Quindi, in tal caso, la migliore pratica è utilizzare un testo alternativo nullo.
Questo è l'esempio fornito dal W3C:
<a href="https://www.w3.org/"> <img src="w3c.png" alt=""> Casa del W3C </a>
Nota come l'attributo alt è codificato per l'immagine:
img src="w3c.png" alt=""
Le virgolette vuote per il testo alternativo sono chiamate attributo alt null (o testo alternativo nullo). Uno screen reader lo salterà semplicemente.
Il motivo per cui un testo alternativo nullo è buono è perché c'è del testo che descrive qual è la funzione di collegamento:
W3C casa
Testo alternativo per un collegamento icona
A volte un collegamento ha la forma di un'icona, senza testo per spiegare cosa fa, ad esempio un'icona a forma di busta (che rappresenta un'e-mail o un messaggio) o una stampante (che indica che il collegamento attiva una stampante).
Per questa situazione è una cattiva pratica descrivere che cos'è l'immagine (come una busta o una stampante).
La migliore pratica è descrivere ciò che fa l'immagine (avviare un'e-mail o stampare una pagina web).
Il W3C utilizza l'esempio di un'icona di stampante con il seguente codice e testo alternativo:
<a href="javascript:print()"> <img src="print.png" alt="Stampa questa pagina"> </a>
Come puoi vedere, l'icona a forma di stampante ha la scritta "Stampa questa pagina" come testo alternativo. Indica cosa fa l'icona. Questo è utile.
Testo alternativo per un pulsante
Simile all'esempio dell'icona, il testo alternativo per l'immagine di un pulsante dovrebbe descrivere ciò che fa l'immagine.
Il W3C utilizza l'esempio di una casella di ricerca che ha una lente d'ingrandimento per un pulsante di invio.
Il brutto modo per farlo è usare il testo alternativo per descrivere che l'immagine è una lente d'ingrandimento.
La procedura migliore consiste nell'usare il testo alternativo per descrivere ciò che fa l'immagine.
Questo è il codice di esempio che il W3C mostra come esempio:
<input type="image" src="searchbutton.png" alt="Search">
Come puoi vedere, il testo alternativo per il pulsante di ricerca è la parola "Cerca" che descrive qual è la funzione del pulsante.
Testo alternativo per pulsanti e loghi
Lizzi e John non sono entrati nei dettagli su come gestire i diversi scenari per loghi e pulsanti.
Tuttavia John ha sottolineato che non esiste un valore SEO per il testo alternativo per pulsanti e loghi, è per l'accessibilità.
È consigliabile fornire in modo appropriato le pagine Web che sono funzionali per gli utenti che accedono alle pagine Web con lettori di schermo.
Come accennato in precedenza, le persone che utilizzano le utilità per la lettura dello schermo possono essere clienti o sostenitori della tua attività o del tuo sito web.
Quindi è positivo che la linea di fondo utilizzi le migliori pratiche di accessibilità.
Citazioni
Scopri di più sull'accessibilità per pulsanti e loghi al W3C
Immagini funzionali
Combinazione di immagini adiacenti e collegamenti di testo per la stessa risorsa
Utilizzo degli attributi alt sulle immagini utilizzate come pulsanti di invio
Ascolta il podcast Search Off the Record al minuto 15:57:
Immagine in primo piano di Shutterstock/Evgeny Atamanenko