WAVE Web Accessibility Tool, la guida

Di Riccardo Esposito | Pubblicato il - Aggiornato il

Molti vedono l’accessibilità su internet come una materia necessaria solo ai siti web istituzionali. WAVE Web Accessibility Tool smentisce queste credenze e permette a tutti di capire come ottimizzare un blog, un sito web, una pagina statica.

WAVE Web Accessibility Tool
Ottimizza le tue pagine web con WAVE.

Perché l’accessibilità dei siti web è una materia che serve rimuovere le barriere architettoniche informatiche e consente a tutti di leggere ciò che hai pubblicato.

Guarda caso, un sito web accessibile è un contenuto di qualità per tutti. Ed è per questo che dovresti sempre seguire i consigli di WAVE Web Accessibility Tool.

Cos’è e a cosa serve questo strumento?

Wave.webaim.org è un’app che consente di analizzare l’accessibilità delle pagine web. Si tratta di una utility online gratuita che può essere usata anche come add-on del browser che puoi trovare nella pagina dedicata alle estensioni.

WAVE raccoglie diversi strumenti per valutare i contenuti e renderli accessibili alle persone con disabilità. Al tempo stesso restituisce una serie di risultati indispensabili a tutti i webmaster e blogger che si chiedono come ottimizzare un blog e i relativi articoli. Per esigenze avanzate ci sono API e versioni professionali.

Come funziona WAVE Web Accessibility Tool

Incolla l’URL della pagina web nel campo dedicato e avviare l’analisi. In pochi secondi viene restituito il risultato visivo: una replica del documento con tutte le annotazioni che riportano errori (più o meno gravi) di accessibilità.

E che possono avere anche influenza sull’usabilità e la SEO. Se usi le estensioni per Chrome e Firefox devi solo cliccare sul pulsante per avviare l’analisi.

Le varie funzioni di WAVE Web Accessibility Tool

Nel momento in cui effettui un’analisi della pagina hai una schermata centrale nella quale vengono individuati tutti i problemi. Cliccando sui vari segnaposti ti vengono suggerite le spiegazioni con link all’approfondimento e al codice HTML.

A sinistra trovi una sidebar nella quale puoi approfondire diversi aspetti. C’è la lista dei vari errori divisi per tipologia, la struttura della pagina web e la possibilità di disabilitare gli stili grafici per avere lo scheletro del documento internet.

Da leggere: come fare SEO su WordPress

Scopri pagine web e post senza tag H1

Il primo contributo che può dare WAVE Web Accessibility Evaluation Tool: individuare problemi relativi all’assenza del tag H1. Vale a dire il titolo principale.

registra l'assenza di h1
Qui manca l’H1 nella home page del sito.

Assicurati che ogni pagina abbia il suo H1 e che contenga le giuste keyword: questo è sempre stato uno dei principali consigli SEO per blogger. Negli ultimi tempi John Mueller, in un suo hangout, ha assicurato che non è un elemento cruciale.

Ma al tempo stesso resta un passaggio fondamentale per definire la struttura della pagina. E soprattutto per far capire all’utente qual è il tema dell’articolo.

Quindi, perché non inserirlo? WAVE Web Accessibility Tool ti aiuta a scoprire in un attimo eventuali assenze non preventivate e causate da temi con errori strutturali.

Evidenzia immagini con errori nel tag alt

Come ottimizzare un blog incrociando regole SEO, di usabilità e della buona accessibilità sul web? Assicurati che le immagini abbiano un testo alternative adeguato per spiegare agli utenti e al motore di ricerca il contenuto del visual.

verifica testo alternative
Ecco la verifica del tag alt di WAVE.

L’aspetto interessante è la capacità di questo strumento nell’individuare errori di accessibilità attraverso prospettive differenti. Ad esempio, non si limita a registrare l’assenza del testo alternative: sottolinea anche la presenza di tag alt inadeguati.

errore di accessibilità nel tag alt
Ecco un altro errore di accessibilità per il tag alt.

Capita ad esempio quando viene riprodotto, in modo automatico, il titolo del post nella foto. In questa fase è giusto ricordare che il tag alt di un’immagine è parte dell’ottimizzazione SEO per immagini contenuto ma anche dell’accessibilità

È un supporto per chi ha problemi di vista e usa il browser per ascoltare la lettura delle pagine web. Quindi dovrebbe avere una funzione descrittiva delle immagini.

Altri errori relativi alle immagini

Questo tool riesce a valutare anche la presenza di attributo title del visual identico al tag alt e l’assenza di quest’ultimo elemento in corrispondenza di un’immagine con link. Il che significa avere un collegamento ipertestuale senza testo.

Individua errori di gerarchia: H1, H2, H3

Sai bene che l’organizzazione degli header è un passaggio fondamentale per definire la struttura della pagina. Aiutano l’utente e il motore di ricerca a capire di cosa si parla sulla pagina e quali sono i punti più importanti. Cosa rispettare in questo caso?

struttura della pagina web su WAVE Tool
La struttura di una pagina web.

Bisogna osservare la gerarchia degli heading, la relazione di dipendenza tra H2, H3, H4 in una pagina web. Così tutti capiscano qual è la relazione tra i vari argomenti.

Questo tool per migliorare l’accessibilità ti aiuta a scoprire eventuali errori di struttura, notificando l’uso errato di heading e mostrando, al lato, lo schema della struttura pagina. Così puoi individuare facilmente cosa correggere.

errore nei titoli della pagina.
Qui c’è un errore nei titoli della pagina.

C’è da aggiungere che questo tool di validazione dell’accessibilità aiuta anche a valutare la presenza di più H1 nella pagina. Sappiamo che anche questo non è un problema lato SEO ma di sicuro è un aspetto da valutare con cura: non si aggiungono H1 multipli a caso, o inconsapevolmente per un errore del template.

Correggi il testo con scarso contrasto

Una utility molto utile è quella che consente di scoprire, attraverso l’analisi di WAVE Web Accessibility Tool, stringhe di testo con scarso contrato. Vale a dire eventuale microcopy che non riesce a emergere sullo sfondo a causa di colori incompatibili.

WAVE Web Accessibility Tool e il contrasto
Usa il giusto contrasto per i vari elementi.

Questo aspetto non è penalizzante solo nei confronti di chi ha difficoltà visive. Quando mi chiedono come ottimizzare un blog nella sua interezza penso anche a questi aspetti legati all’usabilità, non solo a migliorare l’ottimizzazione SEO.

Migliora il font e la leggibilità del testo

Puoi fare un lavoro di content marketing con il tuo blog aziendale o personale se non valuti con grande attenzione la leggibilità del testo? Non credo, ecco perché devi prestare attenzione ai suggerimenti di WAVE Web Accessibility Tool che ti indica:

  • Presenza di testo troppo piccolo.
  • Casi di testo sottolineato.

Un font non abbastanza grande diventa un impedimento per la fruizione del contenuto, soprattutto da mobile. Inoltre la presenza di contenuto sottolineato non è una buona pratica perché, di solito, questa formattazione riguarda i link.

presenza di testo sottolineato nella pagina web
Ecco un errore di leggibilità.

Se usi il sottolineato per mettere in evidenza il contenuto rischi di creare confusione, meglio usare il grassetto. Ovviamente anche quest’ultimo non deve essere lasciato al caso: troppo testo in evidenza diventa illeggibile.

Da leggere: come ottimizzare una pagina web

Tu userai WAVE Web Accessibility Tool?

Il posizionamento è un’impresa difficile da affrontare? Certo, è così. Ottimizzare un blog appena può essere inutile di fronte ai grandi player del settore? Forse.

Ma se non affronti questo tema con una prospettiva completa rischi sempre di perdere qualche elemento. Ecco perché WAVE Web Accessibility Tool è fondamentale. Lo usi? Lascia la tua opinione su questo strumento nei commenti.

Riccardo Esposito

Sono un web writer freelance. Mi occupo di scrittura online dal 2009, mi sono specializzato nella stesura di piani editoriali per blog aziendali. Ho scritto 3 libri dedicati al mondo del blogging e della scrittura online (bio di Riccardo Esposito).

Categoria: Strumenti per blog | Tag: Usabilità

Lascia un commento

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

Torna in alto