En plus de renforcer la visibilité dans les moteurs de recherche, utiliser du vrai texte et non des textes sous forme d’image permet aux visiteurs avec un handicap visuel ou cognitif de comprendre l’information.

  • Veillez à utiliser du vrai texte et lui donner forme avec le CSS.

Image d'un texte réel

Comment vous y prendre ?

Les textes sous forme d’images peuvent se composer soit :

  1. De texte uniquement
  2. D’un texte associé à une image (ex : une bannière)

On appelle « vrai texte » un texte qui n’est pas incrusté dans une image mais qui apparaît effectivement comme du texte sur une page Word par exemple.

Par exemple, le texte que vous introduisez dans un système de gestion de contenu (CMS) s’affiche comme du vrai texte sur une page.

Utiliser du vrai texte

Hormis les exceptions repises ci-dessous, vous devez utiliser du vrai texte.

Le CSS vous permettra d’obtenir l’effet visuel souhaité :

  1. Il donne forme au vrai texte en permettant de jouer avec la couleur, la taille, la police, l’emplacement et l’interligne.
  2. Il vous permet de placer du vrai texte sur une bannière, une animation,…

En utilisant le CSS, soyez attentif à :

  1. Bien utiliser la procédure de programmation CSS pour placer des images avec texte et garder le vrai texte visible pour le logiciel de synthèse vocale
  2. Le visiteur doit pouvoir passer à une version texte uniquement de la page Web sans perdre d’informations qui seraient reprises sur des images.

Exceptions : Quand pouvez-vous utiliser du texte sous forme d’images ?

Vous pouvez opter pour le texte sous forme d’image dans les cas suivants :

  1. Si aucune des technologies (comme CSS) utilisées pour le site web ne permet d’obtenir le même rendu visuel qu’avec un texte sous forme d’image
  2. Si l’image avec le texte ne reste pas stable avec les navigateurs courants
  3. Si l’information à transmettre est essentielle sous forme d’image (ex : logo)
  4. Si le vrai texte ne correspond pas à d’autres critères d’accessibilité (ex : possibilité de redimensionner le texte à 200%)
  5. Si le visiteur a la possibilité de modifier lui-même la police de caractère, la taille des lettres, la couleur et l’arrière-plan du texte sous forme d’image.

Veillez à avoir un bon équivalent textuel pour les exceptions reprises ci-dessus.

Pour des développeurs

Remplacer du vrai texte par un texte sous forme d’image avec CSS

Le titre ci-après est placé en tant que vrai texte sur la page. Dans l’exemple, il s’agit d’un entête <h1>. L’élément <span> a été ajouté pour pouvoir placer le texte hors écran.

<h1><span>C'est la fête !</span></h1>

Le code CSS ci-après est utilisé pour créer ce titre. L’élément <span> est placé hors écran avec le positionnement absolu. L’élément <h1> reçoit une image comme arrière-plan (c’est le texte sous forme d’image dans l’élément <h1>).

h1 {
background-image: url (c’-est-la-fête.png) ;
height: 195px;
width: 290px;
background-repeat: no-repeat;
position: absolute;
}
h1 span {
position: absolute;
left: -999em;
}

Lorsqu’il traduit le projet en code, le développeur doit veiller à ce que du vrai texte soit utilisé autant que possible et à ce qu’il soit possible d’introduire ce texte dans le CMS.

Pour des rédacteurs

Lorsqu’il place des textes sous forme d’images, le rédacteur doit examiner de façon critique les possibilités qui existent pour donner forme au texte autrement (par exemple avec CSS).