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 individuare i bug di accessibilità direttamente nell'editor di testo durante la programmazione.
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, circa 10 sono regole per l'applicazione dei 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 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 è attivo per impostazione predefinita. Per altri editor, consulta il file README di TSLint.
Una volta configurati 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
:
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 è 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 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:
- Attiva le regole di accessibilità sperimentali 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.