<b> et <i> : le déguisement invisible

C’est comme mettre un déguisement à un fantôme : tu crois que c’est visible… mais personne ne le perçoit.

Les lecteurs d’écran s’appuient sur le sens, pas l’apparence. Un texte en <b> sera lu exactement comme du texte normal. Aucune emphase, aucune indication que ce mot est important.

<!-- ❌ Ça se voit… mais ça ne s'entend pas -->
<p>Merci de <b>ne pas</b> toucher aux paramètres.</p>

<!-- ✅ Ça se voit ET ça se comprend -->
<p>Merci de <strong>ne pas</strong> toucher aux paramètres.</p>

La règle est simple

Si c’est juste pour le style → CSS.

.highlight {
  font-weight: bold;
  color: #1a1a2e;
}

Si c’est pour donner du sens → HTML sémantique.

<strong>Ce mot est important.</strong>
<em>Je veux insister là-dessus.</em>

Le comparatif

Balise	Signification	Lecteur d’écran
<strong>	“Ce contenu est important”	Peut être annoncé avec emphase
<em>	“Ce contenu est accentué”	Peut être annoncé avec un changement de ton
<b>	Aucune signification	Lu comme du texte normal
<i>	Aucune signification	Lu comme du texte normal

<strong> et <em> sont des balises sémantiques : elles portent un sens indépendant de leur apparence visuelle. Les lecteurs d’écran comme VoiceOver ou NVDA peuvent adapter leur intonation pour ces balises.

<b> et <i> sont des balises de présentation : elles ne portent aucun sens. C’est du maquillage HTML.

Mais alors, quand utiliser <b> et <i> ?

En théorie, HTML5 leur a redonné un rôle :

• <b> : “attirer l’attention sans importance particulière” (mots-clés dans un résumé, noms de produits)
• <i> : “voix alternative” (terme technique, mot en langue étrangère, pensée intérieure)

En pratique ? Presque personne ne les utilise correctement. Et surtout, aucun lecteur d’écran ne les traite différemment du texte normal.

Si vous hésitez, utilisez <strong> / <em>. Vous ne vous tromperez pas.

Quelques exemples concrets

<!-- Avertissement important → strong -->
<p><strong>Attention :</strong> cette action est irréversible.</p>

<!-- Emphase sur un mot → em -->
<p>Ce n'est <em>pas</em> un bug, c'est une feature.</p>

<!-- Nom d'un produit (pas d'importance, juste visuel) → CSS -->
<p>Découvrez <span class="product-name">RGAA Lab</span>.</p>

<!-- Citation en langue étrangère → i est acceptable ici -->
<p>C'est un vrai <i lang="en">game changer</i>.</p>

Le critère RGAA concerné

Critère 8.9 — Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation.

Si vous utilisez <b> pour du gras purement visuel alors que du CSS ferait le job, c’est un usage de balise à des fins de présentation. Techniquement, c’est un point du critère 8.9.

---

Le HTML, c’est pas une question de style. C’est une question de sens.

Pour aller plus loin

• Idée reçue : “Mon site est accessible” — la sémantique HTML, c’est la base
• Images accessibles : le guide complet — même logique pour les images