Estensioni per controllare l’accessibilità web su 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.
1. WAVE di WebAIM
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.
2. axe DevTools di Deque
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).
3. HeadingsMap di Jorge Rumoroso
Estensione molto utile per:
- Controllare la gerarchia degli heading (H1, H2 e così via);
- Verificare eventuali titoli mancanti (sono indicati in rosso).
Estensione Chrome di HeadingsMap
Estensione Firefox di HeadingsMap
4. Landmarks di Matthew Tylee Atkinson
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.
Estensione Chrome di Landmarks
Estensione Firefox di Landmarks
5. Web Disability Simulator di Metamatrix
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.
Estensione Chrome del Simulatore Web Disability
6. WCAG Color Contrast di Jorge Rumoroso
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.
Estensione Chrome di WCAG Color Contrast
Estensione Firefox di WCAG Color Contrast
EXTRA su Firefox
Firefox ha già uno strumento di analisi interno, accessibile tramite Ispeziona con tasto destro > Accessibilità.