Inserm.fr comporte de nombreux encarts \u00e9ditoriaux, qui prennent la forme d’encadr\u00e9s. Cet article explique comment les faire sous WordPress, en \u00e9vitant autant que possible les probl\u00e8mes d’accessibilit\u00e9.<\/p>\n\n\n\n
Exemple d’encadr\u00e9.<\/p>\n\n\n\n
\u00c0 savoir : <\/strong>la partie visuelle de l’encadr\u00e9 est g\u00e9r\u00e9e par le th\u00e8me. Si le th\u00e8me ne supporte pas certaines fonctionnalit\u00e9s, on peut pas cr\u00e9er d’encadr\u00e9s.<\/p>\n\n\n\n Un encadr\u00e9 basique est compos\u00e9 d’un seul bloc. Exemple :<\/p>\n\n\n\n Encadr\u00e9 basique (d\u00e9conseill\u00e9)<\/p>\n\n\n\n Pour cr\u00e9er ce genre d’encadr\u00e9 :<\/p>\n\n\n\n \u00c7a ne marche pas si on veut faire un encadr\u00e9 avec plusieurs blocs (notamment en int\u00e9grant des images ou vid\u00e9os), et surtout…<\/p>\n\n\n\n Cette m\u00e9thode est d\u00e9conseill\u00e9e car elle n’est pas accessible \u00e0 tous et n’est pas s\u00e9mantiquement signifiante.<\/strong><\/p>\n\n\n\n Pour bien faire, un encadr\u00e9 doit utiliser des \u00e9l\u00e9ments HTML qui indiquent sa pr\u00e9sence. Si l’encadr\u00e9 n’a d’existence que visuellement, son contenu se m\u00e9lange avec le reste d\u00e8s qu’on d\u00e9sactive le styles. Pour certains utilisateur le contenu sera donc du type :<\/p>\n\n\n\n Le d\u00e9but de mon contenu dans un paragraphe.<\/p> Un paragraphe qui n’a rien \u00e0 voir.<\/p> La suite du contenu.<\/p><\/blockquote>\n\n\n\n En th\u00e9orie, un encadr\u00e9 pourrait \u00eatre g\u00e9r\u00e9 par l’\u00e9l\u00e9ment <aside><\/a> en HTML :<\/p>\n\n\n\n L’\u00e9l\u00e9ment HTML Mais, probl\u00e8me. <\/p>\n\n\n\n D’une part, il n’y a pas de moyen technique d’ajouter simplement un Or les encadr\u00e9s du site ont souvent des informations importantes, qui ne devraient pas \u00eatre \u00e9vacu\u00e9es comme \u00ab\u00a0secondaires\u00a0\u00bb. Ils s’approchent d’une Un encadr\u00e9 \u00ab\u00a0fait au mieux\u00a0\u00bb est un groupe d’au moins 3 blocs :<\/p>\n\n\n\nFaire un encadr\u00e9 basique<\/h2>\n\n\n\n
\n
R\u00e9glages de couleur<\/code><\/li>\n\n\n\nCouleur d'arri\u00e8re-plan<\/code>, choisir une couleur<\/li>\n\n\n\nLe probl\u00e8me des encadr\u00e9s<\/h2>\n\n\n\n
<aside><\/code> (en anglais, \u00ab\u00a0apart\u00e9\u00a0\u00bb) repr\u00e9sente une partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal du document. Les apart\u00e9s sont fr\u00e9quemment pr\u00e9sents sous la forme d’encadr\u00e9s ou de bo\u00eetes de l\u00e9gende.<\/p>https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/aside<\/cite><\/blockquote>\n\n\n\n<aside><\/code> dans une page. D’autre part, <aside><\/code> est typiquement per\u00e7u comme ne faisant pas partie du contenu principal (barre lat\u00e9rale, etc.). C’est un \u00e9l\u00e9ment qu’on peut ne pas afficher quand on veut \u00ab\u00a0juste le contenu\u00a0\u00bb d’une page.<\/p>\n\n\n\n<section><\/code> HTML<\/a>, qui posent d’autres soucis. Dans ce contexte, on va cr\u00e9er des encadr\u00e9s en utilisant un plan B.<\/p>\n\n\n\nFaire des encadr\u00e9s (au mieux)<\/h2>\n\n\n\n