# Architecture d’une hiérarchie de titres cohérente sur un thème multi-templates

> Un thème avec page d'accueil, archives, articles et pages personnalisées produit vite une hiérarchie de titres incohérente. Voici une architecture qui tient sur tous les gabarits.

- Auteur : Clément Hadrot
- Publié le : 2020-11-26
- Mis à jour le : 2020-11-26
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/architecture-hierarchie-titres-theme-multi-templates/

## L’essentiel

- Un seul h1 par gabarit, jamais deux
- Les widgets ne décident jamais du niveau, ils l'héritent
- Un template de titres partagé entre tous les gabarits

Un thème multi-templates — page d'accueil personnalisée, archives de catégorie, articles simples, pages statiques, résultats de recherche, archives d'auteur — a de quoi transformer la hiérarchie des titres en jungle si chaque gabarit est codé indépendamment. Le symptôme classique : un article affiche un `<h1>` pour son titre, mais la sidebar de widgets, codée par un autre développeur à une autre époque, ouvre ses propres blocs avec des `<h2>`, puis un widget « Articles récents » du même bloc réutilise des `<h2>` concurrents pour chaque titre d'article listé.

Pour un lecteur d'écran, la hiérarchie de titres est la carte de navigation rapide de la page (touche `1` à `6` sous NVDA pour sauter de niveau en niveau). Une hiérarchie qui saute des niveaux ou qui duplique le niveau 1 rend cette carte illisible. Voici l'architecture que nous appliquons désormais à chaque nouveau thème multi-gabarits, pensée pour rester cohérente même quand plusieurs développeurs interviennent sur des fichiers différents.

## La règle de base : un seul niveau 1 par page

Chaque gabarit ne doit produire qu'un seul `<h1>`, celui qui nomme le sujet principal de la page : le titre de l'article sur `single.php`, le nom de la catégorie sur `archive.php`, le titre de la page sur `page.php`. Le nom du site, affiché dans l'en-tête, ne doit jamais être un `<h1>` sur les pages de contenu — c'est une erreur fréquente issue d'un template de départ pensé uniquement pour la page d'accueil.

## Un template de titres partagé

> L'essentiel à retenir : Un seul h1 par gabarit, jamais deux ; Les widgets ne décident jamais du niveau, ils l'héritent ; Un template de titres partagé entre tous les gabarits

Pour éviter que chaque gabarit réinvente sa propre logique, nous centralisons la génération du titre principal dans une fonction unique, appelée depuis chaque template :

```
function agence_titre_principal() {
  if ( is_home() && ! is_front_page() ) {
    echo '<h1 class="page-title">' . esc_html( get_the_title( get_option( 'page_for_posts' ) ) ) . '</h1>';
  } elseif ( is_archive() ) {
    echo '<h1 class="page-title">' . get_the_archive_title() . '</h1>';
  } elseif ( is_search() ) {
    printf( '<h1 class="page-title">%s « %s »</h1>',
      esc_html__( 'Résultats de recherche pour', 'agence' ),
      esc_html( get_search_query() )
    );
  } elseif ( is_singular() ) {
    the_title( '<h1 class="entry-title">', '</h1>' );
  }
}
```

Cette fonction unique, appelée en tête de chaque gabarit, garantit qu'aucun développeur n'écrit un second `<h1>` ailleurs par erreur, puisque le titre principal est toujours produit au même endroit du même fichier partagé.

## Les sections descendent, elles ne recommencent jamais

Chaque section de contenu qui suit le titre principal utilise un `<h2>`, puis ses propres sous-sections un `<h3>`, sans jamais revenir à un niveau inférieur pour des raisons purement esthétiques. Un titre de widget stylé pour paraître discret reste structurellement un `<h2>` ou un `<h3>` selon sa position réelle dans la page, jamais un `<h1>` choisi pour sa taille de police.

### Le cas des widgets de sidebar

La sidebar pose un problème particulier : ses widgets sont ajoutés dynamiquement par l'utilisateur depuis l'administration, sans que le développeur du thème ne maîtrise leur ordre ni leur contenu. La solution retenue consiste à fixer le niveau de titre des widgets à `<h2>` par défaut dans `register_sidebar()`, via les paramètres `before_title` et `after_title`, et à documenter cette contrainte pour l'équipe éditoriale plutôt que de la laisser à la discrétion de chacun.

```
register_sidebar( array(
  'name'          => __( 'Colonne latérale', 'agence' ),
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
) );
```

## Vérifier l'architecture une fois codée

L'extension HeadingsMap ou l'onglet accessibilité des outils de développement de Firefox affichent l'arborescence complète des titres d'une page, dans l'ordre du DOM. C'est le test final à répéter sur chaque gabarit du thème, pas uniquement sur la page d'accueil qui reçoit historiquement le plus d'attention.

## En résumé

Une hiérarchie de titres cohérente sur un thème multi-gabarits tient à deux disciplines : une fonction unique qui produit le `<h1>` de chaque page, et une règle stricte qui interdit à tout composant réutilisable — widget, bloc, module de sidebar — de choisir son niveau de titre en fonction de son style plutôt que de sa position réelle dans la page.