Veillez à ce que le contenu puisse être lu dans un ordre logique par tous les visiteurs

Si l’ordre dans lequel le contenu d’une page apparaît affecte sa signification, assurez-vous que cet ordre est également enregistré dans le code source.

Comment vous y prendre ?

L’ordre est-il significatif ?

Déterminez d’abord si l’ordre dans lequel se présente le contenu d’une page influe ou non sur sa signification. Vous ne pouvez pas changer l’ordre d’un texte qui ne comprend que deux paragraphes par exemple. Si vous placez le deuxième paragraphe avant le premier, le texte n’a plus de sens. Dans ce cas, l’ordre a donc de l’importance.

Par contre, sur une page composée d’un menu de navigation et d’un texte, l’ordre n’est pas déterminant : les deux éléments peuvent être lus indépendamment et ne s’influencent pas l’un l’autre. Peu importe lequel arrive en premier. Dans ce cas, l’ordre n’a donc aucune importance.

Garder l’ordre dans le code source

Si l’ordre est significatif, il doit non seulement être suivi visuellement, mais il doit aussi être enregistré dans le code source. Les technologies d’assistance se basent en effet sur le code source pour l’ordre de lecture. Pour être sûr qu’elles puissent respecter le bon ordre, il est conseillé d’appliquer les règles suivantes :

• Enregistrez le texte dans le code source dans un ordre logique.
• Utilisez effectivement un tableau HTML pour les informations qui doivent figurer dans un tableau : les technologies d’assistance liront le tableau de façon logique (ligne par ligne ou colonne par colonne). N’utilisez pas les espaces pour imiter la forme d’un tableau.
• Servez-vous des fonctions de l’éditeur pour créer une liste numérotée afin que celle-ci soit indiquée correctement dans le code HTML de la page. Les technologies d’assistance sauront ainsi que l’ordre des éléments de l’énumération est important.
• Servez-vous des fonctions de l’éditeur pour créer une liste à puces. Les technologies d’assistance sauront ainsi que l’ordre des éléments de l’énumération est important.
• Ne définissez pas la mise en forme d’un texte ou d’une page avec des tableaux ou des espaces. Cela empêche les technologies d’assistance de comprendre quel est le bon ordre.

Exemples

Pas de tableaux pour la mise en forme d’une page

Si vous prenez un tableau pour organiser une page d’une certaine manière, le contenu risque de ne pas figurer dans le bon ordre dans le code source. Imaginez que vous avez un tableau avec deux colonnes et deux lignes :

• Dans la première colonne, vous placez le titre à la première ligne et le corps du texte à la deuxième ligne.
• Dans la deuxième colonne, vous placez l’en-tête ‘Nouvelles’ à la première ligne et l’article correspondant à la deuxième ligne. Visuellement, vous obtenez une mise en page logique :

Titre principal	Nouvelles
Corps du texte	Article

Mais comme vous avez utilisé un tableau, l’ordre logique que l’on peut voir n’est pas enregistré dans le code source. Et les logiciels de synthèse vocale liront le texte dans l’ordre suivant :

• titre principal - titre article - corps du texte - article

Il est donc préférable de se servir de CSS plutôt que d’un tableau pour obtenir une telle mise en page, afin que le contenu puisse être lu comme suit :

• titre principal - corps du texte - titre article - article

Le bon ordre : pas que dans CSS

Quand l’ordre est significatif, il doit toujours être enregistré dans le code source (HTML). Il n’est pas permis d’avoir l’ordre suivant dans le code source par exemple :

• élément 3
• élément 2
• élément 1

et de l’afficher avec CSS comme suit :

• élément 1
• élément 2
• élément 3

si seul l’ordre 1-2-3 est logique.

Tests

Il y a plusieurs plug-ins développeur web disponibles pour les navigateurs qui permettent de visualiser rapidement une page web sans mise en page (CSS). Vous pouvez ainsi voir l’ordre du contenu de cette page tel qu’il figure dans le code source. Vérifiez si cet ordre reste logique même sans le CSS.

Pour les développeurs

Le développeur est responsable du placement du contenu dans un ordre logique dans le code source. Il veille aussi à ce que le rédacteur ne puisse pas perturber l’ordre.