Fondations

Accessibilité

Ce que le système garantit

• Contraste : chaque paire texte / fond des tokens est vérifiée par node scripts/build.mjs --strict (116 paires, seuil 4,5:1 pour le texte, 3:1 pour les filets de champ et les icônes d'action). Une valeur qui passe sous le seuil fait échouer la CI.
• Focus visible : tous les contrôles du bundle (boutons, champs, cases, radios, interrupteurs, onglets, liens de navigation, touches, lignes de liste, pagination, accordéons) portent un anneau --focus-ring de 2 px décalé de 2 px au clavier (:focus-visible), jamais à la souris.
• Cibles : au moins --touch-target (44 px) pour toute cible tactile ; en densité touch, les contrôles font 48 px, les lignes 56 px.
• Mouvement : prefers-reduced-motion respecté, voir Mouvement.
• Thème sombre : même contraste que le clair, vérifié par le même script.
• Contraste renforcé : quand l'appareil le demande (prefers-contrast: more : réglage « Augmenter le contraste » d'iOS et de macOS, contraste élevé d'Android et de Windows), les filets passent au niveau des bordures de champ, le texte secondaire en encre, et l'anneau de focus à 3 px.
• Taille du texte : les tailles sont en pixels par densité ; sur iOS, -webkit-text-size-adjust: 100% empêche le gonflement du texte en paysage, et les champs restent à 16 px au moins au doigt.

Ce que l'écran doit faire

• Un bouton à icône seule a un aria-label ; un champ a un <label> ou un aria-label ; une icône décorative a aria-hidden="true".
• Un état se dit par un mot, pas seulement par une couleur : le badge a toujours son texte, le point d'état seul (hb-dot) porte un aria-label ou accompagne un texte.
• Les états ARIA pilotent le style : aria-pressed (puce, segment), aria-selected (onglet, ligne), aria-current (navigation, page, étape), aria-invalid (champ), aria-sort (en-tête de tableau), aria-expanded (groupe de navigation). Poser l'attribut, le style suit.
• Un contenu lu par le lecteur d'écran seulement : hb-sr-only. Un lien d'évitement en tête de page : hb-skip-link, visible au focus.
• Ordre du DOM = ordre visuel : Annuler avant l'action principale, la poignée de déplacement avant la case.

<div class="hb-stack">
  <a class="hb-skip-link" href="#contenu">Aller au contenu</a>
  <button class="hb-btn hb-btn-icon" aria-label="Imprimer la fiche"><i class="material-icons" aria-hidden="true">print</i></button>
  <span><span class="hb-dot hb-dot-success" aria-hidden="true"></span> Imprimante connectée <span class="hb-sr-only">(état : connectée)</span></span>
  <span class="hb-small">Le lien d'évitement ci-dessus n'apparaît qu'au focus clavier (Tab).</span>
</div>