retour vers le site AccessiWeb

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 ?

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

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 :

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 12.6 Fiche suivante : fiche 12.8

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