Accessibilità web:
6 Estensioni per
Chrome e Firefox

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 46

Data di pubblicazione: 7 Febbraio 2023

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.

Estensione Chrome di WAVE

Estensione Firefox di WAVE

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).

Estensione Chrome di axe

Estensione Firefox di axe

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à.

Vedi come usare Ispeziona Accessibilità su Firefox