Seo e accessibilità: sovrapposizione nelle ottimizzazioni

Il post che segue è ampiamente ispirato da quattro articoli usciti sul blog di Moz.org (un società che offre servizi e prodotti riguardanti Seo e contorni), scritti da Laura Lippay e che snocciolano il come l’ottimizzazione lato Seo e l’ottimizzazione per la più ampia accessibilità si sovrappongano spesso.

Questi gli articoli in questione:

Data questa premessa tengo a precisare che in questi articoli non c’è una ricetta magica che vi permette di ottimizzare contemporaneamente sia per la Seo che per l’accessibilità: semplicemente molte ottimizzazioni sono tali in entrambi i campi, e al contempo stando attenti nell’ottimizzare per una delle due si possono fare grandi cose anche per l’altra.

Basta tenere a mente che, quasi sicuramente, il primo utente completamente cieco e completamente sordo sarà proprio lo spider di Google. 🙂

Sovrapposizioni nell’ottimizzazione della struttura

Regola numero uno: utilizzate markup coerente con il contenuto che il markup ospiterà.

Ad esempio, un <h3> non serve a mettere un testo più grande in chissà quale parte della vostra pagina, ma ha uno scopo ben preciso: è un’intestazione di livello 3. Il markup non serve a modificare il design dei vostri contenuti, ma a dargli un senso.

Il tag title

Il tag <title> si inserisce all’interno dell’head della pagina: la sua ottimizzazione porta diversi vantaggi su entrambi i fronti, Seo e accessibilità: vediamo quali.

Lato Seo:

  • fornisce un contesto allo spider di Google che indaga la pagina
  • è il titolo che apparirà nella pagina dei risultati del motore di ricerca

Lato accessibilità:

  • permette agli utenti di capire se la pagina risponde alle loro esigenze
  • permette di differenziare i contenuti quando diverse pagine sono aperte nel browser
  • aiuta le persone con disabilità cognitive, memoria a breve termine limitata, disabilità nella lettura

Quindi crea un title coerente col contenuto della pagina, ed evita assolutamente il keyowrd stuffing.

Intestazioni

All’interno della pagina usa solo una intestazione di primo livello <h1>, e poi usa gli altri tag di intestazione (da <h2> a <h6>) in maniera nidificata: ad esempio mai un <h3> a seguito di un <h1>. Evita anche intestazioni non seguite da contenuto, non ha senso.

Le intestazioni permettono alle tecnologie assistive di navigare rapidamente la pagina, un grande aiuto per chi ha difficoltà motorie o usa uno screen reader.

I vantaggi di Html5

L’Html5 ha introdotto nuovi markup che permettono di descrivere ancora meglio il contenuto, in maniera semantica e quindi facilmente comprensibile: insomma, tutta roba da sfruttare.

Evita invece di utilizzare elementi <div> o <span> per creare bottoni e pulsanti: creano solo confusione e cattiva esperienza per l’utente.

Struttura della pagina e navigazione

L’ordine nel codice sorgente è estremamente importante per navigare attraverso il contenuto di una pagina: le tecnologie assistive scorreranno gli elementi così come li incontreranno nel codice.

Se per qualche motivo, ad esempio di design, hai necessità di dare un ordine particolare al contenuto (ad esempio vuoi visualizzare i metadati prima del titolo di un articolo) utilizza il Css: un layout che utilizza Flexbox può aiutarti in questo.

Mappa on-site

Oggi le mappe on-site non vengono molto utilizzate, ma possono tornare molto utili sia lato Seo che per aumentare l’accessibilità dei contenuti di un sito: inserisci i link a tutte le sezioni, usa la stessa struttura del sito e mantieni il tutto aggiornato; assolutamente vietato, invece, il keyword stuffing.

Sovrapposizioni nell’ottimizzazione della formattazione e dei link

Testo nascosto

Non sempre ciò che non si vede è invisibile a Google o alle tecnologie assistive.

Se hai necessità di nascondere del testo devi analizzare bene il perché di questa scelta, capire a chi vuoi nasconderlo e scegliere la tecnica migliore. Nell’articolo Optimizing for Accessibility + SEO: Formatting & Link Overlaps c’è una tabella molto utile riportante i diversi metodi utilizzabili per nascondere testo e, per ognuno di questi metodi, a chi viene nascosto il contenuto.

Dimensione e contrasto del colore del testo

La dimensione e il contrasto del testo non tornano solo utili a chi ha degli handicap visivi, ma è considerata anche dai motori di ricerca.

Ecco alcuni consigli per ottimizzare il testo sia per la Seo che per l’accessibilità:

  • non utilizzare mai testo nelle immagini: Google non lo interpreta, chi usa tecnologie assistive altrettanto, e chi ha problemi di vista, ingrandendo, avrà solo un orrendo effetto pixel
  • non basarti sul colore per dare informazioni: ad esempio un link riconoscibile solo dal colore potrebbe non essere individuato da daltonici, quindi sempre meglio usare una sottolineatura per distinguerlo
  • massimizza il contrasto tra testo e sfondo (questo tool ti aiuterà: Color contrast check)
  • usa unità di misure relative
  • usa font molto leggibili (evita font fantasiosi e pieni di ghirigori)

Link e testi àncora

Il testo àncora, ovvero il testo al quale è applicato il link, è molto importante. Usando un testo descrittivo potrai indicare a tutti gli utenti e anche ai motori di ricerca dove porta quel link: essendo i link la base del web, questo aspetto assume rilevanza primaria.

Non utilizzare mai pseudo-link e bottoni al posto di un normale link: questo confonde l’esperienza di chi usa tecnologie assistive e anche gli spider di Google.

Un ultimo appunto sui breadcrumb: spesso vengono utlizzati senza essere spiegati, solo come una serie di link con qualche separatore (era così anche sul mio sito fino a poco fa). Molto meglio iniziare con una stringa del tipo “Ora sei qui:”.

Sovrapposizioni nell’ottimizzazione di immagini, video e altri elementi non testuali

Immagini

Gli elementi da ottimizzare per le immagini sono soprattutto due:

  • l’attributo alt: è il testo alternativo all’immagine, e quindi dovrebbe descriverla brevemente e con un testo naturale (no, no e no keyword stuffing); da non utilizzare se l’immagine è decorativa, se l’immagine è linkata e vi è vicino un link con un testo esplicativo
  • image caption, ovvero la didascalia: molto utile se per spiegare l’immagine c’è bisogno di molto testo; non utilizzare mai insieme image caption e alt attribute; è importante spiegare quale immagine descrive la didascalia, e per questo può tornare utile il tag <figure> con al suo interno un tag <figcaption> che contiene la didascalia

Testo come immagine

Semplicemente non farlo! Non è letto dalle tecnologie assistive e neanche dagli spider dei motori di ricerca (almeno non ufficialmente).

Infografiche

Prima cosa importante da controllare è il grado di contrasto nel colore usato per l’infrografica.

Per renderla accessibile e Seo-friendly è sconsigliabile usare l’attributo alt: molto meglio l’attributo ARIA-describedby, l’attributo describedby oppure un metodo per nascondere testo ai vedenti ma non alle tecnologie assistive e a Google.

La cosa migliore, indubbiamente, è creare l’infografica con Css, Svg e testo: ottimo sia per la Seo che per l’accessibilità.

Video

Per rendere un video Seo-friendly e accessibile le strade sono due: le trascrizioni o i sottotitoli.

La trascrizione può essere inserita in un testo sotto il video, o magari nella descrizione per servizi come YouTube.

I sottotitoli sono molto utili e funzionali, e possono essere inseriti attraverso il tag <track> all’interno del tag <video>, o più semplicemente usando YouTube o un servizio simile. Quando si usano i sottotitoli è utile accompagnare il video con una didascalia che ne spieghi sommariamente il contenuto.

Come vedi le sovrapposizioni nell’ottimizzazione per la Seo e in quella per l’accessibilità sono diverse. Ti invito a leggere gli articoli originali da cui ho tratto le informazioni per scrivere questo articolo per approfondire il discorso: per comodità ti reinserisco i link.

E se ci sono altre sovrapposizioni che hai notato, non ti resta che parlarne nei commenti. 🙂

2 commenti su “Seo e accessibilità: sovrapposizione nelle ottimizzazioni

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *