Guide pratique · IA & interfaces
5 min de lecture
Mis à jour le
Rendre les titres et le texte faciles à suivre
Organise une page avec des titres utiles, un texte lisible et des espacements qui supportent les réglages du lecteur.
Réponse directe
La hiérarchie typographique montre le sujet de la page, les sections liées et la suite de lecture. Donne aux titres une structure utile, puis applique taille, graisse et espacement avec cohérence. Un paragraphe gros et gras peut ressembler à un titre sans permettre la navigation par titres.
01
1. Décide du rôle de chaque bloc de texte
Pour une page d’atelier, distingue titre de page, titres de section, descriptions et libellés d’action. Utilise les titres pour de vraies sections, pas simplement pour mettre un prix en avant. Avant de styliser, demande à quelqu’un de lire seulement les titres et de décrire la promesse de la page.
Cette démarche aide quand la page ressemble à un bloc uniforme. Elle ne résout pas une offre confuse ou une explication absente. Remplace les titres vagues comme « En savoir plus » par une description utile avant d’ajouter une échelle de tailles complexe.
02
2. Relie la structure visible aux titres
Utilise les niveaux de titres HTML pour représenter les relations entre sections. Le titre de l’atelier peut être h1, « Ce que tu vas pratiquer » h2, et une sous-section interne h3. Choisis le style visuel séparément. Évite h4 simplement parce que son apparence par défaut te convient.
Examine le plan des titres autant que la page affichée. Un nouveau h2 après un h3 peut fermer cette sous-section ; tout changement de niveau n’est pas automatiquement une erreur. Garde des relations compréhensibles au lieu de prendre une suite de tailles décroissantes pour une preuve sémantique.
03
3. Compare deux versions de la page d’atelier
Prépare un petit exemple avec titre, introduction, programme, prérequis et action de réservation. Dans la première version, traite chaque bloc de la même façon. Dans la seconde, applique un style constant aux titres de section et distingue-les des paragraphes. Demande à une personne de trouver les prérequis et l’action suivante dans chaque version ; note le résultat sans annoncer un gain universel.
Conserve le même vrai texte dans les deux versions. Ajoute le plus long titre français et un prérequis long. Vérifie si une ligne isolée ressemble à une section distincte alors qu’elle appartient au paragraphe. Ajuste le regroupement puis recommence la tâche de lecture. Les valeurs retenues sont des choix de design, pas une certification d’accessibilité.
- Retrouve les prérequis en lisant seulement les titres de section.
- Identifie la réservation sans confondre un prix mis en avant avec un titre.
- Recommence avec le titre traduit le plus long et note toute réponse différente.
04
4. Laisse le lecteur ajuster la présentation
Pour les langages de balisage et écritures concernés, Text Spacing de WCAG 2.2 au niveau AA vérifie des réglages utilisateur : interligne à 1,5 fois la taille du texte, espace après paragraphe à 2 fois, entre lettres à 0,12 fois et entre mots à 0,16 fois, sans perte de contenu ni de fonction. Ce sont des conditions de surcharge, pas des valeurs par défaut imposées à l’auteur.
Applique ces espacements ensemble et cherche coupures ou chevauchements dans titres, labels et cartes. Vérifie séparément l’agrandissement du texte à 200 % sans perte de contenu ou fonction au titre de Resize Text, dont les exceptions énoncées comprennent sous-titres vidéo et images de texte. Une boîte de titre à hauteur fixe qui coupe la seconde ligne agrandie doit être corrigée, même si la capture initiale semblait équilibrée.
05
5. Vérifie séparément lecture et navigation
Sur la page d’atelier, parcours les titres avec un lecteur d’écran et compare la structure annoncée aux sections visibles. Agrandis ensuite le texte et applique les espacements. Vérifie que prérequis et consignes de réservation restent complets et que l’action fonctionne. Note navigateur et technologie d’assistance, ou précise que cette combinaison n’a pas été testée.
Aucune police ni échelle numérique unique ne prouve une lecture facile pour tout le monde. Ce guide n’établit ni contraste suffisant, ni conformité WCAG complète, ni compréhension par de vrais utilisateurs. Garde une courte tâche de lecture à côté des contrôles structurels et utilise le guide d’accessibilité pour les autres responsabilités de l’interface.
À conserver
Vérifie le résultat
- 01Les titres décrivent leurs sections et reflètent leur imbrication.
- 02Le style visuel ne remplace pas la structure des titres HTML.
- 03Les textes longs EN et FR restent complets après changement des espacements.
- 04Le texte peut atteindre 200 % sans perdre la tâche testée.
- 05Le compte rendu distingue contrôle structurel et compréhension observée.
- 06Le contrôle de navigation par titres indique le lecteur d’écran utilisé ou reste explicitement non testé.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
- Headings (nouvel onglet)W3C WAI · Référence primaire des vérifications concernées ; l’exemple est original et ne certifie pas la conformité.
- Understanding SC 1.4.12: Text Spacing (nouvel onglet)W3C WAI · Référence primaire des vérifications concernées ; l’exemple est original et ne certifie pas la conformité.
- Understanding SC 1.4.4: Resize Text (nouvel onglet)W3C WAI · Référence primaire des vérifications concernées ; l’exemple est original et ne certifie pas la conformité.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Implémenter correctement
Applique « Rendre les titres et le texte faciles à suivre » pas à pas
# Applique le guide « Rendre les titres et le texte faciles à suivre » dans ton agent ## Objectif La hiérarchie typographique montre le sujet de la page, les sections liées et la suite de lecture. Donne aux titres une structure utile, puis applique taille, graisse et espacement avec cohérence. Un paragraphe gros et gras peut ressembler à un titre sans permettre la navigation par titres. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Organise une page avec des titres utiles, un texte lisible et des espacements qui supportent les réglages du lecteur. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Décide du rôle de chaque bloc de texte — Pour une page d’atelier, distingue titre de page, titres de section, descriptions et libellés d’action. Utilise les titres pour de vraies sections, pas simplement pour mettre un prix en avant. Avant de styliser, demande à quelqu’un de lire seulement les titres et de décrire la promesse de la page. - 2. 2. Relie la structure visible aux titres — Utilise les niveaux de titres HTML pour représenter les relations entre sections. Le titre de l’atelier peut être h1, « Ce que tu vas pratiquer » h2, et une sous-section interne h3. Choisis le style visuel séparément. Évite h4 simplement parce que son apparence par défaut te convient. - 3. 3. Compare deux versions de la page d’atelier — Prépare un petit exemple avec titre, introduction, programme, prérequis et action de réservation. Dans la première version, traite chaque bloc de la même façon. Dans la seconde, applique un style constant aux titres de section et distingue-les des paragraphes. Demande à une personne de trouver les prérequis et l’action suivante dans chaque version ; note le résultat sans annoncer un gain universel. - 4. 4. Laisse le lecteur ajuster la présentation — Pour les langages de balisage et écritures concernés, Text Spacing de WCAG 2.2 au niveau AA vérifie des réglages utilisateur : interligne à 1,5 fois la taille du texte, espace après paragraphe à 2 fois, entre lettres à 0,12 fois et entre mots à 0,16 fois, sans perte de contenu ni de fonction. Ce sont des conditions de surcharge, pas des valeurs par défaut imposées à l’auteur. - 5. 5. Vérifie séparément lecture et navigation — Sur la page d’atelier, parcours les titres avec un lecteur d’écran et compare la structure annoncée aux sections visibles. Agrandis ensuite le texte et applique les espacements. Vérifie que prérequis et consignes de réservation restent complets et que l’action fonctionne. Note navigateur et technologie d’assistance, ou précise que cette combinaison n’a pas été testée. ## Critères d’acceptation — Vérifie le résultat - Les titres décrivent leurs sections et reflètent leur imbrication. - Le style visuel ne remplace pas la structure des titres HTML. - Les textes longs EN et FR restent complets après changement des espacements. - Le texte peut atteindre 200 % sans perdre la tâche testée. - Le compte rendu distingue contrôle structurel et compréhension observée. - Le contrôle de navigation par titres indique le lecteur d’écran utilisé ou reste explicitement non testé. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:5549d626308b2f95bc208992397c6c6777296a20ba46e610c72be3fcb271003c
Diagnostiquer un problème
Diagnostique un écart au guide « Rendre les titres et le texte faciles à suivre »
# Diagnostique une application ratée du guide « Rendre les titres et le texte faciles à suivre » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Décide du rôle de chaque bloc de texte — Pour une page d’atelier, distingue titre de page, titres de section, descriptions et libellés d’action. Utilise les titres pour de vraies sections, pas simplement pour mettre un prix en avant. Avant de styliser, demande à quelqu’un de lire seulement les titres et de décrire la promesse de la page. - 2. 2. Relie la structure visible aux titres — Utilise les niveaux de titres HTML pour représenter les relations entre sections. Le titre de l’atelier peut être h1, « Ce que tu vas pratiquer » h2, et une sous-section interne h3. Choisis le style visuel séparément. Évite h4 simplement parce que son apparence par défaut te convient. - 3. 3. Compare deux versions de la page d’atelier — Prépare un petit exemple avec titre, introduction, programme, prérequis et action de réservation. Dans la première version, traite chaque bloc de la même façon. Dans la seconde, applique un style constant aux titres de section et distingue-les des paragraphes. Demande à une personne de trouver les prérequis et l’action suivante dans chaque version ; note le résultat sans annoncer un gain universel. - 4. 4. Laisse le lecteur ajuster la présentation — Pour les langages de balisage et écritures concernés, Text Spacing de WCAG 2.2 au niveau AA vérifie des réglages utilisateur : interligne à 1,5 fois la taille du texte, espace après paragraphe à 2 fois, entre lettres à 0,12 fois et entre mots à 0,16 fois, sans perte de contenu ni de fonction. Ce sont des conditions de surcharge, pas des valeurs par défaut imposées à l’auteur. - 5. 5. Vérifie séparément lecture et navigation — Sur la page d’atelier, parcours les titres avec un lecteur d’écran et compare la structure annoncée aux sections visibles. Agrandis ensuite le texte et applique les espacements. Vérifie que prérequis et consignes de réservation restent complets et que l’action fonctionne. Note navigateur et technologie d’assistance, ou précise que cette combinaison n’a pas été testée. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Vérifie le résultat - Les titres décrivent leurs sections et reflètent leur imbrication. - Le style visuel ne remplace pas la structure des titres HTML. - Les textes longs EN et FR restent complets après changement des espacements. - Le texte peut atteindre 200 % sans perdre la tâche testée. - Le compte rendu distingue contrôle structurel et compréhension observée. - Le contrôle de navigation par titres indique le lecteur d’écran utilisé ou reste explicitement non testé. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:19a4c5358b00a7c21b6a88d88a01f50c04570ea57342777ada11f7ad2d291114
Digest du Pack: sha256:9bf7a1a2ef830a4a00f579a6793f09c76184d2ba3a70a4475e061a661c2f86b9