Vuoi rendere il tuo sito Angular accessibile a tutti? Sei nel 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 World Health Report, più di un miliardo di persone, ovvero circa il 15% della popolazione mondiale, ha qualche forma di disabilità. Pertanto, 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 rilevare i bug di accessibilità direttamente nel tuo editor di testo durante la codifica.
Utilizzo di Codelyzer per rilevare elementi inaccessibili
codelyzer è uno strumento che si basa su TSLint e controlla se i progetti TypeScript di Angular rispettano un insieme di regole di linting. I progetti configurati con l'interfaccia a riga di comando (CLI) 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à forniti da Codelyzer e sulle relative motivazioni, consulta l'articolo Nuove regole di accessibilità in Codelyzer.
Al momento, tutte le regole di accessibilità sono sperimentali e disattivate per impostazione predefinita. Puoi attivarli aggiungendoli al file di configurazione di 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, consulta il file README di TSLint.
Con i controlli di accessibilità di Codelyzer configurati, viene visualizzato un popup che mostra gli errori di accessibilità nei file TypeScript o nei modelli in linea durante la programmazione:
Per eseguire il linting dell'intero progetto (inclusi i modelli esterni), utilizza il comando ng lint:
Integrazione di 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 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 utilizzando l'analisi dinamica.
Entrambi gli strumenti possono essere componenti utili del flusso di sviluppo. Lighthouse ha una copertura migliore grazie ai controlli che esegue, mentre Codelyzer ti consente di eseguire l'iterazione più velocemente ricevendo feedback costanti nell'editor di testo.
Applicazione dei controlli di accessibilità nell'integrazione continua
L'introduzione di controlli di accessibilità statici nell'integrazione continua (CI) può essere un grande miglioramento per il flusso di sviluppo. Con 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 CI può segnalare eventuali violazioni dell'accessibilità.
Conclusione
Per migliorare l'accessibilità della tua app Angular:
- Consente di attivare le regole sperimentali di accessibilità in Codelyzer.
- Esegui il linting dell'accessibilità nell'intero progetto utilizzando Angular CLI.
- Risolvi tutti i problemi di accessibilità segnalati da codelyzer.
- Valuta la possibilità di utilizzare Lighthouse per i controlli dell'accessibilità in fase di runtime.