2. METADONNEES

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
2 min read

Table des matières

2.1 Titre de la page

2.1.1 Fournir un titre précis sur chaque page

Sur chaque page, la balise <title>  doit être remplie avec précision. Elle doit au minimum annoncer le nom de la page courante ainsi que le nom du site.

Parfois, certaines pages sont rechargées avec un contenu modifié à la suite d’une action de l’utilisateur. C’est le cas :

  • Lors de l’utilisation de filtres, comme des nuages de mots-clés.

  • Lors d’utilisation de programmation Single Page Application (SPA) (le contenu de la page recharge, mais pas la page elle-même).

  • Lors de changement d’onglet (seulement si le contenu total de la page change).

  • Lors de l’utilisation de la pagination.

  • Lorsqu’une expression est recherchée via le formulaire de recherche.

  • Etc.

Il faut alors veiller à mettre à jour le titre de la page en conséquence, par exemple :

<title>
      Résultats de votre recherche sur "[Expression recherchée]" (page 3/7) | [Nom du site] | [Nom de la plateforme]
</title>

REMARQUES

Le nom de la page courante doit apparaître en premier dans la balise <title> . Nous optons pour :

  • Accueil de section :  <title> [Nom de la plateforme] | [mot clé] </title> Ex. ICI Radio-Canada Première | Émissions, horaire, fréquences radio

  • Second niveau :  <title> [Nom de la page courante] | [Nom de la plateforme] </title> Ex. Le vide | C'est fou... | ICI Radio-Canada Première

ASTUCES

Une bonne pratique d’accessibilité consiste à veiller à la cohérence de l’ordre des contenus de la balise <title>  sur l’ensemble des pages du site.

S’il n’y a pas le nom de la plateforme dans le titre, on le rajoute comme dernier élément.

  • ICI Radio-Canada.ca

  • ICI Musique.ca

  • ICI Tou.tv

  • Etc.

Ex. La plage à petit prix | Concours | ICI Radio-canada.ca

ASTUCES - BONIFICATION

On essaie de ne pas dépasser les 70 caractères surtout lorsque les lettres sont plus larges. Ex. W, M, etc.

2.2 Encodage

2.2.1 Veiller au bon encodage de tous les caractères

Afin de garantir la bonne restitution des contenus textuels à l’utilisateur, une déclaration de codage des caractères doit être effectuée sur chaque page, par exemple à l’aide de la balise <meta>  suivante :

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   […]
</head>

Cette balise <meta>  doit être insérée le plus haut possible dans la page HTML, avant tout contenu affiché à l’écran, et de préférence, immédiatement après l’ouverture de la balise <head> .

HTML5

HTML5 simplifie l’écriture de la balise <meta>  destinée à la déclaration de codage. Ainsi, si vous optez pour ce type de document, il suffit alors d’utiliser ,par exemple : <meta charset="UTF-8">.

ATTENTION

Penser également à vérifier le bon encodage des caractères qui ne sont pas spontanément affichés à l’écran, notamment :

  • Au contenu des attributs « title ».

  • Aux textes cachés par défaut.

  • Au contenu des attributs « alt » des images.

  • Etc.

La sauvegarde du fichier physique doit être en UTF-8.  

2.3 Renseigner sur le sens de lecture

Le sens de lecture doit être spécifié :

  • Pour la page de manière générale avec l’attribut dir=”ltr” (gauche à droite) ou dir=”rtl” (droite à gauche) sur la balise  <html>.

  • Sur une balise, avec l’attribut « dir », pour signaler les changements de sens de lecture dans le corps de la page.

Ex.  Arabe