Réorganisation du contenu

Rachel Andrew

L'ordre des contenus dans votre document est important pour l'accessibilité de votre site. Un lecteur d'écran lit le contenu en fonction de l'ordre du document à l'aide des éléments HTML que vous avez sélectionnés pour lui donner du sens. Une personne naviguant sur le site à l'aide d'un clavier et non d'un écran tactile ou d'une souris, naviguera avec la touche de tabulation dans le document. Cela signifie qu'ils passent de l'élément actif à l'élément actif, en basculant entre les liens et les champs de formulaire, à nouveau dans l'ordre dans lequel ils existent dans le document.

Par conséquent, pour créer un site accessible, vous devez commencer avec un document bien structuré et utiliser tous les éléments HTML appropriés. Cependant, il est possible d'annuler une partie de ces bonnes actions lorsque vous commencez à utiliser CSS. Voyons pourquoi.

Ordre source ou ordre visuel

La navigation sur un site Web est souvent balisée sous la forme d'une liste de liens. Vous pouvez ensuite utiliser Flexbox pour les transformer en barre horizontale. Dans l'exemple de Glitch ci-dessous, j'ai créé ce modèle couramment utilisé. Cliquez sur l'exemple et utilisez la touche de tabulation entre les liens. La sélection se déplacera dans une direction logique de gauche à droite, dans l'ordre que nous lisons en anglais.

Si vous avez créé ce type de modèle et que vous êtes invité à déplacer Contactez-nous, qui est en deuxième position dans la source, à la fin. Vous pouvez utiliser la propriété order, qui fonctionne dans Flexbox. Essayez de parcourir les éléments avec la touche de tabulation dans l'exemple ci-dessous, qui utilise la propriété order pour réorganiser les éléments.

Le curseur passe au dernier élément, puis revient en arrière. En ce qui concerne l'ordre de tabulation, cet élément est le deuxième élément. Visuellement, il s'agit du dernier élément.

L'exemple ci-dessus met en évidence le problème que nous rencontrons lorsque nous réorganisons et réorganisons le contenu à l'aide de CSS. Si vous étiez confronté à ce problème, la bonne chose à faire serait de modifier l'ordre dans la source, plutôt que d'utiliser CSS.

Quelles propriétés CSS peuvent entraîner la réorganisation ?

Toute méthode de mise en page qui vous permet de déplacer des éléments peut être à l'origine de ce problème. Les propriétés CSS suivantes provoquent généralement des problèmes de réorganisation du contenu:

• Utiliser position: absolute et retirer visuellement un élément du flux
• Propriété order dans les mises en page "Flexbox" et "Grille".
• Les valeurs row-reverse et column-reverse pour flex-direction dans Flexbox
• Valeur dense pour grid-auto-flow dans la mise en page sous forme de grille.
• Tout positionnement par nom ou numéro de ligne, ou avec grid-template-areas dans la mise en page sous forme de grille.

Dans l'exemple suivant, j'ai créé une mise en page à l'aide de la grille CSS et positionné les éléments à l'aide de numéros de ligne, sans tenir compte de leur emplacement dans la source.

Parcourez cet exemple avec la touche de tabulation pour voir comment le curseur se déplace. Cela peut prêter à confusion, surtout s'il s'agit d'une longue page.

Tester le problème

Un test très simple consiste à naviguer dans la page au clavier. Peut-on aller à tout ? Y a-t-il des sauts étranges ?

Pour voir une démonstration visuelle de la réorganisation des contenus, essayez le vérificateur de tabulations dans l'extension Accessibility Insights pour Chrome. L'image ci-dessous illustre l'exemple de grille CSS dans cet outil. Comme vous pouvez le voir, le focus doit se déplacer dans la mise en page.

Réorganisation du contenu et Responsive Web Design

Si vous n'avez qu'une seule présentation de votre contenu, il n'est généralement pas difficile d'avoir votre source dans un ordre logique et de refléter cette mise en page. Cela peut devenir plus difficile si vous envisagez la mise en page à différents points d'arrêt. Il peut être judicieux de déplacer un élément vers le bas de la mise en page sur les écrans plus petits, par exemple.

Pour le moment, il n'existe pas de solution adaptée à ce problème. Dans la plupart des cas, le développement d'une application orientée mobile vous aidera à conserver votre source et votre mise en page dans l'ordre. Les choix que vous faites concernant la priorité sur mobile sont souvent pertinents pour le contenu en général. L'important est d'être conscient des possibilités de ce type de réorganisation des contenus et de vérifier que l'expérience finale n'est pas trop perturbante à chaque point d'arrêt.