Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 6.6 : Dans chaque page Web, les liens sont-ils visuellement séparés de manière distincte ?

revenir en haut de la page

Carte d'identité du critère 6.6 [niveau AccessiWeb : Or]

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les liens doivent être visuellement séparés de manière distincte.

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. Cela 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 ou des internautes ayant des difficultés de lecture dûes à un handicap cognitif, 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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique tous les groupements de liens (suite de balises a).
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 6.6.a [Or] : Dans chaque page Web, les liens sont-ils visuellement séparés de manière distincte ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

Pour le test 6.6.a [Or] :

1. Ce test n'est pas évaluable par la Barre d'outils Accessibilité du Web (version 2.0 beta).

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

Pour le test 6.6.a [Or] :

1. Ce test n'est pas évaluable par la Barre d'Outils Web Developper (version 1.1.4).

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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

• WAI Curriculum : Include printable characters between adjacent links
• Article de Pompage.net : Domptez vos puces, dressez des listes

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.