adeyanjufuhad/astrolabe

Règles concises pour construire des IU accessibles, rapides et agréables. Utilisez MUST/SHOULD/NEVER pour guider les décisions.

Interactions

Clavier

• MUST : Prise en charge complète du clavier selon le WAI-ARIA APG
• MUST : Anneaux de focus visibles et non obstrués (:focus-visible ; grouper avec :focus-within) ; les éléments fixes/sticky ne couvrent jamais le focus
• MUST : Gérer le focus (piéger, déplacer, retourner) selon les modèles APG
• NEVER : outline: none sans remplacement visible du focus

Cibles et saisie

• MUST : Zone de clic cible ≥24px (mobile ≥44px) ; si la zone visuelle est <24px, agrandir la zone de clic
• MUST : Taille de police <input> mobile ≥16px pour éviter le zoom iOS
• NEVER : Désactiver le zoom du navigateur (user-scalable=no, maximum-scale=1)
• MUST : touch-action: manipulation pour éviter le zoom au double-tap
• SHOULD : Définir -webkit-tap-highlight-color pour correspondre au design

Formulaires

• MUST : Entrées compatibles avec l'hydratation (pas de perte de focus/valeur)
• NEVER : Bloquer le collage dans <input>/<textarea>
• MUST : Les boutons de chargement affichent un spinner et conservent le libellé d'origine
• MUST : Entrée soumet l'élément ciblé ; dans <textarea>, ⌘/Ctrl+Entrée soumet
• MUST : Laisser le bouton de soumission actif jusqu'au début de la requête ; puis désactiver avec spinner
• MUST : Accepter le texte libre, valider après—ne pas bloquer la saisie
• MUST : Permettre la soumission de formulaire incomplet pour faire apparaître la validation
• MUST : Erreurs en ligne à côté des champs ; lors de la soumission, focus sur la première erreur
• MUST : autocomplete + name significatif ; type et inputmode corrects
• SHOULD : Désactiver la vérification orthographique pour les e-mails/codes/noms d'utilisateur
• SHOULD : Les placeholders se terminent par … et montrent un exemple de modèle
• MUST : Avertir en cas de modifications non sauvegardées avant la navigation
• MUST : Compatible avec les gestionnaires de mots de passe et la 2FA ; autoriser le collage de codes
• MUST : Supprimer les espaces de fin pour gérer l'expansion du texte
• MUST : Pas de zones mortes sur les cases à cocher/boutons radio ; l'étiquette+le contrôle partagent une seule zone de clic

État et navigation

• MUST : L'URL reflète l'état (liens profonds pour les filtres/onglets/pagination/panneaux développés)
• MUST : Précédent/Suivant restaure la position de défilement
• MUST : Les liens utilisent <a>/<Link> pour la navigation (prise en charge Cmd/Ctrl/clic molette)
• NEVER : Utiliser <div onClick> pour la navigation

Feedback

• SHOULD : IU optimiste ; se synchroniser sur la réponse ; en cas d'échec, annuler ou proposer Annuler
• MUST : Confirmer les actions destructrices ou offrir une fenêtre Annuler
• MUST : Utiliser aria-live poli pour les toasts/validation en ligne
• SHOULD : Points de suspension (…) pour les options ouvrant des suites ("Renommer…") et les états de chargement ("Chargement…")

Toucher et glisser

• MUST : Cibles généreuses, affordances claires ; éviter les interactions capricieuses
• MUST : Retarder la première infobulle ; les suivantes instantanées
• MUST : overscroll-behavior: contain dans les modales/tiroirs
• SHOULD : Lors de la suppression du rebond de la page, définir overscroll-behavior: none sur <html> à l'intérieur de @media (pointer: fine) ; conserver les valeurs par défaut pour les pointeurs grossiers pour le pull-to-refresh. Tester les appareils tactiles hybrides : pointer décrit l'entrée principale, et none désactive également le chaînage de défilement et la navigation native par glissement
• MUST : Pendant le glisser, désactiver la sélection de texte et définir inert sur les éléments glissés
• MUST : Les gestes de glissement/balayage/pincement/chemin ont une alternative tactile/clavier et clavier, sauf si essentiel
• MUST : Si cela semble cliquable, cela doit être cliquable

Autofocus

• SHOULD : Autofocus sur le bureau avec une seule entrée principale ; rarement sur mobile

Animation

• MUST : Respecter prefers-reduced-motion (fournir une variante réduite ou désactiver)
• SHOULD : Préférer CSS > API Web Animations > bibliothèques JS
• MUST : Animer uniquement les propriétés compatibles avec le compositeur (transform, opacity)
• NEVER : Animer les propriétés de mise en page (top, left, width, height)
• NEVER : transition: all—lister les propriétés explicitement
• SHOULD : Animer uniquement pour clarifier la cause/effet ou ajouter un plaisir délibéré
• SHOULD : Choisir l'assouplissement pour correspondre au changement (taille/distance/déclencheur)
• MUST : Animations interruptibles et pilotées par l'entrée ; la lecture automatique uniquement pour les boucles non essentielles et muettes
• MUST : La lecture automatique de mouvement >5s avec d'autres contenus a des commandes de pause, d'arrêt ou de masquage
• MUST : transform-origin correct (le mouvement commence là où il devrait "physiquement")
• MUST : Transformations SVG sur le wrapper <g> avec transform-box: fill-box

Mise en page

• SHOULD : Alignement optique ; ajuster ±1px lorsque la perception surpasse la géométrie
• MUST : Alignement délibéré sur la grille/ligne de base/bords—pas de placement accidentel
• SHOULD : Équilibrer les verrouillages icône/texte (poids/taille/espacement/couleur)
• MUST : Vérifier sur mobile, ordinateur portable, ultra-large (simuler ultra-large à 50% de zoom)
• MUST : Respecter les zones de sécurité (env(safe-area-inset-*))
• MUST : Éviter les barres de défilement indésirables ; corriger les débordements
• SHOULD : Flex/grid plutôt que la mesure JS pour la mise en page

Contenu et accessibilité

• SHOULD : Aide en ligne d'abord ; les infobulles en dernier recours
• MUST : Les squelettes reflètent le contenu final pour éviter le déplacement de mise en page
• MUST : <title> correspond au contexte actuel
• MUST : Pas d'impasse ; toujours offrir une prochaine étape/récupération
• MUST : Concevoir les états vides/clairsemés/denses/erreurs
• SHOULD : Guillemets courbes (“ ”) ; éviter les veuves/orphelins (text-wrap: balance)
• MUST : font-variant-numeric: tabular-nums pour les comparaisons de nombres
• MUST : Indices d'état redondants (pas uniquement par couleur) ; les icônes ont des étiquettes de texte
• MUST : Les noms accessibles existent même lorsque les visuels omettent les étiquettes
• MUST : Utiliser le caractère … (pas ...)
• MUST : scroll-margin-top sur les titres ; lien "Passer au contenu" ; <h1>–<h6> hiérarchiques
• MUST : Résistant au contenu généré par l'utilisateur (court/moyen/très long)
• MUST : Dates/heures/nombres adaptés à la locale (Intl.DateTimeFormat, Intl.NumberFormat)
• SHOULD : translate="no" sur les noms de marque, les jetons de code et les identifiants pour éviter une traduction automatique déformée
• MUST : aria-label précis ; éléments décoratifs aria-hidden
• MUST : Les boutons à icône uniquement ont un aria-label descriptif
• MUST : Préférer la sémantique native (button, a, label, table) avant ARIA
• MUST : Les médias ont des légendes/transcriptions/descriptions selon le cas ; les contrôles sont utilisables au clavier ; les médias décoratifs cachés des technologies d'assistance
• MUST : Espaces insécables : 10 MB, ⌘ K, noms de marque

Gestion du contenu

• MUST : Les conteneurs de texte gèrent le contenu long (truncate, line-clamp-*, break-words)
• MUST : Les enfants Flex ont besoin de min-w-0 pour permettre la troncature
• MUST : Gérer les états vides—pas d'IU cassée pour les chaînes/tableaux vides

Performance

• SHOULD : Tester en mode basse consommation iOS et Safari macOS
• MUST : Mesurer de manière fiable (désactiver les extensions qui faussent le runtime)
• MUST : Suivre et minimiser les re-rendus (React DevTools/React Scan)
• MUST : Profiler avec limitation CPU/réseau
• MUST : Regrouper les lectures/écritures de mise en page ; éviter les reflows/repaints
• MUST : Les mutations (POST/PATCH/DELETE) ciblent <500ms
• SHOULD : Préférer les entrées non contrôlées ; les entrées contrôlées peu coûteuses par frappe
• MUST : Virtualiser les longues listes (>50 éléments)
• MUST : Précharger les images au-dessus de la ligne de flottaison ; chargement différé pour le reste
• MUST : Empêcher le CLS (dimensions d'image explicites)
• SHOULD : <link rel="preconnect"> pour les domaines CDN
• SHOULD : Polices critiques : <link rel="preload" as="font"> avec font-display: swap
• SHOULD : <video autoplay muted loop playsinline> plutôt que GIF animé ; fournir une alternative fixe/réduite en mouvement
• SHOULD : Les courtes boucles non essentielles incluent une source <picture> Safari H.264 MP4, une condition média prefers-reduced-motion, et un fallback fixe

Mode sombre et thèmes

• MUST : color-scheme: dark sur <html> pour les thèmes sombres
• SHOULD : <meta name="theme-color"> correspond à la couleur de fond de la page
• MUST : <select> natif : background-color et color explicites (correctif Windows)

Hydratation

• MUST : Les entrées avec value nécessitent onChange (ou utiliser defaultValue)
• SHOULD : Protéger le rendu de la date/heure contre les décalages d'hydratation

Design

• SHOULD : Ombres superposées (ambiante + directe)
• SHOULD : Bords nets via des bordures semi-transparentes + ombres
• SHOULD : Rayons imbriqués : enfant ≤ parent ; concentriques
• SHOULD : Cohérence de teinte : teinter les bordures/ombres/texte vers la teinte de fond
• MUST : Graphiques accessibles (palettes adaptées aux daltoniens)
• MUST : Atteindre le contraste—préférer APCA plutôt que WCAG 2
• MUST : Augmenter le contraste sur :hover/:active/:focus
• SHOULD : Faire correspondre l'IU du navigateur à la couleur de fond
• SHOULD : Éviter le banding des dégradés de couleurs sombres (utiliser des images de fond si nécessaire)