Alt e immagini vanno di pari passo, tanto che chi mastica un po’ di SEO si sarà sentito ripetere diverse volte una frase in particolare. Ogni foto presente nel sito deve avere un Alt Text. Ovvero va sempre compilato il box “testo alternativo” presente nell’apposito modulo dei media. Quando carichiamo fotografie o icone, WordPress ci dà la possibilità di inserire il titolo dell’elemento, un testo alternativo, una descrizione oppure una didascalia.

Tutte sono utili per migliorare l’esperienza dei nostri navigatori, dalla possibilità di descrivere un testo delle immagini, alcuni sono essenziali per far comprendere a Google che cosa è presente nel nostro articolo o pagina. E quindi, quando è meglio inserire l’Alta e quando invece è meglio evitarlo del tutto? Fino ad ora abbiamo dato per scontato che immagini e Alt vanno di pari passo, ma questa direttiva viene sfatata dalle ultime introduzioni di W3C.

I diversi tipi di immagine

Prima di iniziare a vedere ogni specifica delle nuove regole per la manipolazione degli elementi media e l’Alt, va fatta una distinzione fra tutte i casi che potrebbero interessarci. Nel nostro sito potremmo aver inserito per esempio icone, foto, infografiche e molto altro ancora.

In seguito analizzeremo le differenti tipologie di contenuti multimediali, visti secondo l’ottica WordPress e dell’attributo tag Alt. Ad ogni passaggio troverai un piccolo riassunto ed un esempio visivo. In questo modo saprai sempre come procedere in caso di dubbio.

Icone e logo

Ogni portale che si rispetti ha almeno un logo, una particolare immagine professionale o divertente che ne rappresenta il nome. Nel nostro caso è presente del testo e un’icona a forma di volpe. Alcuni siti scelgono invece di usare un cartoon come simbolo del proprio brand: basti pensare alla volpe con il pennello del software open source Gimp oppure alla tavolozza con tutti i colori preferita da Paint.

Potremmo aver richiesto al nostro grafico di fiducia di creare un simbolo con le iniziali del nostro brand oppure un’icona stilizzata che spieghi in modo conciso e visivo i nostri servizi. Per esempio la Apple usa la celebre mela (morsicata o no a seconda delle teorie), Facebook adotta semplicemente l’iniziale F e WhatsApp semplicemente la cornetta di un telefono all’interno di un baloon.

Fotografie e immagini in evidenza

Sito di notizie, blog professionale o personale, poco importa. In tutti i casi avremo di sicuro inserito all’interno dei contenuti delle immagini per abbellire il testo. Gli utilizzatori conoscono bene il box per l’immagine in evidenza, tramite cui scegliere la copertina del nostro articolo. Oppure la funzione “aggiungi media”, che ci dà la possibilità di inserire dei file visivi per alleggerire il corpo del testo.

Una pratica ormai consolidata e necessaria se pensiamo all’esperienza dei nostri utenti. In diversi casi può anzi invogliare chi naviga a continuare a leggere le nostre pagine oppure indirizzare verso un approfondimento particolare.

Infografica ed elementi di design

Amata dai marketers e dagli statistici, l’infografica è un valido strumento per chi vuole spiegare un concetto complesso grazie ad un semplice grafico. Divertente o animata, può contenere spiegazioni, elenchi e icone. A tutti gli effetti può essere paragonata a qualsiasi elemento di design che mira ad abbellire il nostro portale. Ne ho già usate diverse all’interno del mio portale e visto che sono molto utili perché non sfruttarle? Come potrai intuire facilmente, usare un’infografica può dare una spinta in più al tuo testo. Sotto molti punti di vista!

Tag Alt per le immagini WordPress: guida all’uso

Fino ad ora ti ho parlato in generale di tutti i contenuti considerati “media” e che utilizzi normalmente all’interno del tuo sito o blog. Adesso è arrivato il momento di affondare il colpo ed analizzare caso per caso tutte le volte in cui dovrai compilare il box “Testo alternativo” e quando invece potrai farne a meno. Attenzione però: potresti trovare delle difficoltà nel comprendere quando un’icona viene considerata solo decorativa e quando invece assumerà una particolare funzione, utile per far compiere delle azioni all’utente oppure segnalare delle informazioni preziose. Qui di seguito trovi un piccolo riassunto di tutto ciò che ti illustrerò poco dopo in modo particolare.

Guida Alt Tag per le immagini in WordPress

Immagini decorative

I media scelti per i nostri contenuti online possono avere un semplice scopo decorativo. In linea generale non aggiungono alcuna informazione al testo o alla pagina che stiamo creando, anche quando è provvista di un testo adiacente che ne amplia il significato. Temi e CSS ci regalano la possibilità di abbellire la nostra paginetta in qualsiasi momento, magari con un’interruzione di pagina o dei box. Gli stessi elementi possono però essere creati anche grazie ad un’immagine, che sarà quindi solo decorativa.

In questo caso, il tag Alt NON andrà compilato. Possiamo limitarci a specificare solo il titolo dell’immagine, facendo attenzione a renderla differente dal nome del file appena caricato.

Fanno parte della stessa sezione anche tutte quelle foto carine che valorizziamo con un link. Il collegamento non aggiungerà alcun valore al testo già presente nell’articolo, ma si limiterà a descrivere con una o più parole il significato generico dell’immagine.

Anche questa alternativa ci permette di NON compilare il testo alternativo.

Anche una foto con testo affianco può essere decorativa. Per esempio un’immagine realistica presente in un volantino online, che verrà spiegata da alcune righe presenti nelle vicinanze. La foto può rappresentare una spiegazione visiva di ciò che abbiamo scritto oppure indicare in modo generico una nostra affermazione.

L’Alt NON è previsto per entrambe le tipologie.

Esempi di immagini decorative in WordPress

Immagini informative

Anche se in linea generale la regola sottolinea di non compilare l’Alt per le icone, esistono delle eccezioni da non sottovalutare. Le immagini informative infatti possono essere delle icone generiche destinate ad una specifica funzione, come la cornetta per indicare il numero di telefono, la bustina che precede l’indirizzo email e molto altro ancora. In questo casto l’Alt Text va compilato perché identifica l’elemento scelto con il testo al suo fianco.

Poco prima abbiamo visto che l’immagine con il testo adiacente non prevede l’uso dell’Alt, ma ancora una volta ci sono delle eccezioni. Se infatti il testo rappresenta la foto al suo fianco, non dovremo usare l’Alt. In alternativa potremmo scegliere di usare un’immagine collegata a quanto abbiamo scritto e che indica in linea generale il focus dell’articolo o della pagina e non il testo in sé. Come per esempio l’immagine in evidenza di quest’articolo.

Quando la foto diventa un concetto

Se l’elemento scelto riguarda invece delle specifiche informazioni, come per esempio delle istruzioni da seguire, dovremo compilare il campo Alt per l’immagine. Pensiamo agli e-commerce che grazie ad una foto mettono in evidenza un particolare del prodotto. Rientrano in questa casistica un’infografica che illustri i diversi step per aprire un paracadute, le funzioni di un orologio digitale e molto altro ancora.

Alcuni siti potrebbero scegliere di usare delle foto per spiegare la propria missione. I portali di studi dentistici o legati al campo medical in generale usano spesso foto professionali per abbellire i propri contenuti. In questo caso si parla di immagini decorative, come abbiamo spiegato nei casi precedenti. Esiste però la possibilità di adottare questa strategia anche per altri scopi, magari per sottolineare che nel nostro ristorante o negozio c’è uno spazio speciale dedicato agli animali domestici.

L’articolo oppure il trafiletto spiegherà il nostro intento ed in aggiunta potremmo scegliere il ritratto di persona felice con il proprio amico peloso. In questo caso possiamo compilare l’Alt, spiegando brevemente la nostra missione: “le iguane sono ben accette nei nostri ristoranti/negozi”.

A tutto download

L’Alt per immagini è previsto anche in tutti quei contenuti da scaricare che prevedono diverse alternative. I portali che si occupano di libri prevedono quasi sempre almeno due differenti tipi di link per scaricare un eBook, a seconda del dispositivo che si preferisce. Non è necessario usare solo un link, possiamo adottare un’icona adatta. In questo caso l’Alt va compilato per spiegare il formato del file scaricabile tramite il link.

Attenzione: avrai subito notato che ci sono delle similitudini con le immagini decorative. In linea generale, le icone e le immagini associate ad un link non prevedono l’Alternative Text. In questo caso invece l’immagine scelta rappresenta una funzione precisa non intuibile a colpo d’occhio. Per questo il campo andrà compilato.

Immagine funzionale

Fanno parte di questa categoria i logos che prevedono solo testo oppure simboli e icone. Per esempio il brand zuccherino e gassato Coca Cola ha costruito attorno a due semplici parole un colosso ancora oggi imbattibile. In presenza di link, l’immagine deve essere provvista di Alt tag e può corrispondere al testo indicato al suo interno, purché differente dal nome dell’immagine. Coca Cola diventerà l’Alternative Text, mentre CClogo potrebbe essere il nome del file media caricato.

Un’immagine è funzionale anche quando il logo testuale viene usato per aprire una pagina ben precisa del portale. Supponiamo che vogliamo aprire una nuova finestra ogni volta che l’utente clicca su “Coca Cola Home” e che la nostra immagine sia diversa dal loghetto inserito nell’header o nel footer della pagina web: il testo alternativo in questo caso sarà collegato alla sua funzione, ovvero all’apertura della home in una nuova pagina.

Anche il logo con link viene considerato come funzionale, a prescindere che sia presente solo testo oppure no. Nel mio caso, Wp-Win rappresenta il simbolo del mio portale ed allo stesso tempo hai la possibilità di sfruttarlo per ritornare alla homepage in tutta comodità. La funzione principale del logo è il collegamento con la pagina principale del portale, per questo potrei scrivere come titolo alternativo “Wp-Win Home”, per indicare la funzione specifica dell’elemento.

 

0 0 votes
Article Rating