Hn pertinence et ordre au niveau d'une page

Bonjour,

je me mets à la page au niveau des headings et j'ai bien suivi qu'il fallait utiliser les niveaux de titre pour structurer le contenu des pages et bien les utiliser dans l'ordre.

Par contre je me pose la question au niveau d'un template en général, est-ce qu'il est correct de les utiliser, par exemple, dans le footer d'un site ou au niveau d'une barre de navigation. En clair je me demande si il ne faut pas totalement les abandonner pour tout ce qui ne concerne pas le contenu.

Pour une navigation, j'aurai une vieille habitude de faire du code comme suit :

<nav>
  <h2>A propos</h2>
    <ul>
      <li>L'entreprise</li>
      <li>Nos client</li>
      <li>Nos services</li>
</nav>

Alors que ceci me paraît maintenant plus pertinent :

<nav>
  <strong>A propos</strong>
    <ul>
      <li>L'entreprise</li>
      <li>Nos client</li>
      <li>Nos services</li>
</nav>

D'autant qu'en glissant des niveaux de titre un peu partout pour styliser le contenu, il me parait difficile de conserver un ordre correct des titres sur toute la page ou sur un site.

Voilà, si vous avez des pistes.
Modifié par bzh (26 Sep 2015 - 12:07)

Même après l'avènement des repères (landmarks), les titres restent toujours l'un des moyens de navigation les plus couramment employés par les utilisateurs de lecteur d'écran, et ils le resteront encore très longtemps car les habitudes ne changent pas facilement (moi-même je fais partie des vieux du coup). Je pense donc que leur présence n'est pas à négliger y compris pour la navigation ou les zones secondaires.


En ce qui concerne un ordre cohérent sur toute la page, le HTML5 est censé apporter une solution simplificatrice, en conjonction avec <section>, <article>, etc. qui agissent sur la hiérarchie des titres en ajoutant des niveaux implicites. Mais peu de monde semble tirer optimalement parti de ces possibilités, ou alors personne a compris comment ça fonctionnait réellement.

Pour ma part j'ai choisi volontairement d'être invalide en optant pour un <h2> au menu, et un <h1> pour le titre principal qui apparaît pourtant plus loin. De cette façon, une simple pression sur 1 avec Jaws ou NVDA mène directement à ce <h1> et le contenu utile commence juste en-dessous. Plus simple on ne peut pas.

C'est techniquement pas correct, mais j'assume. Ce n'est pas grave de ne pas être 100% valide si on sait pourquoi.

Salut,

du coup tu pars de h2 pour des raisons de SEO ?

Autrement, de ce que j'ai pu lire aujourd'hui, il semble que c'est une bonne pratique de mettre au moins un titre par élément de section. Ce qui répond un peu à mon interrogation.

a écrit :
du coup tu pars de h2 pour des raisons de SEO ?

Non. JE me permets cette petite exception au standard pour facilité d'accès aux lecteurs d'écran.
D'ailleurs le H2 en question s'intitule « Menu » et n'apparaît même pas à l'écran.

Je me contrefous du SEO pour le site en question, c'est un projet perso et je n'ai rien à vendre.


De toute façon, optimiser pour du SEO c'est mauvais. Les robots de Google ne sont pas des crétins, personne n'a aucune preuve sur ce qui marche vraiment ou pas, et quand quelqu'un croit avoir compris quelque chose les règles changent. IL faut juste structurer son contenu de manière naturelle et laisser faire. LE seul moyen éprouvé pour apparaître en tête de liste c'est de payer Google.

a écrit :
Autrement, de ce que j'ai pu lire aujourd'hui, il semble que c'est une bonne pratique de mettre au moins un titre par élément de section. Ce qui répond un peu à mon interrogation.

Les sections ont été effectivement faites pour ça. Une section doit effectivement toujours avoir au moins un titre, tout comme un article. De plus si on veut être rigoureux, le titre de plus haut niveau présent dans la section doit être seul, et d'après le nouveau mode de fonctionnement des sections HTML5, ça doit logiquement être un H1. C'est comme ça que ça a été pensé initialement, du moins. Maintenant en vérité, beaucoup sont encore (et moi y compris, pour des raisons souvent pratiques) à l'ancien système de hiérarchie; mais quelque soit le système qu'on adopte, la règle est valable.

Le gros problème c'est que beaucoup de monde a pris à tort les <section> pour des nouveaux <div>. S'il n'y a pas au moins un titre principal pour la section ou l'article, alors je considère personnellement qu'ils n'ont rien compris aux nouveaux éléments structurant du HTML5 et qu'ils auraient mieux fait d'utiliser <div>.
Modifié par QuentinC (27 Sep 2015 - 16:53)

a écrit :
je me mets à la page au niveau des headings et j'ai bien suivi qu'il fallait utiliser les niveaux de titre pour structurer le contenu des pages et bien les utiliser dans l'ordre.

Par contre je me pose la question au niveau d'un template en général, est-ce qu'il est correct de les utiliser, par exemple, dans le footer d'un site ou au niveau d'une barre de navigation. En clair je me demande si il ne faut pas totalement les abandonner pour tout ce qui ne concerne pas le contenu.

Tout à fait d'accord ! Je pense aussi que les titres doivent être utilisés pour les contenus, pas pour d'autres éléments des pages web comme les menus.

Disons qu'ajouter un titre en dehors du contenu principal peut servir les habitudes des utilisateurs sur lecteur d'écran. Beaucoup d'entre eux naviguent encore par titres dans la page.

Je ne vois pas vraiment d'inconvénient à les ajouter alors autant le faire. D'autant plus qu'il est tout à fait possible de laisser plusieurs H1 dans la même page tant que la hiérarchie est respectée.
Modifié par Nigel (29 Sep 2015 - 11:11)

Du coup je suis parti sur du h1 (qui généralement va aller sur le logo) à hn pour mon template global et je repars de zéro pour chaque section. Ça me paraît assez cohérent.