Vos commentaires sont intéressés sur une proposition de solution au problème des méthodes de mise en page qui organisent les éléments dans un ordre déconnecté de la source du document.
Le groupe de travail CSS travaille sur une solution au cas où une méthode de mise en page peut organiser les éléments dans un ordre déconnecté de la source, et donc de l'ordre de lecture et de sélection du document. Cet article explique le problème et la solution proposée, et nous aimerions connaître votre avis.
Problème
L'ordre de lecture d'un document HTML suit l'ordre des sources. Cela signifie qu'un lecteur d'écran lira le document tel qu'il est présenté dans la source, et qu'une personne utilisant le clavier pour parcourir le document suivra également cet ordre de source. En général, cela est logique. Il est essentiel d'organiser les sources du document en mode Lecture pour présenter le contenu, les lecteurs d'écran et tout appareil dont le code CSS est limité. Cependant, CSS, ainsi que Flexbox et GRD en particulier, peuvent créer des mises en page dans lesquelles la mise en page définit un ordre de lecture visuel différent de la source sous-jacente.
Par exemple, l'utilisation de la propriété order sur les éléments Flex permet de modifier l'ordre de la mise en page, mais pas celui de la source.
Avec la mise en page en grille, la méthode de mise en page choisie peut mélanger l'ordre de tabulation, par exemple lorsque vous utilisez grid-auto-flow: dense, qui crée un ordre de mise en page aléatoire des éléments.
Un développeur peut également provoquer cette déconnexion en plaçant les éléments sur la grille dans un ordre différent de celui indiqué dans la source.
Solution proposée
Le groupe de travail CSS propose une solution à ce problème, et aimerait connaître les commentaires des développeurs et de la communauté sur l'accessibilité au sujet de cette approche.
Suivi des mises en page aléatoires avec reading-order: auto
Dans les cas où vous créez un ordre de mise en page aléatoire, par exemple lorsque vous utilisez un packaging dense dans une mise en page en grille, vous souhaitez probablement que le navigateur suive la mise en page plutôt que l'ordre source. Pour ce faire, les éléments Flex ou de la grille doivent avoir une propriété reading-order, avec une valeur de auto.
Avec le CSS suivant, l'ordre de lecture suit l'emplacement des éléments qui ont été regroupés en raison de grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Suivre des mises en page non aléatoires avec reading-order-items
Dans certaines mises en page en grille et les mises en page Flex, l'ordre de mise en page est simple à comprendre. Par exemple, dans une mise en page flexible qui utilise la propriété order pour réorganiser les éléments, l'ordre de mise en page est clairement défini par la propriété order. Dans d'autres mises en page, l'ordre de mise en page idéal est moins clair, car il peut y avoir plusieurs choix possibles. Par conséquent, lorsque vous suivez des mises en page non aléatoires, vous devez ajouter la propriété grid-order-items au conteneur, avec des valeurs de mots clés expliquant votre intention pour l'ordre de la mise en page.
L'exemple suivant présente une mise en page flexible utilisant row-reverse. Les éléments flexibles comportent reading-order: auto, tandis que le conteneur flexible reading-order-items: flex flow indique que l'ordre de lecture doit également suivre la direction flex-flow, au lieu de suivre un ordre visuel (que nous pourrions indiquer avec flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Dans l'exemple suivant, la mise en page sous forme de grille est créée à l'aide de grid-template-areas, et les éléments sont placés dans un ordre de mise en page différent de l'ordre de la source. La propriété reading-order-items permet d'indiquer que nous devons suivre l'ordre de mise en page, en parcourant chaque ligne avant de passer à la suivante. (grid column indique la direction opposée.)
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Cela signifie-t-il que l'ordre des sources n'a pas d'importance ?
Non, l'ordre des sources est toujours important. Cette fonctionnalité ne doit être utilisée que dans des situations spécifiques où l'ordre de lecture peut différer de la source. C'est le cas, par exemple, lorsque vous utilisez des méthodes de mise en page pouvant provoquer cette déconnexion, telles que la mise en package en grille dense, ou lorsqu'un autre ordre de mise en page est logique à un certain point d'arrêt.
Lorsque vous utilisez ces propriétés, créez un document source en respectant un ordre logique si la page est affichée sans CSS. N'ajoutez ces propriétés qu'aux emplacements et aux points d'arrêt qui les nécessitent.
Les outils de création doivent-ils appliquer ces propriétés ?
Les outils de création qui permettent aux personnes de créer une mise en page en grille en glissant-déposant des éléments doivent toujours encourager les individus à créer un document source pertinent. Par conséquent, dans la plupart des cas, il est plus approprié de réorganiser la source en fonction de l'ordre de mise en page, plutôt que d'utiliser ces propriétés pour gérer la déconnexion de façon différée.
Veuillez nous faire part de vos commentaires sur cette proposition
Nous aimerions beaucoup connaître votre avis à ce sujet. En particulier, si vous pensez que cela ne résoudra pas votre cas d'utilisation ou si vous rencontrez un problème d'accessibilité avec cette approche, veuillez en informer le groupe de travail CSS.
Un fil de discussion est en cours, qui contient de nombreux cas d'utilisation et réflexions sur l'approche. Ce fil de discussion est l'endroit idéal pour ajouter des commentaires et mettre en évidence les problèmes potentiels concernant cette proposition. Notez que la proposition actuelle est très différente de la proposition initiale qui a lancé le fil de discussion. Les personnes intéressées peuvent apprécier toutes les conversations qui nous ont mené là où nous en sommes aujourd'hui. Elle illustre parfaitement comment le groupe de travail CSS a mis en place les propositions pour qu'elles puissent être implémentées dans les navigateurs.
Vignette de Patrick Tomasso. Merci à Chris Harrelson, Tab Atkins et Ian Kilpatrick pour leurs commentaires et leur examen.