Accessibilité
Fonctionnalités d'accessibilité de Volt, conformité WCAG AA et workflows clavier
Accessibilité
Conçu pour tous
Volt est pensé pour le clavier en premier et suit les standards WCAG 2.1 AA. Chaque action est accessible sans souris, chaque état est annoncé aux lecteurs d'écran, et les paramètres visuels s'adaptent à vos besoins.
Paramètres intégrés
Ouvrez Paramètres → Accessibilité pour activer :
| Option | Effet |
|---|---|
| Haut contraste | Augmente le ratio texte/fond au-delà des seuils WCAG AA (4,5:1 normal, 3:1 grand) |
| Animations réduites | Désactive les animations d'apparition, transitions de résultats et effets de parallaxe |
| Focus visible | Force un contour épais et contrasté sur tous les éléments focusables |
| Taille de police | Met à l'échelle le texte de l'interface de 100% à 150% |
| Indices lecteur d'écran | Annonce le nombre de résultats, la sélection courante et les états de chargement via aria-live |
La réduction des animations respecte par défaut votre préférence système prefers-reduced-motion — vous n'avez besoin de la forcer dans Volt que pour un comportement plus strict.
Navigation 100% clavier
Toutes les fonctionnalités de Volt sont accessibles au clavier. Aucune action n'exige la souris.
Ctrl/Cmd + Espace— ouvrir Volt↑/↓— parcourir les résultatsTab— autocompléter avec le titre du résultat sélectionnéEntrée— exécuterCtrl/Cmd + K— ouvrir le menu d'actions pour le résultat sélectionnéÉchap— fermer
Volt piège le focus dans les modales : Tab et Maj + Tab cyclent entre les éléments interactifs sans s'échapper vers la barre d'adresse du navigateur. Échap ferme toujours la modale du dessus.
La fenêtre de paramètres est entièrement navigable au clavier : tabulez entre les sections, flèches dans les listes d'options, espace pour basculer les cases à cocher, entrée pour valider.
Lecteurs d'écran
Volt est testé avec :
- NVDA (Windows) — gratuit, https://www.nvaccess.org/
- VoiceOver (macOS) — intégré,
Cmd + F5 - Orca (Linux) — intégré sur la plupart des distros
Ce que Volt annonce :
| Événement | Annonce |
|---|---|
| Résultats mis à jour | « N résultats trouvés. Utilisez les flèches. » |
| Résultat sélectionné (flèches) | Titre, sous-titre et type de l'élément sélectionné |
| Action exécutée | Confirmation de l'action (« X lancé », etc.) |
| Chargement | « Recherche… » via région live polie |
| Erreur | Message d'erreur via région live assertive |
La liste de résultats est implémentée en role="listbox" + aria-activedescendant ; chaque résultat est une option avec aria-selected.
Contraste des couleurs
| Élément | Thème sombre | Thème clair | Standard |
|---|---|---|---|
| Texte principal | 13,6:1 | 12,8:1 | ≥ 4,5:1 |
| Texte secondaire | 7,2:1 | 6,9:1 | ≥ 4,5:1 |
| UI désactivée | 3,4:1 | 3,2:1 | ≥ 3:1 |
| Contour de focus | 5,1:1 | 4,8:1 | ≥ 3:1 |
Tous les ratios audités avec WebAIM contrast checker et l'onglet accessibilité de Chrome DevTools.
Patterns appliqués
- ResultsList —
role="listbox",aria-activedescendant - ResultItem —
role="option",aria-selected, gestionnaire clavier pourEntrée/Espace - SearchBar —
role="status"+aria-live="polite"pour le compteur de résultats - Modal — piège de focus,
Échappour fermer,aria-labelledby - ErrorMessage —
role="alert" - Toast —
role="status" - HelpDialog —
role="list"pour les groupes de raccourcis
Signaler un problème d'accessibilité
Si quelque chose ne fonctionne pas avec votre techno d'assistance, dites-le nous. Les régressions d'accessibilité sont traitées comme des bugs.
- Issues : https://github.com/VoltLaunchr/Volt/issues
- Label :
a11y - À inclure : OS, lecteur d'écran (le cas échéant), version de Volt et l'action qui a échoué