Indentation négative et jumelage des titres H2

Lorsqu’un référenceur est mandaté pour des recommandations techniques (et si vous en cherchez des bons, Axe-Net les fait parler), sa grille de lecture dépendra de son expérience et de ses connaissances.

Pour ce qui me concerne, l’accessibilité numérique me colle à la peau depuis ma formation BrailleNet en 2006. A ce titre, j’ai des idées bien précises de la structuration d’une page web, et c’est le titre H2 qui me pousse à écrire aujourd’hui.

Dans mon récent quotidien, trois de mes clients ont réalisé leur site web avec des agences locales et spécialisées. Ces agences font du Web depuis des années, mais pourtant, la qualité du code et de sa structuration fluctue énormément (il m’arrive de trouver de temps à autre plusieurs H1 sur une page, avec la palme de sept titres H1 pour un site web dédié au recrutement).

Concernant le titre H1, il y a également plusieurs écoles : soit un titre H1 par page, soit plusieurs (un dans la têtière, le titre est donc cloné sur toutes les pages, et un pour le titre informationnel de la page).

Mais pour le titre H2, quelle est votre méthode ?

Pour rester sobre, je prendrais l’exemple de mon petit bébé, le rooibos ARBADEA. Pour la page d’accueil, que je traite toujours différemment que les pages intérieures au niveau du titre H1, j’ai opté classiquement pour le logo dans la têtière. Pour l’instant, rien de neuf.

Ensuite, et c’est là que les choses diffèrent selon les intégrateurs/référenceurs, j’ai pris le parti de sous-titrer en niveau 2 les segments de texte suivants : l’actualité en provenance du blog, le titre « Qu’est-ce que le rooibos ? », le titre « Nos points de vente », et enfin, le titre « La presse parle de nous » (cf. capture ci-dessous).

Ce qui nous donne quatre titres de niveau 2, chacun étant aussi important dans le chapitrage de mon flux. Je chapitre donc ma page comme telle. Ensuite, pour éviter que les sous-titres « Tous nos rayons », « Découvrir l’infusion rooibos » et « A propos d’Arbadea » (dans le pied de page), ne dépendent du dernier H2 du flux (à savoir le titre « La presse parle de nous ») dans la mesure où je les structure en niveau 3 (ils n’ont pas la même importance), je place un cinquième titre H2 « caché » en CSS mais visible lorsque les styles sont désactivés.

Ce cinquième titre H2 s’intitule « Rubriques principales de la boutique de tisane bio au rooibos Arbadea » et chapitre ainsi convenablement, à mon sens, les trois titres H3 du super footer.

Pour éviter la propriété « display » et sa valeur « none » (car l’ami Google n’aime pas qu’on lui cache des choses, j’en ai fais les frais sur un de mes sites personnels), j’opte pour un positionnement absolu avec une indentation négative de -10000 pixels, ce qui permet d’associer sereinement mon « référencement accessible ».

Cette méthode me permet de contourner une piste graphique validée, difficilement « structurable » en niveaux de titre.

J’ai d’ailleurs suivi la même méthode pour chapitrer la sidebar du blog epokhe avec un titre de niveau H2 intitulé « Menu secondaire et archives ».

Et les pages intérieures ?

Un autre principe me tenaille au sujet des pages intérieures. Si j’opte pour un titre H1 dans le contenu informationnel (titre de page, titre de billet pour un blog, etc. – la têtière devient alors une simple division DIV), alors l’implémentation d’un premier titre H2 m’oblige, au minimum, à le jumeler.

La balise H2 sous-titre sémantiquement un niveau parent, le H1. Or, si un article, un billet, un contenu informationnel, détaille un titre H2, cela signifie qu’il chapitre une partie. Or, à mon sens, et j’ose penser que Franck Letrouvé me rejoigne sur ce sujet, si je propose une partie (une première partie qui plus est), c’est qu’intellectuellement, une autre partie la suit, la complète …

C’est un peu le schéma de la thèse et de l’antithèse. D’où ma nécessité de TOUJOURS jumeler deux balises de titres H2 dans un corps informationnel si j’envisage un chapitrage de contenu. Seuls les segments de texte de ces balises diffèrent en fonction des paragraphes et contextes qu’ils chapitrent (évidemment).

Si quelqu’un a d’autres pistes de travail (qui dépendent d’ailleurs souvent du contexte, à l’instar du renseignement des attributs ALT des images), je serais curieux d’en savoir davantage.

N’hésitez pas à partager votre réflexion et merci d’avance !