Iconbox — Format, règles et exemples

Un iconbox associe une icône porteuse de sens à un court libellé et une explication ciblée. L’icône rend le sujet reconnaissable, le libellé le nomme, et le texte explique pourquoi il est important. L’élément fonctionne mieux comme membre d’un petit groupe homogène — par exemple trois capacités produit ou quatre prérequis — et non comme une décoration dispersée dans une page.

Le symbole de vérification a un sens : il renforce la notion de vérification plutôt que de combler un espace vide. Puisque le libellé visible énonce déjà la même signification, le symbole rendu est masqué pour les technologies d’assistance. Un utilisateur de lecteur d’écran reçoit le message complet via « Sources vérifiées » et son explication, sans entendre une sortie redondante de l’icône.

Pourquoi cet élément est important

Les lecteurs ne traitent pas chaque phrase dans l’ordre. Ils cherchent des repères qui répondent à « Est-ce que cela concerne ce dont j’ai besoin ? » Un iconbox crée un motif de reconnaissance compact : d’abord la forme, ensuite le libellé, puis l’explication. Dans un groupe bien formé, les lecteurs peuvent parcourir les libellés, identifier une catégorie pertinente, puis ne lire que le texte secondaire dont ils ont besoin. Cela réduit l’effort nécessaire pour démêler un paragraphe contenant plusieurs idées d’importance égale.

La valeur psychologique provient de la reconnaissance, du regroupement et de la cohérence. Un bouclier familier peut évoquer la protection, une horloge le temps, et un document le reporting avant même que le lecteur finisse le libellé. Le libellé lève ensuite l’ambiguïté. Une géométrie répétée indique au lecteur que les éléments ont le même rang éditorial. Ce signal n’est utile que lorsque le contenu est véritablement parallèle ; une grille de cartes ne peut pas transformer des affirmations sans lien en un ensemble cohérent.

L’extractibilité automatique signifie qu’un logiciel peut isoler une unité de contenu tout en conservant son sujet et son affirmation. Un iconbox structuré expose un élément nommé avec un corps concis et une position stable au sein d’un groupe optionnel. Les systèmes de recherche peuvent extraire « Sources vérifiées » avec son explication plutôt que de deviner quelle phrase correspond à quel symbole visuel. L’icône elle-même contribue peu à l’extraction, donc les mots visibles doivent porter la proposition complète.

L’icône doit néanmoins avoir un sens éditorial. Une étincelle, une fusée ou une forme abstraite arbitraire ajoute du bruit pour les humains et aucune sémantique utile pour les machines. « Porteur de sens mais redondant » est un mode d’accessibilité valable : une icône peut aider les lecteurs voyants à reconnaître une catégorie tout en étant masquée aux technologies d’assistance, parce que le libellé visible en fournit déjà le sens. Suivez les règles de rédaction des éléments en rédigeant d’abord l’idée complète, puis en sélectionnant l’iconbox uniquement lors du passage structurel ultérieur. Les limites spécifiques à l’élément ici prévalent pour le choix de l’icône, le regroupement et le mapping d’accessibilité.

Quand l’utiliser

Utilisez un iconbox lorsque le contenu est une idée concise et nommée et qu’une icône issue du système approuvé peut représenter cette idée sans ambiguïté. Un groupe est approprié lorsque deux à six éléments répondent à la même question implicite avec une profondeur comparable : « Qu’est-ce qui est inclus ? », « Quelles garanties s’appliquent ? » ou « Que produit ce flux de travail ? » Chaque élément doit rester compréhensible lorsqu’il est copié sous forme de texte brut.

Parmi les bons usages : un résumé de fonctionnalités avec un résultat par élément, un aperçu des prérequis avant des instructions détaillées, un ensemble de principes de service, ou une explication concise des résultats d’un flux de travail. L’icône est une aide à la reconnaissance, pas la preuve. Les détails tels que les formats de fichiers, les délais de réponse, les systèmes pris en charge ou les responsabilités appartiennent toujours au libellé et au corps.

Les cas limites sont fréquents :

• Utilisez une simple liste à puces lorsque l’icône serait la même coche sur chaque élément. La répétition n’apporte aucun sens de catégorie.
• Utilisez un tableau comparatif lorsque les éléments doivent être évalués selon des critères communs. Des iconboxes séparés rendent la comparaison plus difficile.
• Utilisez une liste d’étapes lorsque l’ordre, l’achèvement ou la dépendance comptent. Une rangée d’iconboxes implique des éléments équivalents, pas une séquence.
• Utilisez une boîte de définition lorsqu’un terme méconnu nécessite une signification formelle. Une icône ne renforce pas une définition précise.
• Utilisez un avertissement ou une note lorsque la gravité et l’interruption sont les principaux enjeux. Un iconbox a un poids structurel neutre.
• Utilisez des sections complètes lorsque chaque élément nécessite plusieurs paragraphes, preuves, médias ou sous-titres.

N’utilisez pas les iconboxes simplement pour donner un aspect design à une page riche en texte. Si l’auteur choisit l’icône après avoir cherché quelque chose de visuellement attrayant plutôt que sémantiquement précis, le contenu n’a probablement pas besoin de cet élément.

Où le placer

Placez un iconbox seul immédiatement après le paragraphe qu’il soutient. Placez un groupe d’iconboxes après un titre et un paragraphe d’introduction qui nomme la question commune. Ce contexte explique pourquoi les éléments vont ensemble ; le groupe fournit ensuite la réponse compacte. Faites suivre le groupe de détails, de preuves ou de la prochaine décision plutôt que de répéter chaque boîte en prose.

Dans un article, le premier groupe ne devrait apparaître qu’après la réponse directe ou la définition d’ouverture. Dans une page commerciale, un groupe de capacités peut suivre l’énoncé du problème et du résultat, mais il ne doit pas précéder la proposition de valeur simplement pour créer un accroche visuelle. Dans la documentation, placez un groupe de prérequis avant la procédure qu’il régit, tout en conservant la séquence requise et les critères d’acceptation dans les instructions ordinaires.

Ne placez pas un groupe d’iconboxes directement à côté d’une autre grille de cartes, d’un tableau comparatif, d’un mur de logos, d’une bande de statistiques ou d’un appel à l’action multi-colonnes. Des grilles adjacentes aplatissent la hiérarchie de l’information et donnent aux faits éditoriaux l’apparence de promotions. Insérez un texte explicatif ou une limite de section entre eux. Ne placez pas un iconbox entre une affirmation et sa source, entre une étape et son résultat attendu, à l’intérieur d’une cellule de tableau ou à l’intérieur d’un autre iconbox. Ne mettez jamais deux groupes dos à dos.

Anatomie

Un iconbox contient trois zones rédigées et une relation contextuelle. La capture d’écran identifie les zones porteuses de sens plutôt que les valeurs en pixels, afin que le contrat survive aux refontes visuelles.

1. Zone d’icône : Utilise une icône approuvée dont le concept correspond à l’élément. Elle ne remplace jamais les mots visibles.
2. Libellé court : Nomme la fonctionnalité, le prérequis, le résultat ou la catégorie dans un langage concret.
3. Corps du texte : Explique la conséquence, la portée ou la preuve en un paragraphe compact.
4. Destination optionnelle : Donne une prochaine étape descriptive lorsque la variante liée est utilisée.
5. Contexte de groupe : Un titre précédent ou une étiquette de groupe accessible énonce la question à laquelle tous les iconboxes frères répondent.

La bordure, l’arrière-plan, le rayon, la taille de l’icône, la couleur, les colonnes de la grille et les points de rupture appartiennent au moteur de rendu. Les auteurs choisissent le contenu sémantique, l’identité de l’icône, l’ordre dans la source et le mode d’accessibilité.

Exemples de design

L’élément prend en charge quatre variantes de présentation. Toutes préservent la même hiérarchie icône-libellé-corps et le même ordre dans la source.

Standard : La carte par défaut, seule ou en groupe. À utiliser lorsque le corps nécessite 25 à 60 mots pour expliquer un élément.

Compact : Utilise un corps d’une phrase de 12 à 30 mots. Convient aux concepts familiers, pas pour compresser une qualification nuancée.

Lié : Ajoute une destination. Privilégiez un lien descriptif visible. Si la carte entière est interactive, le moteur de rendu doit fournir une seule cible de lien et un état de focus clair.

Statut : Communique un état tel que disponible, restreint, réussi ou en attente. Le mot de statut doit être visible ; ni la couleur ni la forme de l’icône ne peuvent être le seul signal.

Vue réduite : Tout groupe devient une colonne dans l’ordre de la source. Le moteur de rendu ne doit pas réorganiser les boîtes pour équilibrer leurs hauteurs.

Le mode d’accessibilité est distinct de la variante de présentation. Une icône redondante est masquée aux technologies d’assistance car son libellé porte le même sens. Une icône véritablement informative reçoit un équivalent textuel programmatique, mais les auteurs devraient normalement ajouter cette information au libellé visible plutôt que de maintenir un fait porté uniquement par l’icône.

Paramètres

Le contrat maintient la distinction entre le sens rédigé et la présentation. Les limites s’appliquent à chaque variante sauf si une limite plus stricte est précisée.

icon doit résoudre via le registre d’icônes approuvé ; les auteurs ne peuvent pas fournir de SVG arbitraire, d’emoji, d’URL d’image ou de noms de classes de polices d’icônes. Le Markdown limité autorise l’emphase, le code en ligne et un lien en ligne. Il exclut les titres imbriqués, les listes, les tableaux, les médias, les formulaires, les boutons, les accordéons et autres composants. Lorsque le premier titre du corps fournit label, l’adaptateur supprime ce titre du corps et le restitue au niveau correct par rapport à la page.

Syntaxe et exemples de code

Chaque notation correspond à la même icône, au même libellé, au même corps, à la même variante et au même mode d’accessibilité. La clé d’icône est sémantique et portable ; chaque plateforme associe shield-check à son actif local approuvé.

Directive Markdown portable

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Sources vérifiées

Chaque affirmation factuelle renvoie à une source qu'un relecteur peut inspecter, afin que les preuves restent visibles pendant la rédaction, la validation et les mises à jour ultérieures.
:::

Le premier titre devient label ; le paragraphe restant devient content. L’icône est redondante car « Sources vérifiées » donne le sens complet en texte visible.

Code court Hugo

{{< iconbox icon="shield-check" label="Sources vérifiées" iconMode="redundant" variant="standard" >}}
Chaque affirmation factuelle renvoie à une source qu'un relecteur peut inspecter, afin que les preuves restent visibles pendant la rédaction, la validation et les mises à jour ultérieures.
{{< /iconbox >}}

L’adaptateur utilise uniquement des paramètres nommés. Il doit rejeter une clé d’icône ou une variante inconnue plutôt que d’afficher silencieusement un repli qui pourrait en changer le sens.

Bloc WordPress

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Sources vérifiées","iconMode":"redundant","variant":"standard"} -->
<p>Chaque affirmation factuelle renvoie à une source qu'un relecteur peut inspecter, afin que les preuves restent visibles pendant la rédaction, la validation et les mises à jour ultérieures.</p>
<!-- /wp:amicited/iconbox -->

L’éditeur devrait exposer un sélecteur d’icônes approuvées avec recherche, et non un champ de texte libre. Son aperçu du nom accessible devrait indiquer si l’icône est masquée ou annoncée.

Exemples

Bon exemple

Cet exemple fonctionne car le symbole de document correspond au concept de rapport, le libellé nomme une capacité concrète et le corps explique le résultat et sa conséquence pratique. Le texte visible est complet sans le symbole, donc le symbole peut être masqué aux technologies d’assistance.

Mauvais exemple

Cet exemple échoue à tous les niveaux. La fusée est décorative plutôt qu’un marqueur de catégorie précis, le libellé ne contient aucune capacité spécifique et le corps n’offre ni mécanisme, ni limite, ni résultat vérifiable. L’emoji peut également être annoncé de manière imprévisible. Remplacez le bloc par une déclaration concrète — ce qui devient plus rapide, par quel mécanisme, sous quelles conditions — ou supprimez-le.

Balisage schema et accessibilité

Iconbox n’a pas de type Schema.org dédié. Son libellé et son corps restent du contenu de l’Article, TechArticle, WebPage, Product ou autre entité de niveau page englobante lorsque ce balisage est par ailleurs justifié. Un groupe visuel n’est pas automatiquement un ItemList ; n’utilisez le balisage de liste que lorsque l’ensemble est complet ou ordonné dans le modèle de contenu. Un iconbox de statut ne justifie pas les propriétés Review, Rating ou de disponibilité sans les données sous-jacentes requises.

Rendez un iconbox non interactif comme une section lorsqu’il fait partie de l’argument principal ou comme un aside lorsqu’il est supplémentaire. Donnez-lui un nom accessible via le libellé visible. Utilisez un vrai titre au niveau correct ; ne choisissez pas h3 simplement parce que sa taille de police par défaut semble correcte. Des éléments frères répétés peuvent se trouver à l’intérieur d’une liste lorsque le groupe est véritablement une liste, chaque iconbox occupant un élément de liste.

La plupart des icônes devraient être des SVG en ligne avec aria-hidden="true" et focusable="false", car le libellé visible répète leur sens. Cela ne les rend pas décoratives sur le plan éditorial : elles aident toujours à la reconnaissance visuelle, mais annoncer deux fois le même concept ajoute du bruit. Si une icône communique une information absente du libellé, fournissez un équivalent textuel accessible via le mapping iconText du composant. Mieux encore, révisez le libellé visible pour que tous les lecteurs reçoivent l’information.

Ne vous fiez jamais uniquement à la couleur, à la position, au mouvement ou à la forme de l’icône. Une coche verte nécessite un texte visible comme « Réussi » ; un cadenas nécessite « Restreint » ou la condition d’accès exacte. Les icônes nécessitent un contraste suffisant avec leur arrière-plan, mais le moteur de rendu possède les tokens de couleur. Les fioritures décoratives qui n’apportent rien doivent être supprimées, pas assorties d’un texte alternatif verbeux. Évitez alt="icône", les noms de fichiers, les noms de glyphes Unicode et les textes en double comme « Bouclier, Sources vérifiées. »

Pour la variante liée, un iconbox a une seule destination. Le nom interactif doit communiquer cette destination, le focus clavier doit être visible et la zone cliquable ne doit pas contenir un autre lien ou bouton. Le survol ne peut pas révéler de texte essentiel. L’ordre de lecture et l’ordre du clavier doivent correspondre à l’ordre de la source à toutes les largeurs de vue.

Règles de rédaction

Rédigez le libellé avant de choisir l’icône. Le libellé doit être une phrase nominale concrète ou un résultat court : « Accès basé sur les rôles », « Export hebdomadaire » ou « Révision humaine ». Assurez-vous que les libellés d’un même groupe sont grammaticalement parallèles. Évitez les affirmations génériques comme « Puissant », « Transparent », « Innovant » et « Meilleur de sa catégorie », car elles ne nomment ni une capacité ni une décision.

Utilisez 2 à 6 mots et pas plus de 55 caractères pour le libellé. Utilisez un paragraphe de corps de 12 à 60 mots ; la variante compacte doit rester entre 12 et 30 mots. Commencez par le mécanisme, la portée ou le résultat spécifique. Gardez un ton calme et factuel. Si une qualification modifie la promesse, mettez-la dans la même boîte plutôt qu’en petits caractères éloignés.

Utilisez deux à six boîtes par groupe. Donnez à chaque élément une profondeur comparable et faites-les répondre à la même question. Ordonnez par priorité du lecteur, logique de flux de travail ou catégorie énoncée — pas par l’apparence de l’icône. N’utilisez pas la même icône pour des significations différentes au sein d’un même groupe, et n’utilisez pas plusieurs styles visuels ou familles d’icônes ensemble.

Ne mettez jamais ces éléments à l’intérieur d’un iconbox :

• Un inventaire long de fonctionnalités, une procédure en plusieurs étapes, une liste à puces imbriquée, un tableau, un formulaire, un témoignage, un prix ou une clause de non-responsabilité.
• Un libellé composé uniquement d’une icône, un acronyme non expliqué ou un statut exprimé uniquement par la couleur.
• Plus d’un lien, des appels à l’action concurrents ou un bouton à l’intérieur d’un lien couvrant toute la carte.
• Une capture d’écran, une vidéo, un graphique, un logo, une photographie ou un autre iconbox.
• Des preuves qui s’appliquent à plusieurs boîtes mais n’apparaissent que dans une seule, rendant le groupe inégal ou trompeur.

Si le contenu dépasse ces limites, promouvez-le en section normale. Si chaque élément nécessite la même coche, supprimez les icônes et utilisez une liste. Si les libellés n’ont pas de sens sans leurs images, réécrivez les libellés avant la publication.

Types d’articles qui l’utilisent

Le champ postTypes des métadonnées est la source de ce tableau. L’inclusion signifie que l’élément est disponible lorsque le contenu forme un véritable ensemble homogène, pas que chaque page de ce type devrait contenir des iconboxes.

Liste de contrôle QA

• Icône porteuse de sens : Chaque icône a une relation évidente avec son libellé ; la supprimer réduirait la reconnaissance visuelle, pas le sens factuel.
• Texte visible complet : Le libellé et le corps communiquent l’intégralité de la proposition sans recourir à l’icône, à la couleur ou à la position.
• Mode d’accessibilité correct : Les icônes redondantes sont masquées ; les icônes informatives ont un équivalent textuel concis et une raison documentée.
• Véritable groupe homogène : Les éléments frères répondent à la même question, ont une profondeur comparable et utilisent une grammaire de libellé parallèle.
• Nombre sûr : Un groupe contient deux à six éléments ; les ensembles plus volumineux sont catégorisés ou déplacés vers une structure plus adaptée.
• Texte précis : Les libellés nomment des capacités, prérequis, états ou résultats concrets ; les corps donnent un mécanisme, une portée ou une conséquence.
• Source d’icône valide : Chaque clé d’icône existe dans le registre approuvé et aucun emoji, SVG arbitraire, URL d’image ou nom de classe de police d’icônes n’est rédigé.
• Placement judicieux : Le groupe suit son contexte de cadrage et ne sépare pas les affirmations de leurs sources, les étapes de leurs résultats, ni les avertissements des actions concernées.
• Voisins sûrs : Aucune grille de cartes, tableau, mur de logos, bande de statistiques ou CTA multi-colonnes n’est placé directement à côté du groupe.
• Structure accessible : Les niveaux de titres suivent le document, le contraste est suffisant, le statut a un texte visible et l’ordre source correspond à l’ordre de lecture.
• Retenue d’interaction : Un iconbox lié a une seule destination, un nom descriptif, un état de focus visible et aucun contrôle interactif imbriqué.
• Parité des notations : Markdown portable, Hugo et WordPress préservent la même clé d’icône, le même libellé, le même contenu, la même variante et le même comportement d’accessibilité.
• Retenue du schema : Le composant n’ajoute pas de schema autonome et n’infère pas de propriétés ItemList ou de statut à partir de l’apparence.
• Vérification responsive : Aux largeurs réduites, les boîtes s’empilent dans l’ordre source sans coupure, défilement horizontal ou texte essentiel masqué.

Rejetez l’élément si son icône est arbitraire, son libellé est vague ou son texte visible dépend du symbole. Ce sont des défauts du modèle de contenu ; modifier l’espacement, la couleur ou le style d’illustration ne peut pas les réparer.

FAQ

Les FAQ des métadonnées couvrent la taille du groupe, le texte alternatif, les cartes liées, les emojis et le comportement du schema. Conserver les réponses approuvées dans des métadonnées structurées permet à la mise en page de l’academy de les restituer de manière cohérente sans dupliquer les mêmes questions dans le corps de l’article.