Structure

by admin — last modified 2008-10-09 13:40

Liste des points de contrôle

Fournir des métadonnées pour ajouter l'information sémantique. 13.2 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

Fournir des métadonnées pour ajouter l'information sémantique aux pages et aux sites.

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

2.4.2 (niveau A)
Titres des pages :
Les pages Web ont un titre qui en décrit le sujet ou le but.

Projet de standard du gouvernement du Québec

01 - 5, a : Une page Web doit avoir un titre distinctif qui reflète son contenu et qui est indiqué à l’aide de la balise <title>.
02 - 8, a : Un document téléchargeable doit avoir un titre distinctif qui reflète son contenu.
Page pivot : une page Web d’accueil de section qui présente des liens pointant vers d'autres pages Web de cette même section.
03 - 6, a : Un objet multimédia doit avoir un titre distinctif qui reflète son contenu.

RGAA

13.2 Fournir des méta-données dans les pages

Test 13.2.1 : Présence d'un titre dans les pages.
Test 13.2.2 : Titre de pages non vide.
Test 13.2.3 : Titres de pages appropriés.
Test 13.2.4 : Présence de la déclaration d'encodage dans les pages.
Test 13.2.5 : Pertinence de la déclaration d'encodage dans les pages.

AccessiWeb

Fiche 8.3 : Des éléments de description de la page sont-ils présents 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 ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

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. Ce rappel, a toutefois avantage à être placé à la fin du titre et non au début de sorte que l'utilisateur puisse se concentrer d'abord sur l'information distinctive.

Exemple :

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

Parmi les métadonnées, on trouve les éléments "description" et "keywords" 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és 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 Page Titled in WCAG 2.0.

Utiliser les en-têtes de section pour spécifier la structure du document. 3.5 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

Utiliser les en-têtes de section pour spécifier la structure du document, et les utiliser en accord avec les spécifications.

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.3.1 (niveau A)
Information et relations :
L’information, la structure et les relations véhiculées par la présentation peuvent être déterminées par programmation ou sont disponibles dans le texte.

Erreurs à éviter :

F2 : Utiliser la feuille de style pour donner l’apparence d’un en-tête à un simple paragraphe ou une image de texte comme en-tête mais sans la coder en tant qu’en-tête.
F17 : Utiliser un id ou un accesskey qui n’est pas unique.
F42 : Utiliser un événement de script pour émuler un lien.
F43 : Utiliser une balise de structure pour un effet visuel (ex.: <h3> pour mettre en gras, <blockquote> pour un retrait, <fieldset> pour obtenir une bordure).
F87 : Insérer du contenu non décoratif en utilisant :before et :after ou la propriété content en CSS.

2.4.6 (niveau AA)
Titres et étiquettes :
Les titres et les étiquettes décrivent le sujet ou le but.
2.4.10 (niveau AAA)
En-têtes de section :
Des en-têtes de section sont utilisés pour organiser le contenu.

Note 1 :
En-tête est utilisé dans son sens général et comprend des titres et d’autres façon d’ajouter un titre à différents types de contenu.
Note 2 :
Ce critère de réussite traite des sections dans un écrit et non des composants d’une interface utilisateur. Les composants d’une interface utilisateur sont traités au critère 4.1.2.

Projet de standard du gouvernement du Québec

01 - 5, b et [02 - 8, b] : Une page Web [un document téléchargeable] doit avoir au moins un en-tête de section de niveau 1 qui reflète la nature de son contenu ou de sa fonction.
01 - 5, c : Un en-tête de section identifiable visuellement doit être codé avec la balise d’en-tête appropriée.
01 - 5, d : Une liste doit être indiquée à l’aide d’une des balises appropriées.
01 - 10, m : Tout cadre doit être décrit par un titre à l’aide de la balise <title> permettant d'en comprendre la fonction.
01 - 10, n : Si des cadres sont utilisés, une page Web en contient un maximum de quatre.
01 - 12, f : Une étiquette doit décrire clairement la fonction du champ auquel elle est associée.
02 - 8, c : un en-tête de section identifiable visuellement doit être identifiable mécaniquement par les technologies d’adaptation informatiques.

RGAA

3.5 Utiliser la hiérarchie de titres

Test 3.5.1 : Présence de titres de hiérarchie de premier niveau ( h1).
Test 3.5.2 : Pertinence des titres de hiérarchie.
Test 3.5.3 : Absence d'interruption dans la hiérarchie de titres.
Test 3.5.4 : Présence d'une hiérarchie de titres lorsque nécessaire.
Test 3.5.5 : Balisage correct des titres de hiérarchie.

AccessiWeb

Fiche 9.2 : La page Web est-elle structurée de manière cohérente ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité motrice.
Personnes ayant une incapacité cognitive.

Explication

Les en-têtes de section <h1> à <h6> constituent des points de repère 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 de section qui constitueront pour ainsi dire une table des matières de la page.

Ces en-têtes de section ne doivent donc jamais être utilisés pour des effets de présentation qui doivent être obtenus par le biais de la feuille de style CSS.

D'autre part, les en-têtes doivent constituer une structure logique avec au moins un <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 style CSS pour donner à ces en-têtes l'apparence souhaitée.

Notez que les niveaux d'en-tête de section 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 de section <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 selon l'Office québécois de la langue française. Toutefois, certains auteurs ouvrent cette possibilité dans la mesure où on le fait de façon systématique (cf.: Colignon, Jean-Pierre. Un point, c'est tout! : la ponctuation efficace, Montréal, Les éditions du Boréal, 1993, 119p.)

L'ajout du point final permettra donc, en lecture continue, de distinguer clairement les en-têtes de section 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 Info and Relationships in WCAG 2.0.

Marquer les listes et les citations. 3.6 (P2) et 3.7 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

3.6 : Baliser les listes et les éléments de liste 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 de travail, traduction française d'AccessibilitéWeb

1.3.1 (niveau A)
Information et relations :
L’information, la structure et les relations véhiculées par la présentation peuvent être déterminées par programmation ou sont disponibles dans le texte.

Erreurs à éviter :

F2 : Utiliser la feuille de style pour donner l’apparence d’un en-tête à un simple paragraphe ou une image de texte comme en-tête mais sans la coder en tant qu’en-tête.
F17 : Utiliser un id ou un accesskey qui n’est pas unique.
F42 : Utiliser un événement de script pour émuler un lien.
F43 : Utiliser une balise de structure pour un effet visuel (ex.: <h3> pour mettre en gras, <blockquote> pour un retrait, <fieldset> pour obtenir une bordure).
F87 : Insérer du contenu non décoratif en utilisant :before et :after ou la propriété content en CSS.

Projet de standard du gouvernement du Québec

01 - 5, b et [02 - 8, b] : Une page Web [un document téléchargeable] doit avoir au moins un en-tête de section de niveau 1 qui reflète la nature de son contenu ou de sa fonction.
01 - 5, c : Un en-tête de section identifiable visuellement doit être codé avec la balise d’en-tête appropriée.
01 - 5, d : Une liste doit être indiquée à l’aide d’une des balises appropriées.
01 - 10, m : Tout cadre doit être décrit par un titre à l’aide de la balise <title> permettant d'en comprendre la fonction.
01 - 10, n : Si des cadres sont utilisés, une page Web en contient un maximum de quatre.
02 - 8, c : un en-tête de section identifiable visuellement doit être identifiable mécaniquement par les technologies d’adaptation informatiques.

RGAA

3.6 Utiliser les éléments de liste de manière appropriée

Test 3.6.1 : Absence de simulation visuelle de liste non ordonnée.
Test 3.6.2 : Présence d'un style de secours pour les listes avec images dans les feuilles de styles.
Test 3.6.3 : Utilisation systématique de listes ordonnées pour les énumérations.
Test 3.6.4 : Représentation visuelle correcte des listes numérotées.
Test 3.6.5 : Structure des listes de définitions
Test 3.6.6 : Pertinence des listes de définitions

3.7 Baliser correctement les citations

Test 3.7.1 : Absence de citations sans balisage spécifique.
Test 3.7.2 : Balisage correct des sources des citations.
Test 3.7.3 : Utilisation de l'élément cite pour les sources de citations

AccessiWeb

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 ?
Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité motrice.
Personnes ayant une incapacité cognitive.

Explication

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 style 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 à trois niveaux seulement (deux niveaux étant encore mieux).

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.

Les citations doivent être codées comme telles avec la balise <q> pour les citations intégrées à une phrase ou à un paragraphe. Quand il s'agit de la citation d'un ou de plusieurs paragraphes, vous devez utiliser la balise <blockquote>. Qu'il s'agisse d'une citation en ligne ou d'un bloc de citation, l'élément <cite> peut être utile, mais est optionnel.

Exemple :

<p>WCAG 2.0 précise que la relation entre les élément <q lang="en">can be 
programmatically determined</q></p>
<p>De son côté, WCAG 1.0 écrivait:</p>
<blockquote lang="en"><p>Mark up quotations. Do not use quotation markup for 
formatting effects such as indentation.</p></blockquote>
<cite>WCAG 1.0, point de contrôle 3.7</cite>

La balise <blockquote> ne doit pas être utilisée pour créer un effet visuel d'indentation du contenu.

Voir aussi Info and Relationships in WCAG 2.0 et Size, Shape, Location in WCAG 2.0.

Créer un ordre logique de tabulation. 9.4 (P3*)

WCAG 1.0, traduction 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 de travail, traduction française d'AccessibilitéWeb

1.3.2 (niveau A)
Ordre séquentiel logique :
Lorsque l’ordre de présentation du contenu affecte sa signification, une séquence de lecture correcte peut être déterminée par programmation.
2.4.3 (niveau A)
Ordre de navigation (focus order) :
Si une page Web peut être parcourue de façon séquentielle et que la séquence de navigation affecte la signification ou le fonctionnement, les zones activées se succèdent dans un ordre qui préserve le sens et l'utilisabilité.

Erreurs à éviter :

F44 : Utiliser l’attribut tabindex pour créer un ordre qui ne préserve pas le sens ou l’utilisabilité.
F85 : Utiliser des dialogues ou des menus qui ne sont pas adjacents à l’élément déclencheur dans l’ordre séquentiel de navigation.

2.4.7 (niveau AA)
Visibilité de la zone active :
Toute interface utilisable au clavier comporte un mode d’utilisation où la zone active (focus) est visible.

Projet de standard du gouvernement du Québec

01 - 5, e : Une page Web doit pouvoir être parcourue au clavier en respectant l’ordre séquentiel logique du contenu.
01 - 5, f : Toute interface utilisable au clavier comporte un mode d’utilisation où la zone active est visible.
01 - 11, c : Lorsque l’ordre de présentation du contenu affecte sa signification, un ordre séquentiel logique doit pouvoir être déterminé par les outils d’adaptation informatiques.
01 - 11, j : La page d’accueil, le plan de site et les pages pivots d’un site Web doivent être accompagnés au minimum de l’élément de métadonnée description décrite selon la syntaxe de la norme ISO 15836 Information et documentation – L'ensemble des éléments de métadonnées (2003).
02 - 8, d : Un document téléchargeable doit pouvoir être parcouru au clavier en respectant l’ordre séquentiel logique du contenu.
02 - 15, f : Les champs du formulaire doivent pouvoir être parcourus au clavier en respectant l’ordre séquentiel logique du contenu.
03 - 6, b : Une animation vectorielle doit pouvoir être parcourue au clavier en respectant l’ordre séquentiel logique du contenu.

RGAA

9.4 Proposer un ordre logique de parcours au clavier

Test 9.4.1 : Navigation logique au clavier.

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 ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité motrice.

Explication

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 toutefois 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é vous-même 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 Focus Order in WCAG 2.0.

Liste des thèmes.

Revenir au début de la page.