Vuoi rendere il tuo sito Angular accessibile a tutti? Questo è il posto giusto.
Se rendi accessibile la tua app, tutti gli utenti, inclusi quelli con esigenze speciali, possono utilizzarla e comprenderne i contenuti. Secondo il World Health Report, più di un miliardo di persone, circa il 15% della popolazione mondiale, hanno una qualche forma di disabilità. L'accessibilità è quindi 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 rilevare i bug di accessibilità direttamente nell'editor di testo durante la programmazione.
Utilizzare il codelyzer per rilevare gli elementi inaccessibili
codelyzer è uno strumento che si basa su TSLint e verifica 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 Angolare includono il codelyzer per impostazione predefinita.
il codelyzer ha oltre 50 regole per verificare se un'applicazione Angular segue le best practice. Di queste, esistono circa 10 regole per applicare i criteri di accessibilità. Per scoprire di più sui vari controlli di accessibilità forniti dal 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 attivarle 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 gli altri editor, controlla la TSLint README.
Dopo aver configurato i controlli di accessibilità del codelyzer, durante la programmazione viene visualizzato un popup che mostra gli errori di accessibilità nei file TypeScript o nei modelli incorporati:
Per eseguire il analisi tramite lint sull'intero progetto (inclusi i modelli esterni), utilizza il comando ng lint:
Integrazione del 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 è il momento in cui vengono eseguiti i controlli. Codelyzer analizza l'applicazione in modo statico durante la 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 la tua applicazione ed esegue diversi controlli utilizzando l'analisi dinamica.
Entrambi gli strumenti possono essere parti utili del tuo flusso di sviluppo. Lighthouse ha una copertura migliore in base ai controlli eseguiti, mentre il codelyzer ti consente di eseguire l'iterazione più velocemente grazie a un feedback costante nell'editor di testo.
Applicare i controlli di accessibilità nell'integrazione continua
L'introduzione di controlli di accessibilità statici nell'integrazione continua (CI) può essere un ottimo miglioramento per il tuo flusso di sviluppo. Con il codelyzer puoi applicare facilmente determinate regole di accessibilità o altre pratiche eseguendo ng lint su ogni modifica del codice (ad esempio per ogni nuova richiesta di pull).
In questo modo, anche prima di procedere con la revisione del codice, la tua CI può indicare eventuali violazioni dell'accessibilità.
Conclusione
Per migliorare l'accessibilità della tua app Angular:
- Attiva le regole di accessibilità sperimentali nel codelyzer.
- Esegui il analisi tramite lint di accessibilità sull'intero progetto utilizzando l'interfaccia a riga di comando Angular.
- Risolvi tutti i problemi di accessibilità segnalati dal codelyzer.
- Valuta la possibilità di utilizzare Lighthouse per i controlli dell'accessibilità in fase di runtime.