Clerkcode02/responsive-accessibility

Responsive & Accessibilité

Une page liée à une urgence doit être utilisable par tout le monde, sur n'importe quel appareil, sous le stress. La clarté prime sur l'ingéniosité.

Breakpoints

Valeurs par défaut Tailwind : sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Concevoir d'abord pour le mobile et de manière intentionnelle par plage :

• 320–639 : une seule colonne, téléphones plats, galerie à défilement horizontal avec scroll-snap, CTA empilés en pleine largeur, menu dans un panneau déroulant.
• 640–1023 : grilles à deux colonnes lorsque le contenu le permet ; toujours pas d'effet 3D ou d'épinglage (pin).
• ≥ 1024 : dispositions asymétriques à 12 colonnes, téléphones en 2.5D, inclinaison au pointeur, storytelling collant optionnel. Tester les largeurs : 320, 375, 414, 768, 1024, 1280, 1440, 1920. Aucun défilement horizontal de la page à aucune largeur (surveiller les téléphones en rotation et les polices surdimensionnées – utiliser overflow-x: clip sur les sections, pas sur body).

Points de repère et structure

• <a href="#main" class="skip-link">Aller au contenu principal</a> premier élément focusable.
• <header> (nav), <main id="main">, chaque section un <section aria-labelledby="…-heading">, <footer>.
• Exactement un h1 (titre principal). Chaque section commence par un h2 ; sous-éléments h3. Aucun niveau sauté.
• Les id des sections correspondent aux ancres de navigation : about, features (catégories + vitrine), how-it-works, register, faq.
• Les cibles des ancres sont décalées par la barre de navigation collante : scroll-margin-top: var(--nav-h).

Navigation

• Desktop : liens en ligne + un CTA informatif (ex. "Explorer les fonctionnalités") – pas de CTA de téléchargement/installation, voir CLAUDE.md "Scope : vitrine, pas entonnoir d'installation".
• Mobile : un <button aria-expanded aria-controls="mobile-menu"> bascule un panneau. À l'ouverture : focus sur le premier lien ; Échap ferme et retourne le focus au bouton ; cliquer sur un lien ferme le menu. Le verrouillage du défilement du corps est optionnel et doit être libéré de manière fiable. Le bouton hamburger a un nom accessible "Ouvrir le menu"/"Fermer le menu".
• Indication de section courante (optionnelle) via aria-current="true", pas uniquement par la couleur.

Clavier et focus

• Tout ce qui est interactif accessible par Tab dans l'ordre visuel. Pas de tabindex positif.
• Anneau de focus visible sur tous les contrôles : outline: 2px solid var(--color-accent); outline-offset: 3px; – garantir un ratio ≥ 3:1 à la fois sur fond sombre et clair (utiliser un anneau clair sur les boutons rouges).
• Galeries horizontales : conteneur tabindex="0" avec role="region" + aria-label, touches fléchées pour le défilement natif.
• Tout contrôle désactivé/indisponible (ex. lien de contact/légal manquant) : rendu sous forme de <span aria-disabled="true"> ou <button disabled> avec texte explicatif, jamais un faux lien focusable.

Accordéons FAQ

• Privilégier le <details><summary> natif ; ou button[aria-expanded][aria-controls] + région. Le texte du résumé est la question sous forme de texte brut à l'intérieur d'un h3 équivalent.
• Le contenu est dans le DOM (recherchable, fonctionne sans JavaScript).

Tactile et pointeur

• Cibles tactiles ≥ 44×44px (boutons, éléments de menu, toggles FAQ).
• Espacement ≥ 8px entre les cibles adjacentes.
• Les effets au survol uniquement ne masquent jamais d'informations.

Couleur et texte

• Contraste du texte du corps ≥ 4.5:1, texte large ≥ 3:1, limites d'interface utilisateur ≥ 3:1.
• Statut (En attente/En cours/Résolu) toujours accompagné d'une étiquette textuelle + d'une icône, pas uniquement de couleur.
• Le texte se redimensionne à 200 % sans perte ; pas de conteneurs de texte à hauteur fixe.
• Longueur de ligne ≤ ~70 caractères pour le corps.

Images et médias

• Captures d'écran significatives : alt factuel (voir app-screenshot-showcase). Décoratif : alt="" + aria-hidden pour les SVG purement décoratifs.
• Les espaces réservés s'annoncent eux-mêmes : "Espace réservé de capture d'écran : écran d'inscription".
• Icônes accompagnant du texte : aria-hidden="true".

Mouvement

• Respecter prefers-reduced-motion (voir lightweight-motion). Aucun contenu n'apparaît uniquement via une animation.
• Les composants animés à titre d'illustration (suivi, coordination) incluent un texte visible indiquant qu'il s'agit d'illustrations, et aria-live n'est PAS utilisé (pas de données en direct).

Informations d'urgence

• Un avertissement apparaît près des CTA principaux, dans la FAQ ("SOS remplace-t-il les lignes d'urgence ?"), près du CTA final, et dans le pied de page. Langage clair, contraste lisible, pas caché dans un tout petit texte (≥ 14px).

Liste de vérification

• axe / Lighthouse a11y ≥ 95, zéro violation critique
• Clavier uniquement : lien d'évitement, ouverture/fermeture/Échap du menu, toutes les ancres, FAQ, galerie
• Vérification ponctuelle avec lecteur d'écran (VoiceOver/NVDA) : la liste des titres a du sens
• 320px : pas de débordement, le titre tient, les CTA sont visibles
• Zoom à 200 % fonctionne
• Mouvement réduit vérifié
• Mobile en paysage (ex. 740×360) utilisable