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

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

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

- Bénéfice 1 :

  L'utilisation correcte des balises selon leur fonction et non selon leur aspect visuel fournit à tout utilisateur une structure claire de la page. Ce sont autant de points de repère sur lesquels les navigateurs et les aides techniques s'appuient pour proposer des fonctionnalités de navigation rapide.

  Par exemple, la séparation de la présentation et du contenu, permet à tout utilisateur malvoyant d'appliquer ses propres choix de mise en forme (inversion des couleurs, choix des tailles de polices, pour son confort de lecture.

  De même, l'utilisation appropriée des balises permet aux aides techniques d'indiquer aux utilisateurs la valeur de chaque type d'information. Ainsi, lorsqu'une balise `BLOCKQUOTE` est ouverte, l'aide technique précise qu'il s'agit d'une citation. Lorsqu'elles rencontrent un élément `H1`, certaines aides techniques émettent un signal sonore pour indiquer un titre de niveau 1. De façon générale, les utilisateurs se servant d'aides techniques peuvent acquérir des réflexes de navigation rapide en passant, par exemple de titre en titre, de liste en liste etc... C'est au sens premier "un balisage" du document.

- Bénéfice 2 :
  L'utilisation de balises non dépréciées ou obsolètes protège l'utilisateur contre une interprétation éronnée ou une non interprétation du code de la page.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Le respect des standards internationaux (html ou xhtml etc....) est la démarche fondamentale et première pour tendre vers l'accessibilité d'un site.
- Bénéfice 2 :
  L'utilisation de balises pour un usage sémantique et non pas graphique permet essentiellement d'assurer l'interopérabilité et la pérennité du document correctement balisé.
- Bénéfice 3 :
  Un document balisé de façon sémantique sera beaucoup plus facile à manipuler par de multiples périphériques présents et à venir.

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 :

- L'utilisation des balises de titrage `H1` à `H6` uniquement pour leur aspect visuel et non pour leur caractère structurant. Il en résulte souvent une mauvaise héirarchisation des titres.
- L'utilisation de la balise `TH`, dans un tableau, à la place de la balise `TD`, pour mettre un titre en valeur.
- L'utilisation de la balise `NOSCRIPT` pour y inclure des mots-clés destinés à "améliorer" le référencement.
- De façon générale, l'emploi d'éléments de bloc (`BLOQUOTE`, `UL` etc...) uniquement pour créer des décalages.

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

- Index of the HTML 4 Elements
- Index of the HTML 4 Attributes
- Element Prohibitions

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

- Fiche 2.4 : Le contenu de la balise NOFRAMES est-il pertinent ?
- Fiche 5.1 : L'attribut SUMMARY est-il présent et pertinent ?
- Fiche 5.2 : Dans un tableau de données, la balise CAPTION est-elle utilisée pour donner un titre au tableau ?
- Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ?
- Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?
- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?
- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?

#### Autres ressources

- Web Content Accessibility Curriculum (section 5.4) : do not use any structural markup for the purpose of visual formatting.
- Plongez dans l'accessibilité (jour 27) : Utilisez de vraies en-têtes
- Listes des éléments html (page en anglais) (Les éléments dépréciés sont suivis d'une astérisque).
- Listes des attributs html (page en anglais)

revenir au sommaire de la fiche

revenir en haut de la page

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