Vuoi rendere il tuo sito Angular accessibile a tutti? Questo è il posto giusto!
Rendere accessibile la tua app significa che tutti gli utenti, inclusi quelli con esigenze speciali, possono utilizzarla e comprenderne i contenuti. Secondo il Rapporto sulla salute mondiale, più di un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità. Perciò l'accessibilità è una priorità per qualsiasi progetto di sviluppo.
In questo post scoprirai come aggiungere i controlli di accessibilità di codelyzer al processo di compilazione di un'app Angular. Questo approccio ti consente di individuare i bug di accessibilità direttamente nell'editor di testo durante la programmazione.
Utilizzo di codelyzer per rilevare elementi inaccessibili
codelyzer è uno strumento basato su TSLint che consente di verificare se i progetti Angular TypeScript seguono un insieme di regole di analisi tramite lint. I progetti configurati con l'interfaccia a riga di comando (CLI) di Angular includono codelyzer per impostazione predefinita.
codelyzer ha oltre 50 regole per verificare se un'applicazione Angular segue le best practice. Di queste, ci sono circa 10 regole per applicare i criteri di accessibilità. Per scoprire di più sui vari controlli di accessibilità offerti da Codelyzer e sulle relative motivazioni, consulta l'articolo Nuove regole di accessibilità in Codelyzer.
Attualmente, tutte le regole di accessibilità sono sperimentali e disattivate per impostazione predefinita. Puoi abilitarle aggiungendole al file di configurazione TSLint (tslint.json):
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint funziona con tutti gli editor di testo e gli IDE più diffusi. Per utilizzarlo con VSCode, installa il plug-in TSLint. In WebStorm, TSLint è abilitato per impostazione predefinita. Per altri editor, controlla il file TSLint README.
Dopo aver configurato i controlli di accessibilità di codelyzer, viene visualizzato un popup che mostra errori di accessibilità nei file TypeScript o nei modelli in linea durante la programmazione:
Per eseguire l'analisi tramite lint nell'intero progetto (inclusi i modelli esterni), usa il comando ng lint:
Integrare il codelyzer
Lighthouse è un altro strumento che puoi utilizzare per applicare le pratiche di accessibilità nella tua applicazione Angular. La differenza principale tra Codelyzer e Lighthouse è quando vengono eseguiti i controlli. Codelyzer analizza in modo statico l'applicazione in fase di sviluppo, senza eseguirla. Ciò significa che durante lo sviluppo puoi ricevere un feedback diretto nell'editor di testo o nel terminale. Al contrario, Lighthouse esegue effettivamente l'applicazione ed esegue una serie di controlli mediante l'analisi dinamica.
Entrambi gli strumenti possono essere utili nel tuo flusso di sviluppo. Lighthouse ha una copertura migliore data i controlli eseguiti, mentre Codelyzer ti consente di eseguire l'iterazione più velocemente ricevendo un feedback costante nell'editor di testo.
Applicazione dei controlli di accessibilità nell'integrazione continua
L'introduzione dei controlli di accessibilità statici nell'integrazione continua (CI) può essere un ottimo miglioramento per il tuo flusso di sviluppo. Con codelyzer puoi applicare facilmente determinate regole di accessibilità o altre pratiche eseguendo ng lint a ogni modifica del codice (ad esempio per ogni nuova richiesta di pull).
In questo modo, anche prima di procedere alla revisione del codice, il tuo CI può rilevare eventuali violazioni dell'accessibilità.
Conclusione
Per migliorare l'accessibilità della tua app Angular:
- Consente di attivare le regole sperimentali di accessibilità in Codelyzer.
- Esegui analisi tramite lint dell'accessibilità nell'intero progetto utilizzando l'interfaccia a riga di comando Angular.
- Risolvi tutti i problemi di accessibilità segnalati da codelyzer.
- Valuta la possibilità di utilizzare Lighthouse per i controlli dell'accessibilità in fase di runtime.