Accessibilité en React

Utilisation des attributs ARIA : Bouton d'Alerte en React

Les attributs ARIA transforment les éléments HTML génériques en composants riches et accessibles. Voici un exemple pratique d'un composant d'alerte avec gestion des états et feedback utilisateur :

Ce composant React affiche un bouton interactif qui déclenche une alerte lorsqu'il est cliqué. Il utilise une prop pour personnaliser le message affiché.

1. Code du Composant

Voici le code du composant AlertButton, qui prend un message en paramètre et l'affiche dans une boîte d'alerte.

📋 Copier le code

import React from 'react';

function AlertButton({ message }) {
return (
<button
	onClick={() => alert(message)}
	aria-label="Alerte"
	role="button"
>
	Cliquez ici
</button>
);
}

export default AlertButton;

Explication du code :

• aria-label : Fournit une description textuelle pour les lecteurs d'écran.
• role : Indique le rôle de l'élément (ici, un bouton).

Bonnes pratiques ARIA supplémentaires :

• aria-describedby : pour lier des descriptions détaillées
• aria-expanded : pour les éléments dépliables (accordéons, menus)
• aria-live : pour annoncer les changements dynamiques de contenu
• aria-pressed : pour les boutons à bascule (toggle)

Utilisation des balises sémantiques

HTML5 offre une palette de balises sémantiques qui structurent logiquement votre application. Cette structure permet aux technologies d'assistance de naviguer efficacement dans le contenu. Voici un exemple d'application React avec une architecture sémantique complète :

📋 Copier le code

import React from 'react';

function App() {
return (
<div>
	<header>
		<h1>Mon Application</h1>
	</header>
	<main>
		<p>Contenu principal de l'application.</p>
	</main>
	<footer>
		<p>Pied de page</p>
	</footer>
</div>
);
}

export default App;

Explication du code :

• <header> : Utilisé pour le contenu d'en-tête de la page.
• <main> : Utilisé pour le contenu principal de la page.
• <footer> : Utilisé pour le contenu de pied de page.

Autres balises sémantiques essentielles :

• <nav> : pour les menus de navigation principaux
• <section> : pour regrouper du contenu thématique
• <article> : pour du contenu autonome (articles, posts)
• <aside> : pour du contenu complémentaire (sidebar, publicités)
• <figure> et <figcaption> : pour les images avec légendes

Accessibilité des formulaires

Les formulaires représentent souvent le principal point d'interaction dans une application. Un formulaire inaccessible peut exclure complètement certains utilisateurs. Voici les éléments indispensables :

📋 Copier le code

import React from 'react';

function AccessibleForm() {
return (
<form>
	<label htmlFor="name">Nom :</label>
	<input type="text" id="name" name="name" required />

	<label htmlFor="email">Email :</label>
	<input type="email" id="email" name="email" required />

	<button type="submit">Soumettre</button>
</form>
);
}

export default AccessibleForm;

Explication du code :

• label : Associe un texte descriptif à chaque champ de formulaire.
• htmlFor : Lie le label à l'élément d'entrée correspondant via l'attribut id.
• required : Indique que le champ est obligatoire.

Techniques avancées pour les formulaires accessibles :

• Messages d'erreur liés avec aria-describedby
• Groupement des champs avec <fieldset> et <legend>
• Indication visuelle ET textuelle des champs obligatoires
• Instructions claires avant le formulaire
• Validation en temps réel avec annonces ARIA Live

Navigation au clavier et focus management

La navigation au clavier est cruciale pour les utilisateurs qui ne peuvent pas utiliser de souris. React offre des outils spécifiques pour gérer le focus programmatiquement :

📋 Copier le code

import React, { useRef, useEffect } from 'react';

function AccessibleModal({ isOpen, onClose, title, children }) {
  const modalRef = useRef();
  const previousFocus = useRef();

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement;
      modalRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div 
      className="modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div 
        ref={modalRef}
        className="modal-content"
        tabIndex={-1}
        onKeyDown={handleKeyDown}
      >
        <h2 id="modal-title">{title}</h2>
        {children}
        <button onClick={onClose} aria-label="Fermer la modale">
          ×
        </button>
      </div>
    </div>
  );
}

export default AccessibleModal;

Explication du code :

• useRef : Permet de gérer les références DOM pour le focus
• tabIndex={-1} : Permet de donner le focus programmatiquement
• aria-modal : Indique que c'est une fenêtre modale
• Gestion Escape : Ferme la modale avec la touche Échap

Utilisation de React-axe pour vérifier l'accessibilité

Dans un contexte professionnel, les tests d'accessibilité automatisés sont indispensables pour maintenir la qualité. React-axe détecte automatiquement de nombreux problèmes d'accessibilité pendant le développement, vous faisant économiser un temps précieux lors des audits.

Installation de React-axe

Commencez par installer React-axe via npm :

npm install @axe-core/react

Utilisation de React-axe

📋 Copier le code

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import axe from '@axe-core/react';

if (process.env.NODE_ENV !== 'production') {
axe(React, ReactDOM, 1000);
}

ReactDOM.render(<App />, document.getElementById('root'));

Explication du code :

• axe : Initialise React-axe pour vérifier l'accessibilité.
• 1000 : Délai en millisecondes entre les vérifications d'accessibilité.

Conclusion

Avec ce tutoriel. Vous maîtrisez maintenant les fondamentaux de l'accessibilité en React. Ces techniques - attributs ARIA, balises sémantiques, gestion du focus, et tests automatisés - sont vos outils pour créer des applications inclusives et conformes aux standards internationaux (WCAG 2.1).

Prochaines étapes recommandées :

• Auditez vos applications existantes avec React-axe
• Testez avec des vraies technologies d'assistance (lecteurs d'écran)
• Intégrez les tests d'accessibilité dans votre pipeline CI/CD
• Sensibilisez votre équipe aux enjeux de l'accessibilité

L'accessibilité n'est pas une contrainte, c'est une opportunité d'innovation et d'inclusion.

Pour continuer votre apprentissage, découvrez comment gérer les états asynchrones dans vos applications React dans le chapitre suivant : Gestion des États Asynchrones.