Nouveau Components

Titres

Un titre est un élément textuel utilisé pour définir le titre ou le sujet d’une section au sein d’une page web. Il permet d’organiser le contenu en partie cohérentes, facilitant ainsi la navigation et la compréhension de la page. Les titres fournissent une structure et un contexte pour les lecteurs, y compris pour les utilisateurs qui dépendent des technol

Quand utiliser les titres

  • Pour organiser et structurer le contenu de la page de manière hiérarchique. Les titres aident à créer une structure navigable qui peut être utilisée pour générer une table des matières.
  • Pour indiquer les sections principales et les sous-sections. Une utilisation correcte des titres permet aux lecteurs d'écran d'interpréter correctement la structure de la page.
  • Pour fournir du contexte et du sens, permettant aux utilisateurs de comprendre la structure du contenu et de naviguer efficacement à travers la page.
  • Pour améliorer la navigation et la compréhension, en particulier pour les personnes ayant des déficiences cognitives.

Quand ne pas utiliser les titres

  • Pour le style visuel uniquement : Ne pas utiliser les balises de titre uniquement pour leur style visuel. Si vous souhaitez styliser un texte sans impliquer son importance, utilisez d'autres éléments comme <p>, <div> ou <span> avec un CSS approprié.
  • Ne pas sauter de niveaux de titre : Par exemple, utiliser <h3> directement après un <h1> sans passer par <h2> crée de la confusion et perturbe la structure du document. Il est important de respecter un ordre logique et séquentiel pour les titres.
  • Ne pas utiliser les titres pour de petites sections qui ne nécessitent pas de structure hiérarchique. Par exemple, une note mineure ou un pied de page ne doit pas utiliser de balises de titre.

Sur cette page

Mots-clés

  • Titres : Un élément textuel qui définit les sections ou le contenu juste en dessous de lui.
  • Hiérarchie : Organisation des titres au sein d'une page qui aide à comprendre la structure de la page.

Détail des composants des titres

  • Utilisez les balises <h1> à <h6> dans l'ordre hiérarchique approprié.
  • Le titre <h1> doit être unique et représentatif du sujet principal de la page web.
  • Ne choisissez pas les niveaux de titre en fonction de l'apparence visuelle.
  • Évitez d'utiliser du texte en gras à la place d'un titre.
  • Maintenez une utilisation appropriée et modérée des titres.

Titres sémantiques

L'utilisation de HTML sémantique pour les titres est essentielle pour garantir une structure correcte du contenu et une accessibilité optimale.

Les titres sémantiques sont des titres qui utilisent les éléments de titre HTML natifs : <h1>, <h2>, <h3>, <h4>, <h5>, et <h6>.
Ces éléments transmettent la structure du document à tous les utilisateurs, y compris ceux utilisant des technologies d'assistance.

Avantages de l'utilisation des titres sémantiques :

  1. Ils sont reconnus nativement par les lecteurs d'écran et les outils d'assistance.
  2. Ils offrent des raccourcis de navigation au clavier (les lecteurs d'écran permettent de naviguer par niveau de titre).
  3. Ils améliorent le SEO (les moteurs de recherche comprennent la structure du document).
  4. Ils garantissent la cohérence et la maintenabilité du code.

Titres non sémantiques

Lorsque l'élément de titre sémantique ne peut pas être utilisé (par exemple, dans des composants utilisant des éléments personnalisés ou des styles visuels), utilisez le modèle ARIA suivant pour exposer un titre :

HTML
<div role='heading' aria-level='2'>Section Title</div>
  • role="heading" annonce à la technologie d'assistance que l'élément est un titre.
  • aria-level="N" (où N est un nombre de 1 à 6) spécifie le niveau hiérarchique du titre.Cette technique ne doit être utilisée que lorsque l'utilisation d'une balise de titre native (comme <h1>, <h2>, etc.) n'est pas possible.

Meilleures pratiques générales pour les balises de titre

Utiliser un seul <h1> par page :

La balise <h1> doit représenter le sujet principal de la page. Utiliser plusieurs balises <h1> sur une même page peut perturber les lecteurs d'écran et les moteurs de recherche.

Suivre une structure logique de titres :

Assurez-vous que les titres suivent une hiérarchie correcte : <h1> pour le sujet principal, suivi de <h2>, <h3>, etc., dans l'ordre. Ne sautez pas de niveaux, comme passer directement de <h1> à <h3>.
Si vous utilisez role="heading" et aria-level, la même hiérarchie doit être respectée.

Soyez descriptif :

Les titres doivent décrire clairement le contenu ou la section à laquelle ils se réfèrent. Utilisez-les pour fournir du contexte, et non seulement comme des titres ou des repères visuels.

Lecteur d'écran

  • Les lecteurs d'écran annoncent le niveau des titres (par exemple, "titre de niveau 1," "titre de niveau 2").
  • Les utilisateurs peuvent naviguer entre les titres à l'aide de raccourcis clavier.
  • Les titres aident les utilisateurs de lecteurs d'écran à comprendre la structure hiérarchique du contenu.
  • Les lecteurs d'écran peuvent générer une liste des titres de la page pour une navigation rapide. Les titres basés sur ARIA (role='heading' + aria-level) apparaîtront également dans cette liste s'ils sont implémentés correctement.

Sur cette page