Balance ton <br> !

Lorsqu'on audite des sites Web, on rencontre encore assez souvent, dans le code HTML, des titres qui sont coupés par une balise <br>. Comme par exemple :

<h2 class="text-center">Pour un internet <br>plus accessible</h2>

Le problème

On ne parle pas ici d'un problème d'accessibilité bloquant, mais on peut faire mieux avec des avantages qui dépassent l'accessibilité, donc pourquoi s'en priver...

Alors, qu'est-ce qui coince ?

• Premièrement, un lecteur d'écran va arrêter sa lecture quand il rencontre le  <br>, puis quand il lira la seconde partie, il va répéter le rôle titre niveau 2.

  Autrement dit, au lieu de dire Titre de niveau 2 Pour un internet plus accessible, il lira Titre de niveau 2 Pour un internet Titre de niveau 2 plus accessible. Vous avouerez que pour une bonne compréhension du texte, ce n'est pas l'idéal.

• Ensuite, on force une coupure qui n’est peut-être pas pertinente selon le contexte ou la largeur affichée. On risque d'avoir un titre étrangement cassé sur mobile, ou au contraire un espace inutile sur grand écran.

• Enfin, on modifie le HTML pour résoudre un problème purement visuel… ce qui augmente la dette technique : si la maquette change, il faut corriger le HTML, pas le CSS.

La solution : text-wrap: balance

La propriété CSS text-wrap: balance permet au navigateur d’optimiser automatiquement la répartition du texte sur plusieurs lignes. Le titre devient visuellement équilibré, sans intervention manuelle dans le HTML.

Exemple d’utilisation :

h2 {
    text-wrap: balance;
    text-align: center;
}

Accessible

Le HTML reste sémantiquement propre : un vrai titre h2 sans coupure artificielle. Les lecteurs d’écran n’ont que le texte, pas de bruit inutile.

Responsive par défaut

Le navigateur recalcule l’équilibre des lignes en fonction :

• de la largeur disponible ;
• de la police ;
• et même du contenu dynamique.

Maintenance simplifiée

Si le texte change — ou si le titre est éditable par un CMS — le comportement reste cohérent. Plus besoin de bricoler le HTML pour reproduire une mise en forme.

Exemple comparatif

Voyez l'exemple sur CodePen.

Le résultat visuel reste équilibré, mais le contenu est enfin accessible, responsive et sémantiquement correct.

Avec text-wrap: balance, on relève deux défis fondamentaux de l’accessibilité :

1. Séparer fond et forme.

   Le texte reste dans le HTML. La présentation reste dans le CSS. C’est la base de l’accessibilité et du design numérique durable.

2. Préserver la lisibilité.

   Il optimise les lignes pour éviter :

   • les mots isolés ;
   • les lignes trop courtes ;
   • les ruptures visuelles gênantes.

Compatibilité navigateurs

La propriété text-wrap: balance est compatible avec tous les navigateurs modernes. Pour plus de détails, voyez text-wrap: balance | Can I Use.

Conclusion

L’époque où l’on bricolait des sauts de ligne dans les titres est révolue. Grâce à text-wrap: balance, on peut :

• améliorer l’accessibilité,
• garder un HTML sémantiquement propre,
• créer des titres visuellement équilibrés,
• réduire la dette technique et faciliter la maintenance,
• respecter les bonnes pratiques responsive.

Le navigateur fait le travail, et tout le monde y gagne : designers, intégrateurs, rédacteurs… et surtout les utilisateurs.