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: