Gestion des balises <Hx>

Bonjour à tous,

Je souhaiterais mettre en place une gestion propre de la hiérarchie des balises <HX>.

Il me semble que c'est possible de le faire simplement sans savoir si pour autant c'est bien perçu par les lecteurs d'écran.
Si c'est possible, comment ? HTML 5, ARIA ?

Auriez-vous un tuto qui explique la mise en oeuvre ?

Par avance, merci.

Bonne journée.

Et l'eau,

C'est assez simple : tant que tu respectes un ordre logique, je ne vois pas de souci à priori

<h1>niveau 1</h1>

<h2>niveau 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, beatae eum excepturi fugiat. Praesentium, aut. Eos atque hic, esse alias at expedita magnam officiis sequi, explicabo provident aliquam facere. Quia.</p>

<h3>niveau 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto expedita odio maxime, quae cupiditate porro laboriosam! Obcaecati in aspernatur tempore rem fugit, illo iure voluptatibus ea. Assumenda repellat velit minima!</p>

<h2>niveau 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat consectetur hic possimus eos corporis, illum reiciendis ullam nostrum. Aut, est aliquam porro, totam dicta in perferendis error! Dolore, voluptatibus, ullam!</p>
<!-- etc. -->

Bonjour à tous,

Je reviens vers vous concernant une gestion intelligente des titres.
Petit rappel :je recherche un mécanisme qui permette de respecter la hiérarchie des titres dans un document HTML du point de vu de l’accessibilité du Web.

Problématique rencontrée :
Lorsque vous avez un CMS comme Wordpress et que vous créez une page ou un article, le champ d’édition « Titre », de ces derniers, peut-être repris et mis en forme par un template ; ce qui permet de contrôler le niveau du titre de la page ou de l’article.
Par contre, lorsque vous rédigez le contenu et que vous insérez des titres, ces derniers sont inscrits en BDD avec leur niveau.

L’objectif est donc de pouvoir reprendre ces titres est d’adapter leur niveau en fonction :
De leur position hiérarchique,
Du niveau du titre précédent.

Je me suis penché sur ARIA me souvenant vaguement qu’ARIA pouvait répondre à cette problématique.
La seule chose que j’ai trouvé est : Roll = »heading » Level-ARIA= »x » ou « x » est le niveau souhaité.
Ca fonctionne mais permet simplement de modifier le niveau d’un titre existant.
<h2 Roll= »heading » aria-level= »1 »></h2> renvoi l’information que ce titre est de niveau 1.
Par contre l’effet est incomplet car si dans une CSS vous définissez H1 et H2, dans l’exemple, c’est la déclaration de H2 qui sera appliquée.

Aurais-je passé à côté de quelque chose permettant d’appliquer la bonne déclaration CSS ?

Auriez-vous une piste me permettant d’avancer ?

Par avance, merci.

Bonne fin de journée.

Bonjour,

ces niveaux de titre écrits en dur dans la base de données sont en effet un problème des outils WYSIWYG ou du format HTML. À moins d'écrire dans un autre format "neutre" (Markdown ou un autre format tel que le fait SPIP) c'est compliqué de réutiliser le code.

Pour répondre à la question des styles appliqués, il est possible de styler les éléments selon leur attribut tel que :

h2,
[aria-level="2"] {
  font-size: 2rem;
}

h3,
[aria-level="3"] {
  font-size: 1.5rem;
}

en supposant que tout élément ayant l'attribut aria-level a bien déjà role="heading". On peut prévoir le coup en CSS mais ce n'est pas tellement le boulot de CSS de s'en assurer donc je préfère laisser de côté.

Un <h2 role="heading" aria-level="3"> est ciblé par les 2 règles précédentes mais puisque la spécificité (le poids) du sélecteur d'attribut est identique à celle du sélecteur de classe et donc supérieure à celle du sélecteur d'élément, c'est bien font-size: 1.5rem et pas 2rem qui sera appliqué.
Ressource sur MDN : sélecteurs CSS
Modifié par Felipe (01 Apr 2020 - 00:17)