Table des matières
- Le problème
- La solution
- Les règles qui s'appliquent à la perception de la structure
- L'évaluation de conformité
- La comparaison entre les standards SGQRI et WCAG 2.0
Le problème
Un contenu web ou électronique est généralement subdivisée en sections, coiffées par un titre (ou en-tête de section), lui-même mis en évidence par différents effets de présentation (gras, gros caractères, couleur, etc.). Ces repères sont importants pour comprendre la structure du document et pour trouver plus rapidement le contenu qui intéresse le lecteur. Si ces indices visuels ne sont pas codés correctement, ils ne seront pas reconnus par les outils d'adaptation comme les lecteurs d'écran.
Lorsque les en-têtes de section sont bien codés :
- Une personne ayant des limitations visuelles pourra les utiliser pour se déplacer rapidement au contenu qui l'intéresse. Elle ne sera donc pas obligée de lire toute la page pour trouver la section recherchée.
- Une personne ayant des limitations motrices, qui l'obligent à naviguer sans l'aide de la souris, en bénéficiera également, les en-têtes devenant des "cibles" qu'un navigateur ou un module complémentaire peut utiliser pour se déplacer directement à un contenu donné.
- Une personne ayant des limitations cognitives, qui lit une page simultanément de façon visuelle et auditive (en synthèse vocale), utilisera les repères visuels qui sont également donnés de façon vocale.
Les listes et les citations sont des informations de structure importantes. Pour les personnes aveugles, ces informations sont données par un lecteur d'écran. À l'entrée dans une liste, le lecteur d'écran indique à l'utilisateur le nombre d'items inclus dans la liste, et si cette liste comprend des sous-listes imbriquées. Si une liste est simplement présentée comme une suite de lignes ou, pire, comme un tableau avec une colonne pour les puces et une autre pour les contenus, l'utilisateur aveugle perd cette information précieuse, qu'une personne sans limitations fonctionnelles peut constater d'un seul coup d'œil.
De même, il ne faut pas abuser des items de liste et des blocs de citation pour créer un effet visuel de retrait, car l'information transmise par le lecteur d'écran sera faussée et induira l'utilisateur en erreur.
Retour en haut de pageLa solution
En-têtes
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, afin de se faire une idée de son organisation ou pour naviguer dans le contenu sans souris.
Les personnes aveugles ou malvoyantes ainsi que les personnes ayant des limitations motrices ou cognitives pourront donc parcourir les en-têtes de section, qui constitueront, pour ainsi dire, une table des matières de la page
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.
Les niveaux d'en-tête de section doivent former une progression continue.
Exemple de code pour les en-têtes
<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>
Listes
Les énumérations présentées sous forme de listes doivent être codées comme des listes. De même, les balises de liste doivent être utilisées seulement dans un contexte de liste.
Les menus doivent être codés sous forme de listes, afin que l'utilisateur sache dès l'entrée s'il s'agit d'un petit menu ou d'un menu plus long. S'il y a des sous-menus, ils doivent être codés comme des listes imbriquées.
Ne pas abuser de listes imbriquées, qui sont beaucoup plus difficiles à comprendre pour les personnes qui n'en ont pas une vision globale : se limiter à un maximum de 3 niveaux, et utiliser le plus souvent possible des listes à un seul niveau, en remplaçant par exemple un niveau de liste par des en-têtes de section.
Citations
Les citations d'un ou de plusieurs paragraphes doivent être codées comme telles à l'aide de la balise <blockquote>. La balise <blockquote> ne doit pas être utilisée pour créer un effet de retrait s'il ne s'agit pas d'une citation, car cet effet visuel doit être géré par la feuille de style CSS.
Le texte mis en évidence par divers procédés (gras, italique, plus gros caractères, police particulière, etc.) doit être balisé sémantiquement pour donner la même information. Si cela n'est pas possible, l'information véhiculée par les changements dans la présentation du texte doit être redonnée en texte (visible ou non).
Le balisage doit être utilisé de façon sémantique, chaque type de balises jouant le rôle pour lequel elle a été conçue. Selon ce même principe, on ne peut inclure du contenu informatif en utilisant les pseudo-classes before et after dans la feuille de style CSS.
De même, tout balisage de présentation doit être exclu, car la présentation doit être gérée entièrement par la feuille de style CSS.
Exemple de code pour les citations
<blockquote> <p lang="en">Mark up quotations. Do not use quotation markup for formatting effects such as as indentation.</p> <p><cite>WCAG 1.0, point de contrôle 3.7 </cite></p> </blockquote>
Les règles qui s'appliquent à la perception de la structure
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 |
|---|---|---|---|
| 10. Toute page Web doit : b) comporter des balises utilisées exclusivement aux fins pour lesquelles elles ont été créées; | 14. La structure de l’animation Web doit : b) utiliser tout moyen offert par la technologie d'animation Web afin de rendre détectable, par les technologies d'adaptation informatiques, toute liste, tout en-tête de section et toute relation entre les cellules d'un tableau de données. | 1.3.1 Information et relations : l'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte. (Niveau A) | |
| 11. Toute page Web doit utiliser une feuille de style pour gérer la présentation de tout élément textuel. Toutefois, si cette feuille est désactivée, la page Web doit présenter le même contenu organisé selon un ordre séquentiel logique respectant le contraste de luminosité décrit au paragraphe e) du premier alinéa de l’article 17. |
|||
| 15. Pour les exigences particulières applicables à la navigation, tout site Web doit : f) indépendamment de l'affichage horizontal, vertical ou autre : i. baliser le menu de navigation sous la forme d’une liste; ii. indiquer la liste de menus codée conformément à l’annexe 1; iii. si un menu présente des niveaux inférieurs, offrir un maximum de deux niveaux inférieurs; iv. présenter les niveaux inférieurs d’un menu dans des listes imbriquées; v. éviter l’utilisation d’un sous-menu en cascade de second niveau pour un menu déroulant non persistant; |
13. Pour les exigences particulières applicables à la navigation, toute animation Web doit : f) indépendamment de l'affichage horizontal, vertical ou autre : i. si un menu présente des niveaux inférieurs, offrir un maximum de deux niveaux inférieurs; ii. éviter l’utilisation d’un sous-menu en cascade de second niveau pour un menu déroulant non persistant; |
||
| 16. La structure d’une page Web doit comporter : d) l’indication de tout en-tête de section, codée conformément à l’annexe 1; | 11. La structure d’un document téléchargeable doit comporter : b) l’indication de tout en-tête de section pour qu’elle soit détectable par les technologies d’adaptation informatiques. | ||
| 16. La structure d’une page Web doit comporter : e) l’indication de toute liste, codée conformément à l’annexe 1; | |||
| 16. La structure d’une page Web doit comporter : f) au moins un en-tête de section de premier niveau qui reflète la nature ou la fonction du contenu de la page. |
L'évaluation de conformité
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 Grille AccessiWeb 2.1 de Braillenet (suivre ce lien pour voir les tests rattachés à chaque critère) |
|---|---|---|---|
La page Web est-elle comporte-t-elle uniquement des balises utilisées pour les fins auxquelles elles ont été créées (SW-10b) ?
|
L'animation Web utilise-t-elle tout moyen offert par la technologie afin de rendre détectable, par les technologies d'adaptation informatiques, toute liste, tout en-tête de section et toute relation entre les cellules d'un tableau de données (M-14b) ? | Critère 8.9 [Bronze] Dans chaque page Web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ? Critère 9.5 [Bronze] Dans chaque page Web, chaque citation est-elle correctement indiquée ? |
|
La présentation visuelle du texte est-elle toujours gérée par la feuille de style (SW-11.1) ?
En désactivant le code CSS, l'ordre d'affichage du contenu demeure-t-il logique (SW-11.2 et SW 17e) ?
En désactivant le code CSS, le rapport de contraste de luminosité entre le texte et son arrière-plan est-il de 4,5 pour 1 ou de 3 pour 1 dans le cas de texte agrandi (SW-11.3 et SW 17e) ?
|
Critère 10.1 [Bronze] Dans le site Web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ? Critère 10.2 [Bronze] Dans chaque page Web, le contenu visible reste-t-il présent lorsque les feuilles de styles ou les images sont désactivées ? Critère 10.3 [Bronze] Dans chaque page Web, l'information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ? |
||
Indépendamment de son affichage, tout menu de navigation est-il balisé sous la forme d'une liste <ul> ou <ol> avec des listes imbriquées (SW-15f.1 et Annexe 1-3) ?
Tout menu de navigation comporte-t-il un maximum de trois niveaux (SW-15f.2) ? Tout menu déroulant non persistant est-il exempt de menu en cascade de second niveau (SW-15f.3) ? |
Indépendamment de son affichage, un menu de navigation comporte-t-il un maximum de 3 niveaux (M-13f.1) ? Un menu déroulant non persistant est-il exempt de menu en cascade de second niveau (M-13f.2) ? |
||
Tout en-tête de section est-il codé avec les balises <h1> à <h6> en respectant l'ordre hiérarchique (SW-16d et Annexe 1-4c) ?
|
Tout en-tête de section est-il détectable par les technologies d’adaptation informatiques (DT-11b) ? | Critère 9.1 [Bronze] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres ? | |
Toute liste autre qu'une liste de définitions est-elle codée avec l'une des balises <ul> ou <ol>, et les éléments sont-ils codés avec la balise <li> (SW-16e-a et Annexe 1-4d) ? Toute liste de définitions est-elle codée avec la balise <dl> et les éléments sont-ils codés avec les balises <dt> et <dd> (SW-16e-b et Annexe 1-4d) ?
|
Critère 9.2 [Bronze] Dans chaque page Web, chaque liste est-elle structurée avec les balises appropriées ? | ||
La page comporte-t-elle au moins un en-tête de section de premier niveau qui reflète la nature ou la fonction du contenu de la page (SW-16f) ?
|
La comparaison entre les standards SGQRI et WCAG 2.0
Le critère de succès 1.3.1 des WCAG 2.0 est un principe général qui s'applique à plusieurs situations. Dans les standards SGQRI, on a plutôt choisi une approche plus concrète qui précise la portée de ce critère de succès en s'appuyant sur les techniques proposées par le W3C. Le tableau qui précède énumère les exigences des standards SGQRI qui découlent de ce critère de succès en ce qui concerne la perception de la structure. Nous verrons plus loin d'autres exigences qui correspondent également à 1.3.1 sur les formulaires et les tableaux.
Dans ce contexte, un site Web qui applique les techniques liées à la perception de la struccture du critère de succès 1.3.1 est conforme aux standards SGQRI. Réciproquement, un site qui applique les exigences des standards SGQRI en cette matière est aussi conforme aux WCAG 2.0 pour ce critère de succès.
Voir aussi :
- Comprendre la règle 1.3 [Adaptable]
- Comprendre le critère de succès 1.3.1 [Information et relations]
Retour en haut de page