Les points de contrôle classés par thèmes

LISTE DES THÈMES.

STRUCTURE.

13.2 (P2)
Source	Formulation
WCAG 1.0 version anglaise	Provide metadata to add semantic information to pages and sites.
WCAG 1.0 version française officielle	Prévoyez des meta-données pour ajouter des informations d'ordre sémantique aux pages et aux sites
WCAG 1.0 version française d'AccessibilitéWeb	Fournir des métadonnées pour ajouter l'information sémantique aux pages et aux sites.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	This is no longer required for conformance, but could be a technique for satisfying certain success criteria in Guidelines 2.4, 4.2, 3.1 and 1.3. This is also baseline-dependent. 2.4.3 Web units have titles. (Level 2)
AccessiWeb	Fiche 8.3 : Des éléments de description de la page sont-ils présentes en début de code source ? Fiche 8.4 : Existe-t-il une balise TITLE dans l'en-tête de la page ? Fiche 8.5 : Le contenu de la balise TITLE est-il explicite ? Fiche 8.6 : Le contenu de la balise TITLE est-il différent d'une page à l'autre ?

La première de ces métadonnées est le titre de la page qui est placé dans l'élément <title> du <head> de la page. Ce titre doit être représentatif du contenu de la page et donc différent de page en page. Il y a souvent une forte ressemblance entre le titre de la page et l'élément <h1>, ce qui est tout à fait normal. On peut aussi adjoindre à ce titre un rappel du nom du site si on le souhaite.

Exemple :

<head>
  …
  <title>Les règles à suivre - AccessibilitéWeb.</title>
  …
</head>

Parmi les métadonnées, on trouve les éléments "description" et "keyword" qui fournissent des informations importantes aux moteurs de recherche.

On peut y ajouter un certain nombre de métadonnées tirées du « Dublin Core », qui est un ensemble de métadonnées de plus en plus répandu et permettant le catalogage des pages Web. Ces métadonnées sont toujours nommées avec le préfixe "dc.". Elles sont précédées d'un lien vers le schéma de référence et contiennent une référence "dc.language".

Dans l'exemple qui suit, nous nous sommes inspiré des métadonnées utilisées sur le site de la Bibliothèque et Archives nationales du Québec.

Exemple :

<head>
  …
  <meta name="description" content="…" />
  <meta name="keywords" content="…" />
  <link href="http://purl.org/dc/elements/1.1/" rel="schema.dc" />
  <meta name="dc.title" content="…" />
  <meta name="dc.description" content="…" />
  <meta name="dc.creator" content="…" />
  <meta name="dc.publisher" content="…" />
  <meta name="dc.subject" content="…" />
  <meta name="dc.format" content="text/html" />
  <meta name="dc.date.created" content="2005-10-23" />
  <meta name="dc.date.modified" content="2006-10-23" />
  <meta name="dc.language" scheme="RFC3066" content="fr" />
</head>

Voir aussi A-Prompt : 13.2 et Technique 13.2 [anglais].

3.5 (P2)
Source	Formulation
WCAG 1.0 version anglaise	Use header elements to convey document structure and use them according to specification.
WCAG 1.0 version française officielle	Utiliser les éléments d’en-tête pour convoyer la structure du document, et les utiliser en conformité avec les spécifications.
WCAG 1.0 version française d'AccessibilitéWeb	Utiliser les éléments d'en-tête pour spécifier la structure du document, et les utiliser en accord avec les spécifications.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1)
AccessiWeb	Fiche 9.2 : La page Web est-elle structurée de manière cohérente ?

Les éléments d'en-tête <h1> à <h6> constituent des points de repères extrêmement importants pour les personnes qui ne peuvent compter sur une vision globale de la page pour se faire une idée de son organisation ou naviguer dans le contenu sans souris. Les personnes aveugles, malvoyantes ou ayant une limitation motrice importante pourront donc parcourir les en-têtes qui constitueront pour ainsi dire une table des matières de la page.

Ces éléments d'en-tête ne doivent donc jamais être utilisés pour des effets de présentation qui doivent être obtenus par le biais de la feuille de styles CSS.

D'autre part, les en-têtes doivent constituer une structure logique avec un seul <h1>, des <h2> pour marquer le début des grandes sections et des <h3> pour le début des sous-sections. N'utilisez de <h4> que si votre page est longue et complexe. Vous pouvez par ailleurs utiliser la feuille de styles CSS pour donner à ces en-têtes l'apparence souhaitée.

Notez que les niveaux d'en-têtes doivent former une progression continue. Ainsi, on peut passer de <h1> à <h2> et à <h3>, mais pas directement de <h1> à <h3>. Vous pouvez toutefois enchaîner un <h2> après un <h4>.

Tous les en-têtes mis en évidence visuellement (taille plus grande des caractères, couleur différente, utilisation du gras, etc.) devraient donc être codés comme des en-têtes <h1> à <h6>.

Pour forcer la synthèse vocale à marquer une pause après la lecture d'un titre, il est conseillé de terminer chaque en-tête par un point. Un point dans un titre n'est pas recommandé par les règles typographiques du français, mais n'est pas non plus interdit dans les pages Web. En lecture continue, les en-têtes seront alors clairement distingués du contenu qui les suit.

Exemple :

<h1>LES RÈGLES À SUIVRE.</h1>
  …
  <h2>Références.</h2>
    …
  <h2>Deux thèmes majeurs.</h2>
    …
    <h3>Assurer une transformation élégante.</h3>
      …
    <h3>Rendre le contenu compréhensible et navigable.</h3>
      …
      <h4>le système de navigation.</h4>
        …
  <h2>Les règles.</h2>
    …

Voir aussi A-Prompt : 3.5 et Technique 3.5 [anglais].

3.6 (P2) et 3.7 (P2)
Source	Formulation
WCAG 1.0 version anglaise	3.6 : Mark up lists and list items properly. 3.7 : Mark up quotations. Do not use quotation markup for formatting effects such as indentation.
WCAG 1.0 version française officielle	3.6 : Marquer les listes et les éléments de listes correctement. 3.7 : Baliser les citations. Ne pas utiliser le balisage correspondant aux citations pour obtenir des effets de présentation comme l’indentation.
WCAG 1.0 version française d'AccessibilitéWeb	3.6 : Baliser les listes et les éléments de listes correctement. 3.7 : Baliser les citations. Ne pas utiliser le balisage des citations pour des effets de mise en forme comme l'indentation.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	3.6 : 1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1) 3.7 : 1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. 1.3.4 Information that is conveyed by variations in presentation of text is also conveyed in text, or the variations in presentation of text can be programmatically determined. (level 1)
AccessiWeb	3.6 : Fiche 9.2 : La page Web est-elle structurée de manière cohérente ? Fiche 11.8 : Les informations sont-elles organisées dans un ordre logique dans les listes de choix ? Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ? 3.7 : Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

Les listes à puces, numérotées ou de définitions ainsi que les citations sont aussi des éléments de structure importants qui permettent d'organiser le contenu de la page. Elles doivent donc être utilisées à bon escient et non pour créer un effet de retrait qui peut être obtenu par le biais de la feuille de styles CSS.

Par ailleurs, n'abusez pas de listes imbriquées qui sont beaucoup plus difficiles à comprendre pour les personnes qui n'en ont pas une vision globale. Si vous devez tout de même en utiliser, choisissez une présentation de type 1.1 ou 1.1.1 selon le niveau d'imbrication, et limitez-vous autant que possible à deux niveaux seulement.

L'application de ce point de contrôle implique aussi que les contenus auxquels on donne visuellement l'apparence de listes devraient être codés comme de véritables listes. Cette façon de faire permettra à un utilisateur non-voyant de mieux comprendre la structure du document.

Voir aussi A-Prompt : 3.6 et Extrait des techniques [français] : 3.7, Technique 3.6 [anglais] et Technique 3.7 [anglais].

9.4 (P3*)
Source	Formulation
WCAG 1.0 version anglaise	Create a logical tab order through links, form controls, and objects.
WCAG 1.0 version française officielle	Développer un ordre logique de tabulation, pour les liens, éléments de formulaires et objets.
WCAG 1.0 version française d'AccessibilitéWeb	Créer un ordre logique de tabulation entre les liens, les contrôles de formulaire, et les objets.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	2.4.6 When a Web unit or authored component is navigated sequentially, components receive focus in an order that follows relationships and sequences in the content. (level 3)
AccessiWeb	Fiche 10.3 : Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?

Les personnes ayant des limitations motrices qui ne leur permettent pas d'utiliser une souris ainsi que les personnes non-voyantes naviguent sur le Web à l'aide du clavier. Vous devez donc vous assurer que l'ordre de tabulation des liens et des champs de formulaire est logique.

Au besoin, vous pouvez corriger cet ordre en utilisant l'attribut tabindex="…" avec des numéros rétablissant un ordre plus approprié. Notez que les éléments dont l'ordre ne sera pas précisé avec cet attribut seront repris dans leur ordre habituel à la suite de ceux auxquels vous aurez fixé un ordre.

Évitez si possible le recours aux tabindex en réorganisant votre contenu, mais si vous ne pouvez faire autrement, vérifiez attentivement l'ordre de tabulation sur toute la page pour déceler des problèmes éventuels.

Exemple :

<label for="pnom">Prénom</label>
<input id="pnom" name="pnom" type="text" size="15" tabindex="1" />

Voir aussi Extrait des techniques [français] : 9.4 et Technique 9.4 [anglais].

Dernière mise à jour : 2006-10-29

Revenir au début de la page.

Contactez-nous !
Plan du site
Politique d'accessibilité