Un intervento mirato per migliorare l’accessibilità e le performance web
Alex Bellini è un esploratore e divulgatore che vuole sensibilizzare il grande pubblico sul tema della sostenibilità.
Abbiamo realizzato la prima versione del suo sito nel 2019 con lo scopo di fornire uno strumento in grado di raccontare le sue imprese e presentare i suoi corsi, i suoi libri e i servizi che offre.
Cinque anni dopo a seguito di un intervento per valorizzare i contenuti del blog e considerando le tematiche che Alex ha a cuore abbiamo deciso di lavorare anche all’ottimizzazione delle performance e dell’accessibilità.
I numeri prima dell’intervento
Per ottenere i dati di performance e SEO abbiamo utilizzato Lighthouse[1], mentre per ottenere un’analisi dettagliata dell’accessibilità abbiamo utilizzato axe DevTools[2].
0
%
Performance[3]
0
%
SEO[3]
0
Problemi di accessibilità[3]
I numeri dopo l’intervento
0
%
Performance[3]
0
%
SEO[3]
0
Problemi di accessibilità[3]
Web Performance
Ottimizzare le risorse per migliorare le performance del sito e ridurne l’impatto ambientale
Inizialmente il sito utilizzava una libreria JavaScript per caricare le immagini con la tecnica “lazy”: a distanza di qualche anno tutti i principali browser offrono supporto per caricare le immagini con questa tecnica senza bisogno di JavaScript aggiuntivi. Abbiamo quindi rimosso la libreria che, seppur in modo ineccepibile, effettuava una manipolazione del documento HTML per caricare le immagini in modo asincrono.
Un altro miglioramento significativo è stato ottenuto sfruttando l’attributo rel=”preload” dell’elemento <link> per pre caricare le immagini di apertura prima del rendering principale della pagina.
In questo modo i tempi necessari per visualizzare le pagine del sito sono scesi mediamente di un secondo.
Scopri tutti i vantaggi di un sito performante e sostenibile
Toni e Nanni ti aspettano
Accessibilità digitale
Interventi mirati per migliorare l’accessibilità del sito con benefici anche per la SEO
Oltre alle performance abbiamo dedicato del tempo anche per migliorare l’accessibilità del sito, focalizzando l’attenzione su alcuni elementi fondamentali:
- introduzione del link “skip to content” per saltare il menu di navigazione principale e passare direttamente al contenuto della pagina;
- definizione della proprietà “focus-visible” per tutti i link e i bottoni;
- correzione della sequenzialità delle intestazioni per migliorare l’esperienza di navigazione;
- inserimento di testi aggiuntivi, accessibili tramite screen reader, per contestualizzare tutti i link che hanno come unico contenuto testuale “Scopri di più”;
Vuoi testare l'accessibilità del tuo sito?
Parlerai con Toni, Laura e Nanni
[1] Lighthouse è uno strumento open source di analisi automatizzata per migliorare la qualità delle pagine web.
[2] axe DevTools è uno strumento di analisi automatizzata per migliorare l’accessibilità delle pagine web. I risultati variano a seconda della pagina analizzata: in questo caso abbiamo analizzato le principali tipologie di pagine (pagine a moduli, pagine di listing contenuti e articoli del blog). Il risultato di questo test verifica, ad esempio, la corretta sequenzialità degli elementi di intestazione utilizzando i moduli disponibili per comporre i contenuti. Non è possibile però garantire che, utilizzando l’editor di testo, i contenuti mantengano sempre il corretto ordinamento degli elementi di intestazione.
Oltre agli interventi correttivi basati all’analisi di axe DevTools abbiamo anche effettuato un’analisi “manuale” per risolvere altre criticità che strumenti automatizzati non sono in grado di verificare come, ad esempio, le definizione della proprietà “focus-visible” per tutti i link e i bottoni.
[3] Il valore è calcolato sulla media di tre pagine differenti.
