Page Comparison

4.1 Identification visuelle

4.1.1 Distinguer les liens du texte courant

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple, en les soulignant.

Cette règle concerne uniquement les liens à même le contenu principal. Les liens intégrés dans des groupes de liens (dans les menus, par exemple) ne sont pas concernés car suffisamment reconnaissables comme tels.

Image ModifiedASTUCES

En plus de cette recommandation, il est également utile de prévoir l’apparence des liens au survol dans les maquettes :

• Lien avec trait (exemple A) Normal : lien de couleur, souligné d'un trait pointillé 1 px. Survol : trait plein et large bande de couleur en arrière-plan. Usage : liens intégrés dans un texte courant. Pour les titres de grands formats et les titres dans un fil éditorial, le soulignement n'est pas nécessaire; cependant l'état de survol doit être précisé.
• Lien sans trait (exemple B): Normal : lien de couleur. Survol : changement de couleur du lien et large bande de couleur en arrière-plan, déclinaison pâle de la couleur du lien. Usage : liens en énumération (module d'informations complémentaires, fil de liens éditoriaux, mots-clés, etc.).

Image ModifiedASTUCES - BONIFICATION

• Une autre bonne astuce est de modifier la couleur du lien lorsque le contenu a été consulté.

Image ModifiedATTENTION

Il est fortement déconseillé de :

• Se baser uniquement sur la couleur pour différencier visuellement les liens du texte qui les entoure.
• D’appliquer un effet de soulignement à d’autres éléments que les liens.

Image ModifiedCAPTURES D'ÉCRAN

Image ModifiedRESSOURCES

Lecture pertinente 1 (en anglais)Lecture pertinente 2:

• Web Design Is Dead. No, It Isn’t (en anglais)

4.2 Intitulés

4.2.1 Utiliser un intitulé explicite

Un intitulé explicite doit être prévu pour chaque lien et chaque bouton, c’est-à-dire que la fonction du lien doit être parfaitement compréhensible à la lecture du seul intitulé, par exemple, Consulter le site.

Malgré tout, pour demeurer compréhensible, l’information précise concernant la page d’aboutissement doit se trouver dans l’attribut « title » (par exemple, Consulter le site Médium Large).

4.2.2 Identifier les liens externes

Pour chaque lien qui déclenche une sortie du site, soit par l’ouverture d’une fenêtre d’extraction ou d’un nouvel onglet, prévoir une identification claire à l’aide d’une icône afin de prévenir l’utilisateur de cette action.

Cette icône complète le lien en le suivant immédiatement.

Image ModifiedREMARQUES

On applique une règle d'exception pour les contenus provenant de sites qui appartiennent à Radio-Canada, même si l'url diffère du site de Radio-Canada.ca : ICI TOU.TV, ICI MUSIQUE, ICI EXPLORA, ICI ARTV.

Image ModifiedCAPTURES D'ÉCRAN

Le pictogramme indiquant qu’il s’agit d’un lien externe complète le lien.

4.2.3 Préciser les liens pointant sur des documents à télécharger

Chaque fois qu’un lien pointe sur un document à télécharger, les informations suivantes doivent être précisées à même l’intitulé :

• Le nom du document;
• Le type de document;
• Le poids du document;
• La langue du document (si celle-ci est différente de la langue principale de la page).

Image ModifiedCAPTURES D'ÉCRAN

L’information relative au document (type de document, poids, langue) doit être intégrée dans le lien.