retour vers le site AccessiWeb

Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Eléments obligatoires > Critère 8.10

Critère 8.10 : Dans chaque page Web, il ne doit pas y avoir de détournement de balises. Cette règle est-elle respectée ?

revenir en haut de la page

Carte d'identité du critère 8.10 [niveau AccessiWeb : Argent]

Test(s) AccessiWeb permettant de vérifier le critère 8.10

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

  • Test 8.10.a [Argent] : Dans chaque page Web, il ne doit pas y avoir de détournement de balises. Cette règle est-elle respectée ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Il ne doit avoir aucun détournement de balises dans les pages Web.

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

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 effets de mise en forme de l'information (indentation, mise en gras...) ainsi que la présence de listes, de citations, de titres...
    • Ouvrir le code source de la page Web et identifier les balises utilisées pour l'ensemble de ces éléments d'information.


  2. Appliquer le(s) test(s) suivant(s) :
    • Test 8.10.a [Argent] : Dans chaque page Web, il ne doit pas y avoir de détournement de balises. Cette règle est-elle respectée ?

  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 8.10.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les éléments Q / Blockquote" pour vérifier que le sens du texte balisé correspond au sens sémantique des balises Q / Blockquote
  3. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les titres" pour vérifier que le sens du texte balisé correspond au sens sémantique de la balise h
  4. Dans le menu "Tableaux" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Entêtes de tableaux" pour vérifier que le sens du texte balisé correspond au sens sémantique de la balise th
  5. Vérifier que dans chaque page Web, il n'y a pas de détournement de balises
  6. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :
Pour le test 8.10.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur les mots Q et Blockquote (ctrl + f), vérifier que le sens du texte balisé correspond au sens sémantique des balises Q / Blockquote.
  5. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  6. Une nouvelle fenêtre apparaît contenant le code source de la page.
  7. En faisant une recherche sur le mot (ctrl + f), vérifier que le sens du texte balisé correspond au sens sémantique de la balise h.
  8. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  9. Une nouvelle fenêtre apparaît contenant le code source de la page.
  10. En faisant une recherche sur le mot (ctrl + f), vérifier que le sens du texte balisé correspond au sens sémantique de la balise th.
  11. Vérifier que dans chaque page Web, il n'y a pas de détournement de balises
  12. Si c'est le cas, le test est validé.

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 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

revenir en haut de la page

Fiche précédente : fiche du critère 8.9 Fiche suivante : fiche du critère 8.11

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