Accessibilité
L'objectif est le niveau WCAG 2.2 A et AA (exigence NFR-01 des spécifications) : l'application doit être utilisable par une personne malvoyante, au clavier seul, ou avec un lecteur d'écran.
Les contrastes
Le texte doit avoir un contraste d'au moins 4,5:1 avec son fond. Les couleurs principales, mesurées :
| Texte | Fond | Contraste | |
|---|---|---|---|
text/default | Blanc | 17,7:1 | ✓ |
brand/primary | Blanc | 10,7:1 | ✓ |
text/muted | Blanc | 7,6:1 | ✓ |
text/muted | surface/page | 6,9:1 | ✓ |
brand/accent-strong | Blanc | 7,1:1 | ✓ |
brand/danger | Blanc | 6,5:1 | ✓ |
text/default | brand/accent | 10,5:1 | ✓ |
| Blanc | brand/primary | 10,7:1 | ✓ |
Le rouge a changé
La première version utilisait un rouge plus clair, sous les 4,5:1. Il est passé à #B91C1C (6,47:1) pour lever cette exception.
Le sable #E8C18E n'est jamais utilisé pour du texte sur fond blanc : il sert de fond (pauses, bouton Pause), avec du texte foncé dessus. Pour un texte ou un trait couleur sable, on utilise brand/accent-strong.
Jamais la couleur seule
Une personne daltonienne doit comprendre chaque écran. Donc :
- chaque statut a une icône et un texte ;
- les pauses dans la frise sont en sable et décrites dans la liste des événements ;
- chaque graphique a une alternative textuelle (le total, les valeurs).
Le clavier (web)
- Un focus visible sur chaque élément, en
brand/primary. - Un lien « Aller au contenu » en début de page.
- Les onglets de la page des heures se parcourent avec les flèches, Début et Fin.
Les lecteurs d'écran
| Règle | Web | Mobile |
|---|---|---|
| Chaque champ a un libellé | <label> | accessibilityLabel |
| Le nom accessible commence par le texte visible | ✓ | ✓ |
| Les changements de statut sont annoncés | aria-live | Les toasts ont accessibilityRole="alert" |
| La langue est déclarée | <html lang> suit la langue choisie | La langue d'i18next |
| Les onglets sont annoncés comme tels | accessibilityRole="tab" et l'état sélectionné | |
| Le pointage est possible sans geste complexe | Un clic | Un double tap avec VoiceOver ou TalkBack déclenche le bouton sans le maintenir |
Les petits écrans
Le site web s'affiche sans défilement horizontal jusqu'à 320 px de large, l'équivalent d'un zoom à 400 %, en clair comme en sombre.
Les emails
Chaque email est envoyé en HTML et en texte brut, avec le même contenu (règle BR-17).