Controllo dell'accessibilità con reagire-axe ed eslint-plugin-jsx-a11y

Il tuo sito React non è progressivo se non è accessibile. Il controllo durante lo sviluppo può aiutarti a individuare eventuali problemi.

Houssein Djirdeh

react-axe è una libreria che controlla un'applicazione React e registra eventuali problemi di accessibilità nella console di Chrome DevTools. Utilizza la libreria di test open source axe per segnalare eventuali problemi e la relativa gravità.

eslint-plugin-jsx-a11y è un plug-in ESLint che identifica e applica una serie di regole di accessibilità direttamente in JSX. L'utilizzo di questa funzione in combinazione con uno strumento che verifica il DOM sottoposto a rendering finale, come react-axe, può aiutarti a individuare e risolvere eventuali problemi di accessibilità sul tuo sito.

Perché è utile?

È fondamentale creare siti web che forniscano a ogni utente, indipendentemente dalla sua disabilità o dalle sue restrizioni, la possibilità di accedere ai suoi contenuti. L'utilizzo di librerie di controllo come react-axe e eslint-plugin-jsx-a11y durante lo sviluppo dell'applicazione React espone automaticamente eventuali problemi di accessibilità non appena compaiono.

Uso di eslint-plugin-jsx-a11y

React supporta già la scrittura di elementi HTML accessibili all'interno della sintassi JSX. Ad esempio, devi utilizzare solo l'attributo htmlFor anziché for per collegare un'etichetta a un elemento del modulo specifico in un componente React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

La documentazione sull'accessibilità di React spiega tutte le sfumature della gestione dei problemi di accessibilità all'interno di un componente di React. Per semplificare l'individuazione di questi problemi durante lo sviluppo, per impostazione predefinita Create React App (CRA) include il plug-in eslint-plugin-jsx-a11y per ESLint.

Per abilitare il lint preconfigurato fornito da CRA:

1. Installa il plug-in ESLint appropriato per il tuo editor di codice
2. Aggiungi un file .eslintrc.json al progetto

{
  "extends": "react-app"
}

Verranno visualizzati alcuni problemi di accessibilità comuni.

Per verificare la presenza di un numero ancora maggiore di regole di accessibilità, modifica il file in modo da includere automaticamente tutte le regole consigliate dal plug-in:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Se vuoi un sottoinsieme di regole ancora più restrittivo, passa alla modalità con restrizioni:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

La documentazione del progetto fornisce informazioni sulle differenze tra la modalità consigliata e la modalità con restrizioni.

Usa l'asse di reazione

eslint-plugin-jsx-a11y può aiutarti a individuare facilmente eventuali problemi di accessibilità in JSX, ma non verifica nessuno dell'output HTML finale. react-axe è una libreria che fa esattamente questo, fornendo un wrapper React attorno allo strumento di test axe-core di Deque Labs.

Per iniziare, installa la libreria come dipendenza per lo sviluppo:

npm install --save-dev react-axe

Ora devi solo inizializzare il modulo in index.js:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

L'importazione dinamica viene utilizzata qui per caricare la libreria solo quando non è in modalità di produzione prima del rendering e dell'avvio del componente App principale. Ciò garantisce che non sia inutilmente incluso nel bundle di produzione finale.

Ora, quando esegui l'applicazione durante lo sviluppo, i problemi vengono visualizzati direttamente nella console Chrome DevTools.

A ogni violazione viene assegnato anche un livello di gravità. Questi livelli sono:

• Bassa
• Moderato
• Grave
• Critico

Conclusione

1. Se stai creando un sito con React, includi fin da subito il controllo dell'accessibilità nel flusso di lavoro per rilevare eventuali problemi durante la creazione dei componenti.
2. Usa eslint-plugin-jsx-a11y per aggiungere controlli di accessibilità al flusso di lavoro di analisi tramite lint. CRA è già incluso, ma passa alla modalità consigliata o restrittiva.
3. Oltre ai test di sviluppo locale, includi react-axe nell'applicazione per rilevare eventuali problemi nel DOM finale sottoposto a rendering. Non includerlo nel bundle di produzione.