L’ordre de lecture

Table des matières

Le problème

L'ordre de parcours du contenu est un élément important pour faciliter la compréhension de ce contenu. En HTML ou XHTML, l'ordre de lecture correspond à l'ordre du contenu dans le code source de la page, alors qu'en format PDF, il reflète l'ordre des balises. C'est dans cet ordre que le contenu sera lu par la synthèse vocale d'une personne ayant des limitations visuelles ou cognitives.

Cet ordre sera aussi celui dans lequel le contenu pourra être parcouru au clavier, avec la touche tabulation, par une personne dont les limitations motrices ne lui permettent pas d'utiliser une souris.

Il peut y avoir plus d'un ordre logique pour un parcours visuel de la page, mais un seul ordre peut être déterminé pour l'accessibilité.

Retour en haut de page

La solution

  • Pour corriger ce type de problème, il suffit de modifier l'ordre de présentation du contenu dans le code source (ex. l'ordre des <div>).
  • Si la page n'utilise pas de tableaux de présentation, cet ordre peut être vérifié en désactivant la feuille de style.
    • Bien que les règles d'accessibilité recommandent l'utilisation des feuilles de style CSS pour contrôler la mise en page et la présentation, vous devez vous assurer que vos pages demeurent lisibles sans elles.
    • Le but recherché est la compatibilité avec les synthèses vocales et certains appareils mobiles (téléphones, assistants personnels, etc.) et la possibilité de désactiver ou de remplacer la feuille de style du concepteur par celle de l'utilisateur, pour obtenir un environnement visuel mieux adapté à certains types de limitations.
  • Si la page utilise un ou plusieurs tableaux de présentation, vous devrez les linéariser pour vérifier que l'ordre de lecture est correct. ATTENTION : il va sans dire qu'un tableau de données ne doit pas être linéarisé, et que dans une page linéarisée, il faudra donc faire abstraction du contenu du tableau de données.
  • L'espacement entre les caractères d'un mot ne doit pas être contrôlé par l'insertion d'espaces, mais par la feuille de style (letter-spacing).
  • Si des changements de direction doivent être indiqués pour un texte qui se lirait de droite à gauche, il faut le faire avec l'attribut dir.

Exemple de code fautif pour l'ordre de lecture

<table>
<caption>Liste d'universités</caption>
<tr>
<td><strong>Université Bishop's</strong></td>
<td><strong>Université Concordia</strong></td>
</tr>
<tr>
<td>Sherbrooke : (819) 822-9600</td>
<td>Montréal : (514) 848-2424</td>
</tr>
<tr>
<td><strong>Université Laval</strong></td>
<td><strong>Université McGill</strong></td>
</tr>
<tr>
<td>Québec : (418) 656-3333</td>
<td>Montréal : (514) 398-4455</td>
</tr>
<tr>
<td><strong>Université de Montréal</strong></td>
<td><strong>École des HÉC de Montréal</strong></td>
</tr>
<tr>
<td>Montréal : (514) 343-6111</td>
<td>Montréal : (514) 340-6000</td> </tr>
</table>

Illustration du résultat

Liste d'universités
Université Bishop's Université Concordia
Sherbrooke : (819) 822-9600 Montréal : (514) 848-2424
Université Laval Université McGill
Québec : (418) 656-3333 Montréal : (514) 398-4455
Université de Montréal École des HÉC de Montréal
Montréal : (514) 343-6111 Montréal : (514) 340-6000

Présentation linéarisée :

Liste des universités
Université Bishop's
Université Concordia
Sherbrooke : (819) 822-9600
Montréal : (514) 848-2424
Université Laval
Université McGill
Québec : (418) 656-3333
Montréal : (514) 398-4455
Université de Montréal
École des HÉC de Montréal
Montréal : (514) 343-6111
Montréal : (514) 340-6000
[...]

Exemple de code correct pour l'ordre de lecture

<table border="1">
<caption>Liste des universités</caption>
<tbody>
<tr>
<td>
<strong>Université Bishop's</strong><br>
Sherbrooke : (819) 822-9600
</td>
<td>
<strong>Université Concordia</strong><br>
Montréal : (514) 848-2424
</td>
</tr>
<tr>
<td>
<strong>Université Laval</strong><br>
Québec : (418) 656-3333
</td>
<td>
<strong>Université McGill</strong><br>
Montréal : (514) 398-4455
</td>
</tr>
<tr>
<td>
<strong>Université de Montréal</strong><br>
Montréal : (514) 343-6111
</td> [...]
Retour en haut de page

Les règles qui s'appliquent à l'ordre de lecture

SGQRI 008-01
(site Web)		 SGQRI 008-02
(doc. téléchargeable)		 SGQRI 008-03
(multimédia)		 WCAG 2.0

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.

     1.3.2 Ordre séquentiel logique : lorsque l'ordre de présentation du contenu affecte sa signification, un ordre de lecture correct peut être déterminé par un programme informatique. (Niveau A)
18. Pour les exigences particulières applicables à la compréhension d’un contenu dans une page Web, cette page doit : a) comporter un ordre séquentiel logique détectable par les technologies d’adaptation informatiques; 13. Pour les exigences particulières applicables à la compréhension d’un contenu dans un document téléchargeable, ce document doit : a) comporter un ordre séquentiel logique détectable par les technologies d’adaptation informatiques et qui donne accès à tout le contenu informatif; 16. Pour les exigences particulières applicables à la compréhension d’une animation Web, cette animation Web doit : a) comporter un ordre séquentiel logique détectable par les technologies d’adaptation informatiques;
22. Tout tableau dans une page Web doit : d) pour une information incluse dans un tableau de présentation, respecter un ordre séquentiel logique du contenu une fois cette information restructurée de façon linéaire; 18. Tout tableau dans un document téléchargeable doit&nbsp;: c) pour une information incluse dans un tableau de présentation, respecter un ordre séquentiel logique du contenu une fois cette information restructurée de façon linéaire.  
Retour en haut de 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 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 ?

Le contenu est-il présenté dans un ordre séquentiel logique détectable par les technologies d’adaptation informatiques (SW-18a) ?

  • Web Accessibility toolbar : CSS | Désactiver les CSS
    Tableaux  Linéariser
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Divers | linéariser la page
    CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)
 Le contenu est-il présenté dans un ordre séquentiel logique détectable par les technologies d’adaptation informatiques et a-t-on accès à tout le contenu informatif (DT-13a) ? Le contenu est-il présenté dans un ordre séquentiel logique détectable par les technologies d’adaptation informatiques (M-16a) ? Critère 8.10 [Bronze] Dans chaque page Web, les changements du sens de lecture sont-ils signalés ?

L'information incluse dans un tableau de présentation, respecte-t-elle un ordre séquentiel logique du contenu une fois cette information restructurée de façon linéaire (SW-22d) ?

  • Web Accessibility toolbar : CSS | Désactiver les CSS
    Tableaux  Linéariser
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Divers | linéariser la page
    CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)
 L'information incluse dans un tableau de présentation, respecte-t-elle un ordre séquentiel logique du contenu une fois cette information restructurée de façon linéaire (DT-18c) ?   Critère 5.3 [Bronze] Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ?
Retour en haut de page

La comparaison entre les standards SGQRI et WCAG 2.0

Les exigences des standards SGQRI précisent la portée et la façon d'appliquer le critère de succès 1.3.2. Qu'il s'agisse de la feuille de styles, d'un ordre séquentiel logique détectable pour les technologies d'adaptation ou de l'ordre des contenus dans un tableau de présentation.

Dans ce contexte, un site Web qui applique les exigences des standards SGQRI quant à l'ordre de lecture est conforme au critère de succès 1.3.2 des WCAG 2.0. Réciproquement, un site Web qui applique le critère de succès 1.3.2 des WCAG 2.0 est conforme aux standards SGQRI.

Voir aussi&nbsp;:

  1. Comprendre la règle 1.3 [Adaptable]
  2. Comprendre le critère de succès 1.3.2 [Ordre séquentiel logique]

Retour en haut de page

Répondre à cet article

Restez connecté !

Recevez des nouvelles de l’avancement du projet PCCAW dans votre boîte de courriels.


Liste de diffusion