6 estensioni + Extra di accessibilità web in Chrome e Firefox

Premesso che l’accessibilità dovrebbe far parte del processo di progettazione-sviluppo, ci sono alcune estensioni Chrome e Firefox utili per controllare che tutto stia andando bene. Link nei commenti.

WAVE è uno strumento di valutazione pratico e intuitivo. Aiuta a:

• Analizzare gli errori WCAG 2.1. più evidenti e gli alert;
• Vedere i dettagli di ogni errore;
• Controllare i tag HTML semantico e gli attributi ARIA;
• Vedere gli errori disabilitando CSS e ispezionando il codice.

axe è un’altra estensione di monitoraggio generale, raggiungibile attraverso l’ispezione con tasto destro. Con axe si può:

• analizzare pagine intere o parti di pagina;
• analizzare gli errori in modo più approfondito;
• vedere suggerimenti per risolvere gli errori;
• salvare i risultati del test (con login sul sito Deque).

Estensione molto utile per:

• controllare la gerarchia degli heading (H1, H2 e così via);
• verificare eventuali titoli mancanti (sono indicati in rosso).

I landmark sono tag HTML semantici utili per la navigazione con Screen Reader, ad esempio: header, nav, main, footer. Con questa estensione si può:

• controllare la distribuzione dei landmark nella pagina;
• verificare le label degli ARIA role assegnati agli elementi: sono utili per personalizzare
• elementi HTML che si ripetono, ad esempio i nav.

Simulatore di disabilità che mostra come compare la pagina web in situazioni particolari. Ad esempio, ci sono:

• Vista: daltonismi come rosso-verde, tunnel visivo, colori brillanti. Non approfondisco perché non sono un medico, però è importante sapere che alcune disabilità colpiscono la vista e la più diffusa è la discromatopsia rosso-verde.
• Mobilità: la simulazione del Parkinson dimostra la difficoltà a compiere operazioni semplici come cliccare un bottone;
• Leggi e scrivi: la simulazione della dislessia fa vedere quanto è importante curare l’aspetto della leggibilità dei testi;
• Concentrazione: animazioni invadenti.

Strumento che racchiude in una lista unica tutte le combinazioni colore sulla pagina:

• segnala gli errori in accordo ai livelli AA e AAA;
• evidenzia gli elementi sulla pagina.

Firefox ha già uno strumento di analisi interno, accessibile tramite Ispeziona con tasto destro > Accessibilità.