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 comprendere i contenuti. Secondo il World Health Report, più di un miliardo di persone, 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 nell'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 Angular TypeScript seguono un insieme di regole di linting. 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, circa 10 riguardano 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 attivarli aggiungendoli 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, consulta il 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 incorporati durante la codifica:
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 staticamente l'applicazione in fase di sviluppo, senza eseguirla. Ciò significa che durante lo sviluppo puoi ricevere feedback diretti nell'editor di testo o nel terminale. Al contrario, Lighthouse esegue l'applicazione ed esegue una serie di controlli utilizzando l'analisi dinamica.
Entrambi gli strumenti possono essere utili nel flusso di sviluppo. Lighthouse offre una copertura migliore grazie ai controlli che esegue, mentre Codelyzer ti consente di eseguire iterazioni più rapidamente 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ò rappresentare un ottimo miglioramento del 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 pull).
In questo modo, anche prima di procedere alla revisione del codice, l'integrazione continua può indicarti se sono presenti 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à sull'intero progetto utilizzando Angular CLI.
- Correggi tutti i problemi di accessibilità segnalati da codelyzer.
- Valuta la possibilità di utilizzare Lighthouse per i controlli di accessibilità in fase di runtime.