Utilisez les espaces et autres caractères de manière correcte et non pour créer un effet visuel.

Pourquoi?

C'est important pour qu'un lecteur d'écran puisse lire les mots correctement.

En pratique

Flèches

Si vous voulez faire un lien vers la page suivante, utilisez un bouton, un lien ou une image avec une variante textuelle correcte. N'utilisez pas de flèche composée d'un tiret (-) ou signe égal (=) associé au signe inférieur à (<) ou supérieur à (>). De cette manière l'intitulé du lien sera correct.

Exemple de pratique incorrecte

Exemple de pratique correcte

ou bien

2 3 4 5

Si vous voulez utiliser des flèches comme puce dans une liste vous pouvez remplacer la puce standard par une image de flèche grâce à CSS. Voir aussi la directive: les pages sont structurées par la sémantique.

Exemple de pratique incorrecte

<p>
-> élément 1<br />
-> élément 2<br />
-> élément 3<br />
</p>

Exemple de pratique correcte

<style>
div.example ul li {
  background: url(http://images.anysurfer.be/examples/pijltje.jpeg) center left no-repeat;
  list-style: none;
  padding: 0 0 0 1.25em;
}
</style>
<ul>
  <li>élément 1</li>
  <li>élément 2</li>
  <li>élément 3</li>
</ul>

Espaces

Les espaces sont destinés exclusivement à créer les espaces blancs de 1 caractère entre deux mots.

Lorsque les lettres d’un mot sont séparées par de réels espaces, les synthèses vocales ne liront pas le mot mais vont automatiquement l'épeler. Tel est rarement le but de la présence de ces espaces. Il en va plus généralement d’une mise en forme que l'on a voulue plus originale. Cela crée aussi des problèmes pour les moteurs de recherche et les personnes utilisant une reconnaissance vocale. Si vous souhaitez précisément rendre un tel effet, vous devez définir un style dans les CSS (letter-spacing) au lieu de placer des espaces au sein des mots.

Si vous voulez faire une mise en page en colonnes vous pouvez utiliser CSS. Si vous voulez placer des éléments l'un au-dessus de l'autre ou l'un en-dessous de l'autre il vaut mieux utiliser un tableau. Pour plus d'informations sur l'accessibilité des tableaux voir les directives sous la rubrique "tableaux" dans le bloc "Contenu".

Exemple de pratique incorrecte

<h1>G A G N E Z   U N   V O Y A G E !</h1>

Exemple de pratique correcte

h1 {
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

<h1>Gagnez un voyage!</h1>

Art ASCII

Si vous voulez utiliser de l'art ASCII, il faut également prévoir une variante textuelle, tout comme pour les images ou autres éléments visuels. Les caractères qui composent une image ASCII n'ont aucun sens lorsqu'ils sont lus comme un texte. Ils n'ont de sens que pris dans le contexte de l'image. La description peut être proposée dans un lien qui se trouve au-dessus, en dessous ou encore à côté de l'art ASCII, ou bien dans un texte qui se trouve sur la page elle-même, de préférence au-dessus de l'art ASCII.

Si vous voulez mettre de l'art ASCII sur votre site, la meilleure solution serait d'en faire une image et de la pourvoir d'un texte alt, comme dans l'exemple ci-dessous. Ceci permet au visiteur de passer l'image rapidement et évite une possible confusion entre texte et art ASCII.

Autres alphabets

Veillez à utiliser l'attribut lang pour indiquer l'usage de caractères d'un autre alphabet. Lorsqu'on utilise des lettres d'un autre alphabet sans adapter l'attribut lang, cela peut poser problème aux lecteurs d'écran et logiciels de reconnaissance vocale. Un mot écrit en grec pourrait ne pas être lisible par une aide technique.