Si vous voulez que votre texte s’affiche en colonnes ou sous la forme d’un tableau, ne vous servez pas de la barre d’espacement ou de la touche de tabulation pour y arriver, car cela rend le texte incompréhensible pour les visiteurs qui utilisent une technologie d’assistance. Les colonnes créées de cette façon seront lues ligne par ligne et non colonne par colonne.

Si vous insérez un espace entre chaque lettre d’un mot pour le mettre en évidence par exemple, chaque lettre sera lue séparément, ce qui rendra l’information incompréhensible pour la personne qui utilise un logiciel de lecture vocale. Il y a d’autres façons plus accessibles d’obtenir ces effets.

Comment vous y prendre ?

La méthode à choisir dépend du but recherché :

Diviser un texte en plusieurs colonnes

C’est un effet visuel qui n’influence en rien le sens du texte. Il y a différentes façons de diviser un texte en plusieurs colonnes. Dans HTML, vous pouvez par exemple utiliser un élément <div> pour chaque colonne. Avec CSS, vous pouvez mettre ces éléments <div> les uns à côté des autres sous forme de colonnes. Pour les navigateurs récents, vous pouvez, rien qu’en utilisant CSS3, diviser automatiquement un texte contenu dans un élément HTML en plusieurs colonnes. Comme vous réglez la mise en forme des colonnes avec CSS, le texte reste intact et est donc toujours compréhensible et lisible pour les visiteurs qui ont recours à une technologie d’assistance.

Afficher un texte sous forme de tableau

S’il s’agit effectivement de données tabulaires, la structure de celles-ci doit être reprise dans le code HTML. Ce n’est pas seulement la forme qui compte ici, mais aussi la signification des données. Les placer ensemble dans un tableau permet de clairement faire comprendre la relation qu’elles ont entre elles, ce qui est très différent d’un texte affiché en colonnes qui n’apporte aucune signification supplémentaire au contenu du texte. C’est pour cette raison que la forme du tableau doit être définie dans la structure du texte en utilisant le code HTML.

Espacer des lettres

C’est un effet visuel qui n’influence pas la signification du mot. Utilisez CSS permet d’éviter de mettre un espace entre chaque lettre car cela a l’avantage de ne pas modifier le sens du mot. Et les visiteurs qui se servent d’une technologie d’assistance peuvent alors lire le mot normalement.

Le code HTML ci-après contient l’en-tête ‘Musée’. Aucun espace n’a été ajouté dans le mot :

<h2>Museum</h2>

Le code CSS ci-après permet d’écarter légèrement (à savoir de 1em, une unité de mesure dans CSS) les lettres de l’en-tête <h2>. Visuellement, on dirait qu’un espace a été ajouté entre chaque lettre.

h2 { letter-spacing: 1em; }

Pour les redacteurs

Le rédacteur doit veiller à ne pas utiliser d’espaces ou de tabulations pour créer des colonnes, des tableaux ou des effets textuels spéciaux. Les tableaux doivent être créés avec les fonctions adéquates de l’éditeur dans CMS. Il faut travailler avec CMS pour faire des colonnes et pour espacer des lettres dans un mot.