Ajouter un encadré

Inserm.fr comporte de nombreux encarts éditoriaux, qui prennent la forme d’encadrés. Cet article explique comment les faire sous WordPress, en évitant autant que possible les problèmes d’accessibilité.

À savoir : la partie visuelle de l’encadré est gérée par le thème. Si le thème ne supporte pas certaines fonctionnalités, on peut pas créer d’encadrés.

Faire un encadré basique

Un encadré basique est composé d’un seul bloc. Exemple :

Encadré basique (déconseillé)

Pour créer ce genre d’encadré :

1. Sélectionner le bloc à transformer en encadré
2. Dans les réglages du bloc, choisir Réglages de couleur
3. Dans Couleur d'arrière-plan, choisir une couleur
4. C’est fini, mais…

Ça ne marche pas si on veut faire un encadré avec plusieurs blocs (notamment en intégrant des images ou vidéos), et surtout…

Cette méthode est déconseillée car elle n’est pas accessible à tous et n’est pas sémantiquement signifiante.

Le problème des encadrés

Pour bien faire, un encadré doit utiliser des éléments HTML qui indiquent sa présence. Si l’encadré n’a d’existence que visuellement, son contenu se mélange avec le reste dès qu’on désactive le styles. Pour certains utilisateur le contenu sera donc du type :

Le début de mon contenu dans un paragraphe.

Un paragraphe qui n’a rien à voir.

La suite du contenu.

En théorie, un encadré pourrait être géré par l’élément <aside> en HTML :

L’élément HTML <aside> (en anglais, « aparté ») représente une partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d’encadrés ou de boîtes de légende.

https://developer.mozilla.org/fr/docs/Web/HTML/Element/aside

Mais, problème.

D’une part, il n’y a pas de moyen technique d’ajouter simplement un <aside> dans une page. D’autre part, <aside> est typiquement perçu comme ne faisant pas partie du contenu principal (barre latérale, etc.). C’est un élément qu’on peut ne pas afficher quand on veut « juste le contenu » d’une page.

Or les encadrés du site ont souvent des informations importantes, qui ne devraient pas être évacuées comme « secondaires ». Ils s’approchent d’une <section> HTML, qui posent d’autres soucis. Dans ce contexte, on va créer des encadrés en utilisant un plan B.

Faire des encadrés (au mieux)

Un encadré « fait au mieux » est un groupe d’au moins 3 blocs :

• un séparateur (pour indiquer une rupture thématique)
• un ou plusieurs blocs de contenus
• un autre séparateur (pour indiquer une nouvelle rupture thématique)

Pour le construire :

1. Grouper des blocs ensemble, avec un séparateur au début et à la fin
2. Dans les réglages du bloc Groupe, choisir Réglages de couleur
3. Dans Couleur d'arrière-plan, choisir une couleur
4. C’est fini !

Le résultat ressemble à ça :

Sémantiquement, les séparateurs sont là pour indiquer qu’il y a une rupture entre l’avant et l’après de l’encadré. Même si rien ne permet de dire que ce qui est avant et après l’encadré sont reliés.