3.1.2 Les espaces et autres caractères ne sont pas utilisés pour produire des effets visuels

Utilisez les lettres et espaces de manière correcte et non pour créer un effet visuel

Pourquoi?

Un lecteur d'écran prononcera les caractères affichés mais ne peut pas interpréter une éventuelle signification visuelle.

En pratique

Polices d'icônes (Icon fonts)

Une police d'icônes est une police de caractères qui s'affiche sous forme d'icônes. A chaque caractère de la police est associé une icône. Si celle-ci est décorative, vous devrez juste vous assurer que le caractère ne sera pas lu par un lecteur d'écran. Par contre, si l'icône transmet une information, vous devrez utiliser une technique pour transmettre cette information aux lecteurs d'écran. Nous abordons l'accessibilité des polices d'icônes dans l'article de blog icon fonts (NL). Vous pouvez également consulter cette page d'exemples d'utilisation de polices d'icônes.

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

<a title="page precedente" href="#"><</a>
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a title="page suivante" href="#">></a>

Exemple de pratique correcte

<a href="#">page precedente</a>
<a href="#">2</a> 
<a href="#">3</a>
<a href="#">4</a> 
<a href="#">5</a>
<a href="#">page suivante</a>

ou bien

<a href="#"><img title="page precedente" src="kleinerdan.jpg" alt="page precedente" border="0" /></a>
<a href="#">2</a> 
<a href="#">3</a>
<a href="#">4</a> 
<a href="#">5</a>
<a href="#"><img title="page suivante" src="http://images.anysurfer.be/examples/groterdan.jpg" alt="page suivante" border="0" /></a>

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.

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>Gagnez un voyage!</h1>
h1 {  
 letter-spacing: 0.3em;
 text-transform: uppercase;
}

Autres exemples

Les exemples ci-dessus ne sont pas exhaustifs. L'utilisation d'ASCII art ou de leetspeak (remplacement de lettres par des chiffres qui leur ressemblent, par exemple S par 5 ou O par 0) sont également problématiques.

comment tester

SI vous trouvez du texte dans lequel les espaces entre les lettres sont plus marqués, vérifiez si l'espacement est bien généré grâce à la feuille de style et non en intercalant des caractères espaces.

Si vous trouvez des caractères ou signes utilisés pour produire un effet visuel ou artistique, vérifiez que l'information soit aussi présente sous forme textuelle à proximité.