Texte riche (Rich Text)

Qu'est-ce que le texte riche ?

Le texte riche (rich text) est un texte qui porte sa mise en forme avec les caractères : gras, italique, titres, listes, liens, couleurs et parfois images ou tableaux. Le texte brut ne contient que des caractères. Le texte riche a besoin d'un format pour stocker la mise en forme, le plus souvent HTML sur le web ou Rich Text Format (RTF) dans les traitements de texte. Les éditeurs qui permettent de l'écrire visuellement s'appellent éditeurs de texte riche ou éditeurs WYSIWYG.

Comment fonctionne le texte riche

Derrière la barre d'outils, un éditeur stocke la mise en forme sous forme de balisage ou de document structuré. Sur le web, le navigateur peut rendre un élément modifiable avec l'attribut contenteditable. Selon MDN, la valeur true conserve la mise en forme au collage, tandis que plaintext-only la supprime. La plupart des éditeurs en production construisent leur propre modèle de document par-dessus, puis exportent du HTML.

Une fois stocké en HTML, le texte fait partie de la structure de la page, que les navigateurs exposent sous forme de DOM. Dans un CMS, un champ de texte riche est souvent un bloc de contenu parmi d'autres.

Exemple

Un éditeur de blog propose le gras, un menu de titres, un bouton de lien et des listes à puces. Une autrice écrit un titre, une phrase en gras et une liste. L'éditeur enregistre des éléments <h2>, <strong> et <ul><li>. Un lecteur d'écran peut alors annoncer correctement le titre et la liste. Si elle avait mis une ligne en grand et en gras avec des réglages de police, le rendu serait identique mais sans valeur de titre.

Erreurs courantes

• Faux titres : du texte grand et gras au lieu d'un vrai niveau de titre, ce qui prive les utilisateurs de lecteur d'écran de navigation.
• Coller depuis Word ou le web : importe des styles en ligne et du balisage parasite. Collez en texte brut ou nettoyez le HTML à l'enregistrement.
• Enregistrer du HTML non assaini : le texte riche saisi par des utilisateurs doit être assaini côté serveur, sinon il peut contenir des scripts (cross-site scripting).
• Trop de styles : plusieurs polices, couleurs et tailles donnent un contenu incohérent. Limitez la barre d'outils à ce que permet le système de design.
• Couleur ou soulignement comme seul signal : un texte souligné qui n'est pas un lien déroute, et un texte rouge seul ne signale pas un avertissement.

Texte riche, accessibilité et tests

La mise en forme doit porter un sens que les technologies d'assistance peuvent lire : de vrais titres, de vraies listes, des liens explicites et un texte alternatif sur les images (voir images accessibles et WCAG). Vérifiez aussi le contraste du texte, traité dans palettes de couleurs accessibles. Notre guide des outils de test d'accessibilité web présente des moyens de contrôler le contenu rendu, et le suivi de la vitesse des pages suit le score d'accessibilité Lighthouse des pages qui affichent votre texte riche, ce qui permet de repérer plus vite un changement de modèle qui casse la structure des titres ou le contraste.

Questions fréquentes

Quelle différence entre texte riche et texte brut ?

Le texte brut ne contient que des caractères. Le texte riche ajoute une mise en forme comme le gras, les titres, les listes et les liens, stockée dans un format tel que HTML ou RTF.

Le HTML est-il du texte riche ?

Le HTML est un format de balisage que les éditeurs de texte riche utilisent couramment pour stocker la mise en forme. Le texte riche, c'est ce que voit le lecteur. Le HTML est la façon de l'écrire.

Markdown est-il du texte riche ?

Pas en soi. Markdown est du texte brut avec des marqueurs simples qu'un moteur de rendu transforme en sortie mise en forme, généralement du HTML.

Qu'est-ce qu'un éditeur WYSIWYG ?

Un éditeur WYSIWYG (« ce que vous voyez est ce que vous obtenez ») affiche la mise en forme pendant la saisie, au lieu d'afficher le balisage. Les éditeurs de texte riche sont généralement WYSIWYG.

Est-il sûr d'accepter du texte riche venant des utilisateurs ?

Seulement si vous l'assainissez côté serveur et n'autorisez qu'une liste fixe de balises et d'attributs. Ne faites jamais confiance au HTML envoyé par un éditeur du navigateur.