Molte persone non se ne rendono conto, ma il vantaggio dei siti web accessibili è che sono tendenzialmente molto più idonei al ricevere un alto punteggio da parte dei motori di ricerca.
Perché? La spiegazione è semplice: l’uso corretto dei tag HTML appropriati aiuta il crawler, cioè il bot del motore di ricerca che scansiona il sito web, ad organizzare i contenuti in modo efficiente. Inoltre, un sito web accessibile è generalmente più veloce e più performante, perché usa meno elementi di disturbo (si cerca di evitare l’uso di video esterni, immagini pesanti, caroselli di immagini a scorrimento, gallerie).
Questo significa che i siti web accessibili devono essere brutti ma sono sempre indicizzati bene?
No, non è così: un sito web accessibile non è necessariamente brutto, anzi, e allo stesso tempo non è detto che venga ben indicizzato. È possibile che altri siti web che fanno una SEO molto aggressiva siano indicizzati meglio, anche se poco accessibili.
Per capirci meglio: un sito web che punta tutto sulla SEO probabilmente avrà parole chiave che sono completamente fuori contesto, ingannando il crawler per ottenere un punteggio più alto, e magari ci riuscirà pure!
Tuttavia, nel lungo termine, come ormai si vede dai frequenti aggiornamenti agli algoritmi di Google ma anche di altri motori di ricerca, la strada più efficiente è quella di avere contenuti ben strutturati.
Certo, rimarrà sempre il problema del cliente che vuole essere indicizzato nelle prime posizioni in pochi giorni, e per il quale sarà quindi necessario fare una landing page in tutta velocità a 300 euro, ma questi sono dei casi limite che a mio avviso non vale la pena prendere in considerazione per quello di cui ci stiamo occupando.
I Core Web Vitals e l’accessibilità
Sappiamo che Google tiene molto in considerazione i cosiddetti Core Web Vitals, cioè quegli indicatori di performance del sito web che aiutano a determinare il punteggio che una pagina avrà nei risultati di ricerca. Una pagina lenta avrà un punteggio inferiore di una pagina veloce, a parità di contenuti.
Da qualche tempo inoltre nei Core Web Vitals è incluso anche l’indice di accessibilità:
Diventa quindi importante progettare un sito web in ottica accessibile fin da subito: il vantaggio è anche di ottenere un migliore punteggio per l’indicizzazione, fattore che può essere usato anche come leva commerciale verso i propri clienti.
I tag HTML più importanti da tenere in considerazione
Senza dubbio è utile conoscere almeno i tag HTML principali che servono sia per l’accessibilità che per la SEO:
Titoli (intestazioni da h1 a h6)
Accessibilità: i titoli vengono usati per dividere il contenuto in sezioni e capitoli, come fosse l’indice di un libro, rendendo gli argomenti più facilmente fruibili. L’utente può “saltare” (skippare) da un heading all’altro premendo un tasto scorciatoia della propria tecnologia assistiva, ad esempio il tasto “H” (che sta per Heading, cioè Intestazione). È una buona pratica fare in modo che i titoli siano concisi ma esplicativi, meglio dividere la pagina in più capitoli brevi ben strutturati, piuttosto di avere un unico testo molto lungo ma poco strutturato.
SEO: i titoli hanno un peso maggiore rispetto al testo normale e dovrebbero contenere le parole chiave utili per il testo che li segue.
Importante: ogni pagina web dovrebbe avere un solo tag h1
Immagini (tag HTML “img”, “figure”, “figcaption”, “picture”)
Accessibilità: le immagini decorative, come le icone, possono avere un testo alternativo vuoto (attributo “alt”), ma questo attributo deve essere presente. Invece, per le immagini contestuali, ad esempio l’immagine che mostra la preparazione di una ricetta, dovrebbe essere inserito, come testo alternativo, un testo descrittivo. Il testo alternativo può essere breve, non serve spiegare ogni dettaglio, ma sicuramente non deve essere banale. Ad esempio, scrivere “Foto dell’impasto dei pancake” non ha senso, piuttosto scriviamo “L’impasto dei pancake è quasi pronto nel contenitore, aggiungiamo gli aromi”. Dobbiamo fingere di non poter vedere l’immagine e di avere qualcuno che ce la deve spiegare brevemente a voce.
Se possibile, per le immagini contestuali racchiudiamo il tag “img” dentro a un tag “figure”, che può usare anche il “figcaption” come didascalia, e usiamo il tag “picture” quando abbiamo versioni diverse per la stessa immagine, ad esempio per le immagini responsive. Il tag “picture” può essere inserito dentro a “figure” e l’img può essere inserita in entrambi.
SEO: le immagini pesano molto sulla pagina e dovrebbero essere ottimizzate per ridurne peso e dimensioni. Nella maggior parte dei casi, una immagine di larghezza o altezza massima di 1000px è più che sufficiente, a meno di immagini che debbano vedersi a schermo intero, e può essere salvata con programmi come GIMP o Photoshop a qualità 80%, con poca differenza percettiva rispetto alla qualità massima, ma con un peso molto inferiore. In genere si usano i JPEG per le immagini che non contengono testo all’interno, e i PNG quando ci sono dei testi sovraimpressi. Nuovi formati che si stanno diffondendo e che sono consigliati perché più ottimizzati sono il WebP e l’AVIF. Da tenere presente che il testo alternativo (attributo “alt”) può essere utile anche per la SEO.
Link (tag HTML “a”)
Accessibilità: i collegamenti ipertestuali (link) devono contenere un testo e il testo deve essere utile. Da evitare quindi l’uso di “clicca qui”, “scopri di più” e formule simili. Una buona pratica è di usare come testo lo stesso titolo (tag title) della pagina di destinazione. Inoltre i link che puntano a siti esterni andrebbero indicati con una icona apposita.
SEO: i link aiutano il crawler, cioè il bot del motore di ricerca che scansiona un sito web, a trovare nuovi contenuti, sia interni che esterni. Avere molti link interni, purché siano utili e senza esagerare, è un ottimo modo per ottenere un maggior punteggio PageRank e quindi avere pagine meglio indicizzate. Anche i link esterni aggiungono valore, se sono link utili, soprattutto se puntano ad altri siti che gestiamo, ad esempio nel caso di aziende che rientrano nello stesso macro-brand, oppure di portali secondari che gestiamo oltre al nostro blog principale.
Importante: è molto utile conoscere i vari attributi di questo tag, e soprattutto l’attributo “rel” per quanto riguarda almeno i valori noreferrer, nofollow, external. Nel caso si usi il target=”_blank” per aprire il link in una nuova scheda, è buona pratica usare anche rel=”noopener” per evitare vulnerabilità, anche se al giorno d’oggi la situazione è molto migliorata.
Formattazione del testo
Dopo aver imparato bene questi tag, i successivi che posso consigliare riguardano la formattazione del testo, anche questi molto utili sia per l’accessibilità che per la SEO:
grassetto, sottolineato, corsivo, ecc. tramite i tag: b, strong, u, i, em
liste, con i tag: ul, ol, li, ma anche dl, dt e dd
altri formati multimediali tramite i tag: video, audio, object, canvas, svg, ecc.
le tabelle, tramite i tag: table, thead, tbody, th, td, tr, caption, summary
Form
Infine, senza dubbio è bene sapere tutto quello che riguarda i form, compresi i tag fieldset, input, label e button, conoscenza base fondamentale per l’accessibilità, con i siti web moderni che fanno ormai ampio uso dei moduli digitali, sempre più usati anche dalle Pubbliche Amministrazioni per il rilascio dei documenti.
Tutti questi argomenti si possono approfondire su vari portali, tra i quali consiglio soprattutto MDN.
