Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
Fiches AccessiWeb
- 1) Images
- 2) Cadres
- 3) Couleurs
- 4) Multimédia
- 5) Tableaux
- 6) Liens
- 7) Code exécutable
- 8) Eléments obligatoires
- 9) Structuration de l'information
- 10) Présentation de l'information
- 11) Formulaires
- 12) Navigation
- 13) Consultation
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

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

Critère 8.1 : Chaque page Web est-elle définie par un type de document et un jeu de caractères ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

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

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

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

Test 8.1.a [Argent] : Pour chaque page Web, le type de document (balise doctype) est-il présent ?
Test 8.1.b [Argent] : Pour chaque page Web, le type de document (balise doctype) est-il valide ?
Test 8.1.c [Argent] : Pour chaque page Web, le jeu de caractères (attribut charset dans balise meta) est-il présent ?
Test 8.1.d [Argent] : Pour chaque page Web, le jeu de caractères (attribut charset dans balise meta) est-il valide ?
Test 8.1.e [Argent] : Pour chaque page Web, les éléments dépréciés ne doivent pas être utilisés. Cette règle est-elle respectée ?

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

Fiche du critère 8.2 : Pour chaque page Web, le code source est-il valide selon le type de document spécifié ?
Fiche du 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 ?

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

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 8.1 [Bronze], 8.3 [Argent]
WCAG 1.0 (05/05/1999) : 3.2 [P2], 11.2 [P2], 13.2 [P2]
UWEM 1.0 (05/07/2006) : 3.2_HTML_01 [P2], 7.2_HTML_01 [P2], 7.3_HTML_01 [P2], 11.2_HTML_01 [P2], 11.2_HTML_02 [P2]
WCAG 2.0 (30/04/2008) : pas de correspondance.
mobileOK 1.0 (02/11/2006) : 4.20 [mobileOK Basic], 4.21 [mobileOK Basic]
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les pages Web doivent être définies par un type de document et un jeu de caractères.

Bénéfices pour les utilisateurs

Utilisateurs concernés : tous les internautes. Le respect de ce critère garantit une restitution adéquate de la page par n'importe quel navigateur.
Si le type de document (balise DOCTYPE) et le jeu de caractères ne sont pas définis (ou non valides), l'ensemble des navigateurs modernes restitueront la page Web dans un mode non standard et variant d'un client à l'autre. L'auteur des pages ne pourra donc pas garantir que son document soit interprété avec les mêmes règles (visuel, braille, vocal...), notamment vis-à-vis des éléments contenus dans la page (entités des caractères tels que les caractères accentués : é pour la lettre accentuée "é" , frames, éléments multimédias, liens et ancres...).

Valeur ajoutée pour le site

Bénéfice 1 :
La présence de l'élément DOCTYPE permet aux développeurs et webmasters de connaître le type de document dont ils ont la charge et les invite à consulter et à respecter - dans la mesure du possible - la spécification du langage utilisé.
Bénéfice 2:
Sans la présence de la balise DOCTYPE et d'un jeu de caractères dans une page html, celle-ci ne sera pas validée par le validateur du W3C.

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

Sélectionner le(s) élément(s) à tester : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">) :
- balise doctype
- balise meta avec l'attribut charset
Appliquer le(s) test(s) suivant(s) :
- Test 8.1.a [Argent] : Pour chaque page Web, le type de document (balise doctype) est-il présent ?
- Test 8.1.b [Argent] : Pour chaque page Web, le type de document (balise doctype) est-il valide ?
- Test 8.1.c [Argent] : Pour chaque page Web, le jeu de caractères (attribut charset dans balise meta) est-il présent ?
- Test 8.1.d [Argent] : Pour chaque page Web, le jeu de caractères (attribut charset dans balise meta) est-il valide ?
- Test 8.1.e [Argent] : Pour chaque page Web, les éléments dépréciés ne doivent pas être utilisés. Cette règle est-elle respectée ?
Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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.1.a [Argent] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le DOCTYPE"
3. Un fenêtre apparaît pour indiquer la valeur de la balise doctype
4. Vérifier que le type de document (balise doctype) est présent.
5. Si c'est le cas, le test est validé.
Pour le test 8.1.b [Argent] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le DOCTYPE"
3. Un fenêtre apparaît pour indiquer la valeur de la balise doctype
4. Vérifier que le type de document (balise doctype) est valide
5. Si c'est le cas, le test est validé.
Pour le test 8.1.c [Argent] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Informations sur les métadonnées [nouvelle fenêtre]"
3. Dans le tableau "Contenu des éléments meta", dans la colonne "Contenu", vérifier que le jeu de caractères (attribut charset dans balise meta) est présent
4. Si c'est le cas, le test est validé.
Pour le test 8.1.d [Argent] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Informations sur les métadonnées [nouvelle fenêtre]"
3. Dans le tableau "Contenu des éléments meta", dans la colonne "Contenu", vérifier que le jeu de caractères (attribut charset dans balise meta) est valide.
4. Si c'est le cas, le test est validé.
Pour le test 8.1.e [Argent] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant du code source" puis l'option "Code source [mise en avant des éléments et attributs dépréciés]"
3. Vérifier que les éléments dépréciés ne sont pas utilisés dans la page
4. 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.1.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 le mot doctype (ctrl + f), vérifier que le type de document (balise doctype) est présent.
5. Si c'est le cas, le test est validé.
Pour le test 8.1.b [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 le mot doctype (ctrl + f), vérifier que le type de document (balise doctype) est valide.
5. Si c'est le cas, le test est validé.
Pour le test 8.1.c [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 le mot charset (ctrl + f), vérifier que le jeu de caractères (attribut charset dans balise meta) est présent.
5. Si c'est le cas, le test est validé.
Pour le test 8.1.d [Argent] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Général".
3. Une nouvelle fenêtre apparaît et des informations s'affichent.
4. Dans la partie "Encodage", vérifier que le jeu de caractères (attribut charset dans balise meta) est valide.
5. Si c'est le cas, le test est validé.
Pour le test 8.1.e [Argent] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Entourer" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Entourer les éléments déconseillés".
3. Vérifier que les éléments dépréciés ne sont pas utilisés dans la page
4. 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 ou webmestre en charge de mettre en place les gabarits dynamiques du site ou les pages statiques doit veiller à la présence d'un élément DOCTYPE et d'un jeu de caractère.
Le choix de l'élément DOCTYPE doit être guidé par les éléments susceptibles d'être proposés dans la page et par l'environnement d'édition disponible pour la rédaction des contenus.

Implémentation

L'élément DOCTYPE est à placer au début du code juste avant l'ouverture de la balise html.

<!DOCTYPE ...>
<html>
[...]
</html>

La syntaxe exacte de cet élément est définie par chacune des recommandations relatives au type de document (HTML 3.2, HTML 4.01, XHTML 1.0, ...) et ne permet pas de variation par rapport à cette dernière.

Par exemple, le DOCTYPE d'un document HTML 4.01 doit correspondre à l'une des trois variantes proposées par cette spécification :
- "HTML 4.01 Frameset" :
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
- "HTML 4.01 Transitional" :
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
- "HTML 4.01 Strict" :
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
Le jeu de caractère (valeur charset dans la balise meta) s'implémente généralement dans la partie head du document.
<head>
<title>Consulter les fiches des Critères AccessiWeb Critère.8.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Exemple de mauvaise pratique

Les mauvaises pratiques consistent :

à omettre l'élément DOCTYPE ou à lui attribuer une valeur non valide.
à omettre la valeur charset dans la balise meta ou à lui attribuer une valeur non valide.
à utiliser des éléments dépréciés dans la page.

Exemple de bonne pratique

Sur l'exemple d’un document HTML 4.01 :

S'il implémente des jeux de cadres (frames), son DOCTYPE doit correspondre à celui de la variante "HTML 4.01 Frameset" ;
S'il ne peut s'affranchir d'utiliser des éléments de mise en forme de type table par exemple, le DOCTYPE doit correspondre à la définition d’un document "HTML 4.01 Transitional" ;
S'il est possible de déporter l'ensemble de la mise en forme dans les feuilles de style, il est envisageable de définir le document par du "HTML 4.01 Strict".

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

Vue d'une page sans doctype sous Internet Explorer

Cette copie d'écran montre les conséquences, sous Internet Explorer de l'absence de la balise DOCTYPE. Elle présente un menu dont les sous-menus sont en décalages progressifs et se superposent au texte.

vue d'une page avec doctype sous Internet Explorer

Cette copie d'écran montre les conséquences, sous Internet Explorer, lorsque la balise DOCTYPE est présente et correctement renseignée. Elle reprend l'image précédente où les sous-menus sont, cette fois, correctement alignés et ne se superposent pas au texte.

Une page dont les lettres accentuées s'affichent mal

Cette capture d'écran présente une page tirée d'un site en espagnol. La table de caractères n'ayant pas été déclarée, les caractères accentués apparaissent sous la forme de carrés et autres symbols étranges. Ceci rend le texte illisble.

Une page dont les lettres accentuées s'affichent bien

Cette capture d'écran présente une page tirée d'un site en espagnol. Cette fois, la table de caractères déclarée est la bonne et les lettres accentuées s'affichent correctement.

revenir en haut de la page

Références

html techniques for WCAG 1.0 (section 1.1.4) : The !DOCTYPE statement
W3C Quality Assurance: List of valid DTDs you can use in your document
Plongez dans l'accessibilité : Choisir un doctype
pdimension.net : N'oubliez pas d'ajouter un doctype
Le site de AlsaCreation : Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
La Grange : Les informations de version pour html 4.01
La Grange : Documents XHTML 1.0 strictement conformes

revenir au sommaire de la fiche

revenir en haut de la page