accessibility-widget/README.md

accessibility-widget

Widget d'accessibilité React aligné RGAA 4.1 / WCAG 2.1 AA, conçu pour rendre les sites et services numériques accessibles à toutes et à tous.

Installation

npm install a11y-widget

Usage

import { AccessibilityWidget } from "accessibility-widget";
import "accessibility-widget/dist/accessibility-widget.css";

export default function App() {
  return (
    <>
      <AccessibilityWidget position="bottom-right" lang="fr" />
    </>
  );
}

Props

Prop	Type	Défaut	Description
position	"bottom-right" | "bottom-left" | "top-right" | "top-left"	"bottom-right"	Position du bouton flottant
lang	"fr" | "en"	"fr"	Langue de l'interface
storageKey	string	"a11y-widget-prefs"	Clé localStorage pour la persistance des préférences

Fonctionnalités

RGAA 3 - Couleurs

• Contraste élevé
• Inversion des couleurs

RGAA 10 - Présentation de l'information

• Taille du texte (×1 / ×1.2 / ×1.4 / ×1.6)
• Hauteur de ligne augmentée
• Espacement des lettres
• Espacement des mots
• Alignement du texte à gauche
• Police lisible (serif) ou dyslexique (OpenDyslexic)

RGAA 13 - Consultation

• Réduction des animations
• Mise en pause des animations

Navigation au clavier

• Indicateur de focus renforcé
• Mise en évidence des liens

Aide à la lecture

• Guide de lecture (réticule horizontal)
• Masque de lecture

Accessibilité du widget lui-même

Le widget est lui-même conforme RGAA :

• Bouton trigger avec aria-label, aria-expanded, aria-haspopup="dialog"
• Dialog avec role="dialog", aria-modal, aria-labelledby
• Focus-trap dans le panneau (Tab / Shift+Tab)
• Fermeture par Échap avec retour du focus sur le trigger
• Switches avec role="switch", aria-checked, aria-labelledby
• Annonces des changements d'état via aria-live="polite"
• Compatible NVDA + Firefox, JAWS + Firefox, VoiceOver + Safari, TalkBack + Chrome

Environnements de test recommandés (RGAA)

Environnement	OS
NVDA (dernière version) + Firefox	Windows
JAWS (version précédente) + Firefox	Windows
VoiceOver (dernière version) + Safari	macOS / iOS
TalkBack (dernière version) + Chrome	Android

Usage avancé

Usage headless (hooks uniquement)

import { useA11yStore, useA11yEffects } from "accessibility-widget";

function MonWidget() {
  const { state, dispatch } = useA11yStore("a11y-widget-prefs");
  useA11yEffects(state);

  return (
    <button onClick={() => dispatch({ type: "TOGGLE_HIGH_CONTRAST" })}>
      Contraste élevé
    </button>
  );
}

Personnalisation CSS

Toutes les couleurs et dimensions sont en custom properties CSS :

:root {
  --a11y-color-bg: #1a1a2e; /* couleur du bouton et header */
  --a11y-color-accent: #005fcc; /* couleur d'accentuation */
  --a11y-panel-width: 340px; /* largeur du panneau */
  --a11y-radius: 12px; /* rayon des bordures */
}

Référence

• RGAA 4.1 - Critères et tests
• RGAA 4.1 - Environnements de test
• WCAG 2.1

Licence

MIT © Jessy DAVID