retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Contenus accessibles > Fiche 13.8

Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

Carte d'identité

  • Critère AccessiWeb : 13.8
  • Niveau AccessiWeb : argent
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 3.7, 5.4, 11.2

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Pour chaque balise utilisée, vérifier si le sens du texte balisé correspond au sens sémantique de la balise.
    Exemple : le texte contenu entre BLOCKQUOTE et /BLOCKQUOTE doit être exclusivement une citation.
  2. Répéter le test avec la balise Q (citation), TH (en-tête de tableau uniquement) et H (titre).
  3. Vérifier la présence d'éléments dépréciés.

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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "13: Contenus accessibles" de la Barre AccessiWeb, activer le critère 13.8.
  3. Le code source de la page s’affiche dans une nouvelle fenêtre.
  4. Pour chaque balise utilisée, vérifier si le sens du texte balisé correspond au sens sémantique de la balise (Exemple : le texte contenu entre blockquote et /blockquote doit être exclusivement une citation).

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Pour chaque balise utilisée, vérifier si le sens du texte balisé correspond au sens sémantique de la balise (Exemple : le texte contenu entre BLOCKQUOTE et /BLOCKQUOTE doit être exclusivement une citation). En particulier, effectuer les 4 tests ci-après :
Vérifier que les balises BLOCKQUOTE et Q sont uniquement présentes pour introduire une citation :
  1. Cliquer sur le menu "Structure", puis sur l'option "Blockquote/ Q".
  2. Une fenêtre apparaît lorsque ces deux éléments sont absents. Ils sont pointés lorsqu'ils sont présents dans la page.
  3. Si ces éléments sont présents dans la page, vérifier qu'ils sont utilisés à bon escient.

Vérifier que les balises TH sont uniquement présentes pour définir l'en-tête d'un tableau de données :
  1. Cliquer sur le menu "Structure", puis sur l'option "Montrer les en-têtes de tableau".
  2. Une fenêtre apparaît lorsque cet élément est absent. Il est marqué par de la couleur lorsqu'il est présent dans la page.
  3. Si cet élément est présent dans la page, vérifier qu'il est utilisé à bon escient.

Vérifier que les balises H sont uniquement présentes pour définir des titres :
  1. Cliquer sur le menu "Structure", puis sur l'option "En-têtes".
  2. Une fenêtre apparaît lorsque cet élément est absent. Il est pointé lorsqu'il est présent dans la page.
  3. Si cet élément est présent dans la page, vérifier qu'il est utilisé à bon escient.

Vérifier la présence d'éléments dépréciés dans la page :
  1. Cliquer sur l'option "Eléments et attributs dépréciés [Nouvelle fenêtre]" de la rubrique "HTML déprécié" du menu "Source".
  2. Une nouvelle fenêtre apparaît et affiche le code source de la page testée ainsi que le "Nombre de balises dépréciées [Avec/sans attribut déprécié]" et le "Nombre d'attributs dépréciés supplémentaires trouvés",
  3. Vérifier que la page ne comporte pas d'éléments et attributs dépréciés.

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

Pour chaque balise utilisée, vérifier si le sens du texte balisé correspond au sens sémantique de la balise (Exemple : le texte contenu entre BLOCKQUOTE et /BLOCKQUOTE doit être exclusivement une citation). En particulier, effectuer les 4 test ci-après :

Vérifier que les balises BLOCKQUOTE et Q sont uniquement présentes pour introduire une citation :
  1. Activer l'option "Voir Source" du menu "Voir Source".
  2. Une nouvelle fenêtre apparaît et affiche le code source.
  3. Faire une recherche sur les termes BLOCKQUOTE et Q,
  4. Si ces éléments sont présents dans la page, vérifier qu'ils sont utilisés à bon escient.

Vérifier que les balises TH sont uniquement présentes pour définir l'en-tête d'un tableau de données :
  1. Activer l'option "Voir Source" du menu "Voir Source".
  2. Une nouvelle fenêtre apparaît et affiche le code source.
  3. Faire une recherche sur le terme TH,
  4. Si cet élément est présent dans la page, vérifier qu'il est utilisé à bon escient.

Vérifier que les balises H sont uniquement présentes pour définir des titres :
  1. Activer l'option "Entourer les titres (H1-H6)" du menu "Entourer.
  2. Si cet élément est présent dans la page, vérifier qu'il est utilisé à bon escient.

Vérifier la présence d'éléments dépréciés dans la page :
  1. Activer l'option "Validate HTML" du menu "Outils".
  2. Vérifier que la page ne comporte pas d'éléments et attributs dépréciés.
  3. Pour des raisons de compatibilité avec les anciennes applications, le validateur HTML du W3C ne signale pas comme fautive l'utilisation de balises dépréciées lors de l'utilisation du doctype 4.01 transitional avec la DTD "loose".
    Par contre il est possible de demander une validation (interface étendue) en utilisant la DTD "strict", les balises dépréciées étant exclues de cette dtd, elles apparaissent comme indéfinies. (exemple : element "FONT" undefined).

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

Implémentation

  1. De manière générale, ne pas utiliser les éléments et les attributs pour leur rendu graphique, mais uniquement pour le sens qu'ils apportent.
  2. Ne pas détourner les balises de présentation de leur fonction d'origine : par exemple, ne pas utiliser la balise BLOCKQUOTE pour l'indentation.
  3. Le balisage doit s'effectuer uniquement dans un soucis sémantique, la présentation étant prise en charge par la feuille de style. C'est le principe de séparation du fond de la forme.
Remarque : Les balises sémantiques existantes ne peuvent pas répondre à toutes les nécessités de balisages sémantiques. Par exemple, il n'existe pas de balises pour indiquer une cotation boursière, un total de tableau de donnée, une température. Dans ce cas, il n'est pas souhaitable de détourner la fonction d'une balise existante mais d'utiliser plutôt une syntaxe de ce type :

Le code html

<span class="cotation-boursiere">300</span>

Le code de la feuille de style correspondante

.cotation-boursiere
{color: #000000;
font-weight:900;}

La tendance de la normalisation entreprise par le W3C est de déprécier les balises servant à la mise en forme.

A ce titre, des balises comme B et I, actuellement non dépréciées, le seront certainement dans les futures normes.

Les recommandations WAI préconisent d'utiliser le HTML à bon escient, c'est-à- dire en respectant la sémantique des balises qui ne doivent pas être utilisées à des fins de rendu graphique.

Chaque balise a une fonction qui lui est propre.

La balise CODE par exemple, désigne un fragment de code informatique, la balise EM indique le caractère important d'un texte.

Exemple de mauvaise pratique

Parmis les mauvaises pratiques les plus fréquemment rencontrées citons, entre autres :

Exemple de bonne pratique

  1. Eviter les éléments dépréciés :
    Par exemple :

    <font size="5" color="#ff0000">Eléments dépréciés</font>

    Visuellement, la taille, la couleur et le contexte vont indiquer au lecteur qu'il s'agit d'un titre, mais cela n'est vrai que sur ce document précis respectant une charte graphique précise et quand il est lu sur un écran.

    Dans un autre contexte, par exemple une lecture par synthèse vocale, le titre ne sera pas reconnu en tant que tel, sa nature "titre" sera ignorée, et pour la synthèse vocale, il s'agira d'un mot comme un autre.

    Dans ce cas précis, le codage de présentation doit être remplacé par un codage sémantique, c'est-à-dire :

    <h1>Titre</h1>

    . La balise H1 étant la balise signifiant "titre de niveau 1" quel que soit le contexte de lecture (par simple lecture visuelle ou par des lecteurs d'écrans.

    La balise H1 ne donne aucune indication graphique, elle est purement sémantique, le rendu graphique des titres sera pris en charge par la feuille de style.

    Codage correct

    <h1>Titre</h1>

    Codage incorrect

    <font size="5" color="#ff0000">Titre</font>

  2. Ne pas détourner une balise de sa fonction d'origine :
    A l'inverse, il ne faut pas utiliser la balise H1 pour donner un style :

    Codage incorrect

    Exemple d'application de la balise H1 sur un <h1>groupe de mots</h1> qui n'est pas un titre de niveau 1.

    De même, la balise NOSCRIPT n'est destinée qu'à fournir une alternative aux scripts et non pour lister des mots-clés à l'attention des moteurs de recherche.

Pour connaître le statut des éléments et attributs consulter :

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 13.7 Fiche suivante : fiche 13.9

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