La plupart des textes ont une structure : ils se composent d’en-têtes, de sous-titres, de sections, d’énumérations, de citations ou de mots ou groupes de mots mis en évidence. Les visiteurs qui peuvent voir la page web savent directement où sont les titres, où se trouvent les énumérations et quand il s’agit d’une citation. Les effets visuels le montrent clairement. Les visiteurs qui ont recours à une technologie d’assistance ont besoin d’autres repères pour comprendre la signification d’éléments de texte.

Définir la structure des textes avec les bons éléments HTML permet de ne pas reposer uniquement sur la mise en forme pour transmettre la signification des éléments. Les navigateurs et les technologies d’assistance peuvent ainsi beaucoup plus facilement restituer le texte d’une autre façon, tout en conservant sa structure.

Par ailleurs, les moteurs de recherche se servent eux aussi de ce code HTML pour définir quels éléments d’un texte sont importants. Les en-têtes contiennent par exemple souvent des mots-clés essentiels. Ce qui permet de retrouver plus facilement des pages web.

Comment vous y prendre ?

La technologie d’assistance analyse la structure sous-jacente càd les éléments HTML dont on se sert pour indiquer la signification des éléments de texte. Cette structure HTML permet à la technologie d’assistance de restituer à son utilisateur la signification des éléments. Afin d’utiliser les bons éléments HTML dans les textes, il est préférable de travailler avec la barre d’outils de l’éditeur pour les éléments suivants :

  • les en-têtes ;
  • les sections ;
  • les citations ;
  • les énumérations, les listes numérotées et les listes de définitions ;
  • les mises en évidence : le gras ou l’italique.

Les en-têtes

La plupart des éditeurs vous permettent de sélectionner un texte et de le définir comme en-tête. Vous pouvez même préciser le niveau de l’en-tête (titre ou sous-titre ou inter-titre,…). Faites bien attention à utiliser les niveaux dans le bon ordre hiérarchique.

Le titre de la page est normalement un en-tête au premier niveau (l’élément <h1>). En règle générale, le CMS le placera automatiquement dans l’élément <h1> en haut de la page. Cela signifie que les sous-titres dans le texte doivent se situer au deuxième niveau (l’élément <h2>). Les titres en dessous viennent au troisième niveau et ainsi de suite.

Ce qui donne le résultat suivant en code HTML:

<h2>C'est un sous-titre au deuxième niveau</h2>
<h3>C'est un sous-titre au troisième niveau</h3>
 

Remarque

Il est indispensable d’attribuer à chaque titre une balise HTML (<h1> ou <h2>,…) afin que les technologies d’assistance puissent reconnaître le titre, le sous-titre,… et les lire. Inversement, il ne faut pas attribuer une balise « titre » à un texte qui n’est pas un titre.

Les sections

En général, l’éditeur crée automatiquement un paragraphe avec votre texte quand vous commencez à taper. Pour ce faire, il faut appliquer l’élément <p> au début du bloc de texte et </p> à la fin du bloc. Assurez-vous que c’est effectivement le cas. Sinon, vous devez marquer les sections avec le bouton adéquat dans l’éditeur. De même, après avoir marqué un en-tête, vous devez souvent indiquer que le texte qui suit est une section.

Une section se présente comme suit dans le code HTML :

Pas d’interlignes

Entre chaque section de texte (<p>), les interlignes s’agencent automatiquement avec le navigateur ou les styles qui sont enregistrés dans le fichier CSS du site web.

Cependant il est aussi possible d’insérer un interligne avec l’élément <br> sans nécessairement créer de nouvelles sections.

  • Exemples : une adresse postale ou des vers d’un poèmes

Citations et références

Les citations sont souvent présentées sous forme de blocs séparés dans un corps de texte. Utilisez l’élément <blockquote> pour indiquer qu’il s’agit d’une citation. Les références ont aussi leur propre élément HTML : l’élément <cite>.

Une citation avec une référence peut se présenter comme suit en code HTML :

<blockquote>
<p>Aujourd'hui est le premier jour du reste de ma vie.</p>
<cite>Victor Hugo</cite>
</blockquote>

Énumérations et listes numérotées

Vous pouvez créer des énumérations et des listes numérotées avec la barre d’outils de l’éditeur. Chaque point de votre liste peut s’afficher avec une puce ou un numéro, selon votre préférence.

On utilise l’élément <ul> pour des énumérations (‘unordered list’). Lorsque vous créez une énumération de cette façon, chaque élément est précédé d’une puce. Ce qui ressemble à ce qui suit dans le code HTML :

<ul>
<li>Premier élément de l’énumération.</li>
<li>Deuxième élément de l’énumération.</li>
<li>...</li>
</ul>

Dans le cas des listes numérotées, on utilise l’élément <ol> ('ordered list'). Lorsque vous créez une liste numérotée de cette façon, chaque élément est précédé d’un numéro. Une liste numérotée ressemble à ce qui suit dans le code HTML :

<ol>
<li>Premier élément de la liste numérotée.</li>
<li>Deuxième élément de la liste numérotée.</li>
<li>...</li>
</ol>
 

Remarque : Faites une véritable liste

Si vous allez à la ligne à chaque mot et que vous mettez un tiret ou un astérisque avant chaque mot, ceci ne compose pas une vraie liste. Dès lors, la technologie d’assistance ne perçoit qu’une série de tirets et de mots incompréhensibles pour la personne malvoyante. Pour créer une vraie liste, vous devez absolument appliquer le bon code HTML ‘ou le bouton dans l’éditeur de texte).

Listes de définitions et autres listes de valeurs

Dans le cas d’un lexique ou glossaire, chaque nom, terme ou notion est associé à leur propre élément HTML distinct.

  • <dl> (definition line) indique que l’on commence une série de définitions. Pour terminer cette série, terminez par </dl>.
  • <dt> (definition term) indique le terme à définir. Pour terminer le terme, terminez par </dt>.
  • <dd> (definition description) indique que l’on commence à définir le terme. Pour terminer la description, terminez par </dd>.
<dl>
<dt>Navigateur</dt>
<dd>Logiciel de navigation qui permet de consulter des pages web.</dd>
<dt>Blog</dt>
<dd>Site web qui est régulièrement mis à jour, peut être comparé à un journal de bord.</dd>
</dl>

Tous les éditeurs n’auront pas un bouton pour insérer ce type de liste. Souvent, le CMS génère automatiquement un glossaire. Dans ce cas, le développeur doit utiliser les éléments HTML pour une liste de définitions.

Mise en évidence

Quand vous voulez attirer l’attention sur des mots ou groupes de mots, vous les mettez généralement en gras (<strong>) ou en italique (<em>). Si l’éditeur est correctement configuré, il vous propose des boutons adéquats permettant d’utiliser les bons éléments HTML.

Un mot mis en évidence peut se présenter comme suit :


Appelle un médecin <em>maintenant</em> !

Un mot important peut aussi se présenter comme suit :


<strong>Attention</strong> : cette eau n’est pas potable.

Les logiciels de synthèse vocale peuvent prononcer les mots mis en évidence d’une manière différente si la mise en évidence est indiquée avec les bons éléments HTML. Ainsi, la signification qui est apportée par un effet visuel (le gras ou l’italique) peut également être perçue par les visiteurs ayant recours à une technologie d’assistance.

Pour les redacteurs

Le rédacteur doit s’assurer que les boutons sont correctement utilisés afin que la structure du texte soit exacte.

Pour les développeurs

Le développeur est responsable de la configuration de l’éditeur dans le CMS. Idéalement, il y a des boutons pour indiquer tous les éléments de texte susmentionnés, pour autant qu’ils soient utilisés sur le site web concerné.