# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Aide à la navigation > Fiche 12.7

## Fiche 12.7 : Y a-t-il des caractères de séparation lorsqu'il y a un groupement de liens ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 12.7
- Niveau AccessiWeb : or
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 10.5

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  L'utilisation de caractères de séparation au sein d'un groupement de liens permet à certains outils de vocalisation de marquer un temps d'arrêt entre chacun des liens. Ce qui offre un confort de lecture pour les personnes aveugles prenant connaissance d'une page à l'aide d'une synthèse vocale. Si ces caractères de séparation font défaut, les différents liens seront lus d'une seule traite, rendant à l'utilisateur leur identification et leur différenciation difficile.
- Bénéfice 2 :
  De plus, pour des personnes malvoyantes, les caractères de séparation permettent de bien distinguer la limite entre les liens.

#### Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Repérer les groupements de liens et vérifier qu'il existe des caractères de séparation, soit entrés au clavier, soit représentés par une image. Cependant, cette évaluation est plus aisée avec un navigateur.

#### Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

##### Evaluer avec la barre AccessiWeb (version 1.0) :

Ce critère n'est pas évaluable par la barre AccessiWeb.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

Ce critère n'est pas évaluable par la barre d'accessibilité AIS version 1.2 pour IE.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

Ce critère n'est pas évaluable par la barre d'outils Web Developer version 1.0.2 pour Firefox.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Lorsque des liens sont groupés, vérifier qu'ils sont séparés par un caractère imprimable ou un élément graphique dûment commenté par un caractère du type barre verticale (|), précédée et suivie d'un espace.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Le graphiste doit veiller au respect de critère.

#### Implémentation

Syntaxe générale :

- Utilisation d'un caractère entré au clavier :

  <a href="lien1">lien 1</a> | <a href="lien2">lien 2</a>

- Utilisation d'un élément graphique :
  Note : ce choix peut provoquer l'alourdissement de la page.

  <a href="lien1">lien 1</a> <img src="shim.gif" alt=" | " /> <a href="lien2">lien 2</a>

Séparer les liens adjacents à l'aide d'un caractère imprimable (entré au clavier) ou d'une image dûment commentée à l'aide de l'attribut `alt`. Dans le cas d'une image faisant office de séparateur, on utilisera ainsi par exemple

alt=" | "

et non pas

alt=""

L'utilisation d'éléments de structuration, tels que les éléments de titre ou les listes, évite d'avoir à utiliser des caractères de séparation et doit être privilégiée. Une bonne pratique consiste à utiliser une liste non ordonnée de type (`UL`) dont le style sera défini dans une feuille de style.

#### Exemple de mauvaise pratique

Voici, par exemple, un extrait de code pour une série de liens usuels situés en bas de page. Ceux-ci constituent un groupe et ne sont pas séparés par un caractère ou un élément graphique en guise de séparateur.

<a href="contact.html">Contact</a>
<a href="aide.html">Aide</a>
<a href="plan.html">Plan du site</a>
<a href="Conditions.html">conditions d'utilisation</a>

#### Exemple de bonne pratique

Séparation par un caractère imprimable :

<a href="contact.html">Contact</a> | <a href="aide.html">Aide</a> | <a href="plan.html">Plan du site</a> | <a href="Conditions.html">conditions d'utilisation</a>

Séparation par un élément graphique dûment commenté :
Il faut bien noter l'espace inclus avant et après la barre verticale dans l'alternative textuelle.

<a href="contact.html">Contact</a> <img src="pipe.gif" alt=" | " /> <a href="aide.html">Aide</a> <img src="pipe.gif" alt=" | " /> <a href="plan.html">Plan du site</a> <img src="pipe.gif" alt=" | " /> <a href="Conditions.html">conditions d'utilisation</a>

revenir en haut de la page

### Illustrations

Il n'y a pas d'illustration pour cette fiche.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
- Fiche 6.6 : Dans l'arborescence du site, y a t-il un maximum de 9 catégories par niveau de navigation ?
- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?

#### Autres ressources

- html techniques (section 10.5) : Include printable characters between adjacent links
- Domptez vos puces, dressez des listes : Article Pompage.net

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact