Audit UI/UX — 8 octobre 2026
Grille : Audit UI/UX. Procédure : skill audit-ux. Les bloquants sont
corrigés dans la même PR que ce rapport ; le reste est planifié dans la
roadmap.
Ce qui a été passé
| Plateforme | Couverture |
|---|---|
| App web | 22 écrans × clair/sombre × mobile (Pixel 7) et desktop (1280 px), en français et en néerlandais ; tous les écrans à 320 px ; axe (WCAG 2.2 AA) en clair et en sombre sur 15 pages |
| Site vitrine | /, /en/, /nl/ à 360 et 1440 px, clair et sombre ; rendu sans JavaScript ; débordement horizontal mesuré |
| Android | captures Roborazzi (Aujourd'hui, Tâches, Calendrier, Courses, formulaire, Réglages, hors ligne sombre) ; lint |
| Transverse | contraste WCAG calculé sur tous les tokens (texte, UI, couleurs de membres) ; clés de traduction (web : 0 manquante ; Android : 0 hors app_name et URL) |
Outils ajoutés pour les audits suivants : VISUAL_LOCALE=en|nl dans e2e/visual-review.spec.ts
(captures dans une autre langue), playwright.narrow.config.ts (320 px), et les pages Dépenses,
Menus, Plus et Revue dans les captures et dans l'audit axe.
Constats
Gravité : B bloquant (empêche la fusion), A à améliorer. Effort : S (< 1 h), M (une demi-journée), L (plusieurs jours).
Bloquants — corrigés dans cette PR
| Gr. | Plateforme | Écran | Constat | Correction | Effort |
|---|---|---|---|---|---|
| B | Web | Toutes (sombre) | Initiale blanche sur les pastilles de membre en sombre : 2,3:1 (sauge, ambre) | Token on-member : blanc en clair, #141012 en sombre (≥ 6,4:1) ; Android utilise le même token | S |
| B | Web, Android | Toutes (clair) | Initiale blanche sur sauge 3,86:1, ambre 3,64:1, océan 4,44:1 | Teintes claires assombries : sauge #557E60, océan #3C7BA2, ambre #9F691B (≥ 4,6:1) | S |
| B | Web | Boutons « Supprimer », toasts d'erreur, coches (sombre) | Blanc sur danger 2,4:1 et sur success 1,9:1 | Texte en surface (≥ 7,4:1 dans les deux thèmes) | S |
| B | Web | Courses | Nom du rayon coupé sur chaque ligne (« 🥕 Fr », « 🧀 Cr ») | Seul l'emoji est affiché, le menu garde le libellé complet | S |
| B | Web | Tâches, 320 px | « Tout le monde » coupé dans le filtre | Filtres sur une colonne sous 360 px | S |
| B | Web | Aujourd'hui, néerlandais | « Niet toege… » coupé dans la répartition ; barre de Grace invisible à 320 px | Nom et chiffres sur une ligne, barre pleine largeur dessous | S |
| B | Web, Android | Aujourd'hui, Bilan | Barres de répartition aux couleurs des membres (design system §1.5 : même couleur neutre) | Même couleur neutre pour chacun | S |
| B | Site | Accueil | Sans JavaScript, 49 éléments restent à opacity:0 (tout sous le premier écran) | Style <noscript> qui les affiche | S |
| B | Site | Accueil, 360 px | Défilement horizontal (halos décoratifs) | overflow-x: clip sur html | S |
| B | Android | Aujourd'hui | Titre « EN RETARD » et ligne entière en rouge (ton culpabilisant, rouge vif) | « À RATTRAPER » comme le web ; seul le chevron de priorité est coloré (warning / danger) | S |
À améliorer — planifiés
| Gr. | Plateforme | Écran | Constat | Correction proposée | Effort |
|---|---|---|---|---|---|
| A ✅ | Web | Calendrier mois, mobile | Pastilles coupées (« Pa… », « So… »), illisibles | Points comme sur Android + liste du jour touché sous la grille (lot 1) | M |
| A ✅ | Web | Calendrier semaine, mobile | 4 jours visibles, titres tronqués | Vue 3 jours sur mobile (lot 1) | M |
| A ✅ | Web | Calendrier, mobile | Astuce clavier (Alt + flèches) affichée sur téléphone | Astuce tactile seulement sur mobile (lot 1) | S |
| A ✅ | Web | Aujourd'hui, desktop | Colonne étroite au centre, beaucoup de vide à 1280 px | Deux colonnes : la liste, et à droite répartition, courses, budget du mois | M |
| A ✅ | Web | Tâches | Onglets de filtre coupés à droite sans indice de défilement | Dégradé de bord ou menu « Plus de filtres » | S |
| A ✅ | Web | Lignes de tâche, 320 px | Titres tronqués sans accès au texte entier | Deux lignes de titre avant l'ellipse | S |
| A ✅ | Web | Champs | Bordure des champs à 1,37:1 sur surface (WCAG 1.4.11 : 3:1 visé) | Token border-strong pour les champs | S |
| A ✅ | Web | Barre d'onglets, 320 px | « Aujourd'hui » touche le bord | Libellés plus courts ou icône seule sous 340 px | S |
| A ✅ | Web | Raccourcis N, /, T | Aucun test automatique | Parcours E2E clavier | S |
| A ✅ | Android | Cases de tâche | Cases carrées (Material) au lieu du cercle du design system | Composant TaskCheck rond, coche animée | M |
| A ✅ | Android | Tâches | Pas de titre d'écran (le champ de recherche est en haut) | Titre « Tâches » + bouton | S |
| A ✅ | Android | Captures | Pas de capture de Dépenses, Plus, sombre complet, police 200 % | Tests Roborazzi supplémentaires | M |
| A ✅ | Android | Aujourd'hui | Lignes sans carte, contrairement au web | Cartes surface arrondies comme le web | M |
| A ✅ | Web | Menus | Deux boutons vides par jour : liste longue | Grille semaine compacte sur desktop, ajout rapide au clavier | M |
| A ✅ | Site | Accueil | Vidéo de démonstration en bas de page seulement | Remonter une capture animée au-dessus de la ligne de flottaison sur mobile | S |
Ce qui n'a pas été vérifié
- TalkBack et les réglages Android réels (police système 200 %, mode avion) : pas d'appareil.
- Lighthouse : pas lancé dans le conteneur.
- Ordre du focus au clavier : couvert par axe (pas de violation), pas parcouru touche par touche.