Formabilité

Table des matières

A

Durée : 8 minutes

Testez-vous !

Principe

Structurer le contenu avec des titres et sous-titres explicites, organisés de façon hiérarchique, facilite la navigation et l’accès à l’information pour tous, y compris avec les outils d’assistance.

Une arborescence claire de titres est la base d’un module structuré et accessible : elle permet à chacun de comprendre le contenu, de s’orienter et de retrouver facilement l’information.

Explication audio (transcription disponible)

Transcription

Bien structurer le contenu, c’est garantir une navigation fluide pour tous, notamment avec un lecteur d’écran. Pensez à organiser les titres de façon hiérarchique dès que c’est possible.

  • Dans un module comme Rise, la structure est déjà guidée, mais il reste essentiel de choisir des intitulés de section clairs.
  • Pour un module diaporama comme PowerPoint ou avancé comme Storyline, il ne faut pas oublier de nommer chaque diapositive dans le menu : ces titres facilitent la navigation et permettent à chacun de s’y retrouver facilement.
  • Dans un PDF ou un document long, structurer les titres permet de générer un sommaire automatique, ce qui facilite la navigation, surtout quand le contenu est dense.

Au final, une arborescence cohérente, adaptée à l’outil utilisé, facilite l’orientation et l’accès à l’information, y compris via les technologies d’assistance.

À vérifier

  • Utiliser les styles de titres natifs proposés dans l’outil pour structurer le contenu.
  • Appliquer un ordre logique de titres (Titre 1 > Titre 2 > Titre 3…).
  • Éviter les sauts de niveau (pas de Titre 1 suivi d’un Titre 3).
  • Limiter l’arborescence à 3 niveaux maximum, sauf nécessité réelle.
  • Renseigner un titre court et explicite pour chaque écran ou diapositive (ex : Storyline, PowerPoint, Genially).

Pour qui ?

  • Utilisateurs de lecteurs d’écran ou de navigation assistée
  • Toute personne cherchant une information précise ou voulant se repérer facilement dans le module
  • Équipes de conception, pour faciliter la relecture et la maintenance

Pourquoi c’est important ?

Une arborescence cohérente rend la navigation plus simple pour tous, permet l’utilisation des sommaires automatiques, et améliore la compréhension globale du contenu.

C’est aussi indispensable pour garantir l’accessibilité avec les technologies d’assistance.

Comment réussir

  • Adaptez la logique à chaque outil : l’important est de respecter une structure cohérente et explicite dans chaque contexte.
    • Web/HTML : une seule balise <h1> est attendue par page, les autres titres suivent une hiérarchie logique (<h2>, <h3>, etc.).
    • Word/PDF : plusieurs plusieurs H1 peuvent coexister si chacun correspond à une section principale bien distincte.
    • Diaporama : distinguez le titre de la diapo (pour le menu) et le titre 1 affiché dans le contenu.
  • Vérifiez la cohérence de la hiérarchie à chaque étape (pas de saut de niveau)
  • Utilisez des outils comme HeadingMaps (pour Rise 360) ou le mode Plan (dans Word/PowerPoint) pour valider visuellement votre arborescence.

Mieux vaut structurer avec plusieurs H2 clairs qu’avec des H3/H4 en cascade. S’il n’y a que deux H2, demandez-vous si la structure est vraiment optimale : dans certains cas c’est suffisant, mais souvent, cela peut indiquer qu’il faut repenser l’organisation ou étoffer le contenu.

WCAG

A

Arborescence de titres : conseils pratiques, outils et cas d’usage

Astuce : outil de vérification HeadingsMap

Avant de diffuser un module ou une page web, prenez l’habitude de vérifier votre arborescence avec un outil comme HeadingsMap. Cette extension permet d’afficher la structure des titres de la page :

  • Vérifiez qu’il n’y a pas de saut de niveau (ex : H2 > H3 > H2, etc.).
  • Repérez facilement les erreurs ou oublis.
  • Testez sur la version publiée ou exportée (Web, SCORM, LMS…).

HeadingsMap sera plus ou moins bien interprété selon l’outil (ex : non pris en charge en mode Preview sur Rise 360). Un test avec un lecteur d’écran reste également un moyen efficace de vérifier l’arborescence d’un module.

Capture de l'extension HeadinMap activité sur un module Rise 360 : elle met en avant les titres de niveau sur la page.
HeadingsMap Chrome
HeadingsMap Firefox

Outils type « Web léger »

Pour les contenus web, la structuration dépend des possibilités offertes par l’outil.

Certains vous guident dans la création d’une arborescence cohérente mais gardez toujours à l’esprit que la bonne structure ne dépend que de votre rigueur à nommer et hiérarchiser les titres !

Outils auteurs guidés (ex. Rise360)

Capture d'une interface sur Rise 360 qui met avant les blocs de titres prédéfinis et les titres à préciser dans l'éditeur de texte;

Exemple d’outil où la structure est bien guidée.

  • Un titre principal (H1) est généré automatiquement en haut de chaque écran.
  • Utilisez les blocs Heading (titre 2) et Subheading (titre 3) pour structurer le contenu.
  • Dans l’éditeur de texte, vous pouvez également insérer des niveaux de titres plus finement si nécessaire.

LMS / CMS (ex. Moodle, WordPress, Notion)

Dans ces outils, l’arborescence dépendra du paramétrage et de l’utilisation des éditeurs de texte :

  • Moodle génère par défaut les titres principaux (H1/H2) selon la structure du cours, vous pouvez ajouter des sous-titres (H3/H4) dans l’éditeur de texte.
  • WordPress / Notion : la structuration dépend de votre usage des titres dans l’éditeur. Il faut bien les renseigner et vérifier l’ordre logique.

Outils type « Diaporamas interactifs »

Ici, il est important de donner un titre court et explicite à chaque diapositive, car ce sera un repère pour l’utilisateur comme pour les technologies d’assistance.

On distingue différents comportements selon les outils :

Outils avec styles de titre (Storyline, Captivate, Genially…)

Outils qui offrent beaucoup de liberté dans la structuration et la navigation, mais demandent une vraie rigueur dans la gestion des titres et la cohérence de chaque écran.

Capture d'écran d'une interface Storyline qui met avant le titre de la diapositive à gauche et les titres de niveau dans le bandeau du haut.
  • Chaque diapositive doit porter un nom explicite (pour le menu/navigation).
  • Dans le contenu, ajoutez un titre 1 pour chaque écran, puis titre 2/3 selon les besoins. Utilisez les styles de titre.
  • Dans ces outils, vous devez vérifier et ajuster l’ordre des titres (voir fiche 5. Navigation clavier et focus).

Outils à structuration limitée (PowerPoint)

PowerPoint / Google Slides : la structuration repose uniquement sur le titre de la diapositive, sans styles de titres pour une arborescence fine. C’est limité, mais reste acceptable pour des supports courts ou des présentations simples ; à éviter pour des modules longs et structurés.

Documents PDF

Pour les documents longs, l’idéal est d’utiliser des outils conçus pour gérer une arborescence structurée et générer automatiquement un sommaire à partir de celle-ci.

On distingue les outils adaptés (accessibilité native, balisage possible) des outils à usage plus visuel (où la structure n’existe pas).

Outil de traitement de texte (Word / Google Docs)

Capture d'un document Google Slide qui montre le sommaire généré automatiquement et les titres de niveau.
  • Permet de générer automatiquement une table des matières à partir des styles de titres, ce qui facilite la création de PDF accessibles.
  • Vous pouvez choisir d’utiliser un seul Titre 1 ou plusieurs (par exemple un par grande section) : l’essentiel est de respecter la hiérarchie (éviter les sauts de niveau comme passer de Titre 1 à Titre 3 directement).
  • À noter : la nouvelle fonctionnalité “onglets” de Google Docs permet de créer plusieurs documents, mais n’a pas de valeur sémantique. Chaque onglet est exporté individuellement et doit donc comporter une structure de titres cohérente.

Outils PAO avancés (InDesign, Affinity Publisher)

Capture d'un document dans InDesign qui montre les styles de paragraphe, le balisage et les articles.
Indesign propose une fonction avancée « Articles » pour ordonner les éléments.
  • Outils PAO (publication assistée par ordinateur) et professionnels qui offrent une grande liberté graphique et un contrôle de l’arborescence.
  • Nécessite un balisage manuel des styles et de vérifier l’ordre du contenu (calques), à contrôler à l’export du PDF.
  • InDesign propose une fonction « Articles » permettant un contrôle fin de l’ordre de lecture.
  • Acrobat Pro : permet de baliser, corriger ou ajuster la structure d’un PDF déjà existant.

Outils visuels (à éviter pour un PDF structuré)

Certains outils peuvent générer des PDF, mais ne permettent pas de structurer l’arborescence.

  • PowerPoint : peut exporter en PDF, mais sans styles, il est impossible de générer automatiquement un sommaire ou une vraie arborescence ; à éviter ou uniquement pour des documents courts.
  • Canva  : pas de styles de titres ni de structure arborescente, usage purement visuel, très limité et déconseillé pour l’accessibilité.
  • De nombreux outils proposent d’exporter automatiquement un PDF (ex : Rise360, certains LMS…). C’est pratique pour des besoins ponctuels, mais la qualité de la structure dépend entièrement de l’outil. Il vaut mieux créer un document depuis un outil adapté si l’accessibilité du PDF est un enjeu.

À retenir

  • Vérifiez toujours l’arborescence de vos contenus avant diffusion.
  • Privilégiez les outils qui permettent une structuration claire et native.
  • Pour des documents longs ou des PDF accessibles, utilisez les outils adaptés  : Word, InDesign, Affinity Publisher, …
  • L’accessibilité commence par la clarté de la structure !

Suivre ma progression :

Marquer ce point comme lu & terminé

Ce point est lu & terminé.

Retirer de ma progression

Besoins spécifiques :