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

Il sito di 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 una Reagisci l'applicazione e registra eventuali problemi di accessibilità in Chrome DevTools Google Cloud. Utilizza l'ascia open source libreria di test per segnalare eventuali problemi e la loro gravità.

eslint-plugin-jsx-a11y è un plug-in ESLint che identifica e applica una serie di regole di accessibilità direttamente in JSX. Usalo in combinazione con uno strumento che verifica la finalizzazione un DOM sottoposto a rendering, come react-axe, può aiutarti a trovare e correggere qualsiasi sul tuo sito.

Perché è utile?

È fondamentale creare siti web che offrano a ogni utente, indipendentemente compromissione o limitazione, la capacità di accedere ai suoi contenuti. Utilizzo dell'auditing librerie come react-axe e eslint-plugin-jsx-a11y durante della tua applicazione React esporrà automaticamente problemi di accessibilità non appena compaiono.

Utilizzare eslint-plugin-jsx-a11y

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

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

La Documentazione sull'accessibilità delle reazioni tratta tutte le sfumature della gestione dei problemi di accessibilità all'interno di una reazione di strumento di authoring. Per facilitare l'individuazione di questi problemi durante lo sviluppo, React App (CRA) include il plug-in eslint-plugin-jsx-a11y per ESLint di predefinito.

Per attivare l'analisi tramite lint preconfigurata fornita 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"
}

Ora verranno mostrati alcuni problemi di accessibilità comuni.

Per verificare la presenza di ulteriori regole di accessibilità, modifica il file impostandolo automaticamente includi tutte le regole consigliate dal plug-in:

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

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

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

Il progetto documentazione fornisce informazioni sulle differenze tra la modalità consigliata e la modalità restrittiva.

Usa l'ascia di reazione

eslint-plugin-jsx-a11y può aiutarti a individuare facilmente eventuali problemi di accessibilità nel file JSX, ma non esegue il test dell'output HTML finale. react-axe è una libreria che fa esattamente questo fornendo un wrapper React attorno al 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'));
}

R importazione dinamica viene utilizzato qui per caricare la libreria solo quando non è in modalità di produzione prima il rendering e l'avvio del componente principale App. In questo modo viene garantito che incluse inutilmente nel bundle di produzione finale.

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

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

• Minorenne
• Moderata
• Grave
• Critico

Conclusione

1. Se stai creando un sito con React, includi il controllo dell'accessibilità nella sezione il flusso di lavoro per individuare i problemi durante la creazione dei componenti.
2. Usa eslint-plugin-jsx-a11y per aggiungere controlli di accessibilità ai tuoi analisi tramite lint nel tuo flusso di lavoro. CRA è già inclusa nella confezione, ma passa alla consigliata o in modalità restrittiva.
3. Oltre ai test per lo sviluppo locale, includi react-axe nel tuo un'applicazione per individuare eventuali problemi sul DOM finale sottoposto a rendering. Non includerlo nel tuo bundle di produzione.