Résoudre les problèmes de déconnexion de la mise en page CSS et de l'ordre des sources

Nous souhaitons recueillir vos commentaires sur une proposition de solution au problème des méthodes de mise en page en organisant les éléments dans un ordre dissocié de la source du document.

Rachel Andrew

Le groupe de travail CSS travaille sur une solution pour le cas où une méthode de mise en page peut organiser les éléments dans un ordre qui n'est pas lié à la source, et donc à l'ordre de lecture et de mise au point du document. Cet article explique le problème et la solution proposée. N'hésitez pas à nous faire part de vos commentaires.

Problème

L'ordre de lecture d'un document HTML suit l'ordre de la source. Cela signifie qu'un lecteur d'écran lira le document tel qu'il est mis en page dans la source, et qu'une personne qui utilise le clavier pour faire défiler le document suivra également cet ordre de source. C'est généralement logique. Un ordre source logique du document est essentiel pour les présentations de contenu en mode Lecture, les lecteurs d'écran et tout appareil avec des CSS limités. Toutefois, CSS, ainsi que Flexbox et la grille 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 modifie l'ordre de mise en page, mais pas l'ordre dans la source.

Avec la mise en page en grille, la méthode de mise en page choisie peut mélanger l'ordre des onglets, par exemple lorsque vous utilisez grid-auto-flow: dense, ce 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 l'avis des développeurs et de la communauté dédiée à l'accessibilité sur cette approche.

Suivre des mises en page aléatoires avec reading-order: auto

Dans les cas où un ordre de mise en page aléatoire est créé, par exemple lorsque vous utilisez un empilement 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 que cela se produise, les éléments Flex ou de grille doivent avoir une propriété reading-order, avec une valeur de auto.

Avec le code CSS suivant, l'ordre de lecture suivra l'emplacement des éléments qui ont été empaquetés de manière dense 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 en flex, l'ordre de mise en page est facile à comprendre. Par exemple, dans une mise en page flexible qui utilise la propriété order pour réorganiser les éléments, il existe un ordre de mise en page évident dicté par la propriété order. Dans d'autres mises en page, l'ordre idéal est moins clair, et 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 mot clé expliquant votre intention concernant l'ordre de mise en page.

L'exemple suivant montre une mise en page flex utilisant row-reverse. Les éléments flexibles comportent reading-order: auto et le conteneur flexible reading-order-items: flex flow pour indiquer que l'ordre de lecture doit également suivre la direction flex-flow, au lieu de suivre un ordre visuel (ce 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 cet exemple, une mise en page en 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 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 compte toujours. Cette fonctionnalité ne doit être utilisée que dans des situations spécifiques où l'ordre de lecture peut varier de celui de la source. Par exemple, lorsque vous utilisez des méthodes de mise en page pouvant entraîner cette déconnexion, telles que le remplissage de grille dense, ou lorsqu'un ordre de mise en page différent est pertinent à un certain point d'arrêt.

Lorsque vous utilisez ces propriétés, créez un document source en utilisant un ordre qui serait logique si la page était affichée sans CSS. N'ajoutez ces propriétés que dans les emplacements et aux points d'arrêt qui en ont besoin.

Les outils de création doivent-ils appliquer ces propriétés ?

Les outils de création qui permettent aux utilisateurs de créer une mise en page en grille en faisant glisser et déposer des éléments doivent toujours les encourager à créer un document source pertinent. Par conséquent, dans la plupart des cas, il est préférable de réorganiser la source en fonction de l'ordre de mise en page plutôt que d'utiliser ces propriétés comme un moyen paresseux de gérer la déconnexion.

Veuillez nous faire part de vos commentaires sur cette proposition

Nous sommes très heureux de recueillir vos commentaires à ce sujet. En particulier, si vous pensez que cette approche ne résoudra pas un cas d'utilisation ou si vous avez des inquiétudes concernant l'accessibilité, veuillez en informer le groupe de travail CSS.

Un fil de discussion est en cours, qui contient de nombreux cas d'utilisation et des réflexions sur cette approche. Ce fil de discussion est un excellent endroit pour ajouter des commentaires et mettre en évidence les problèmes potentiels liés à cette proposition. Notez que la proposition actuelle est très différente de celle que j'ai initialement lancée. Les personnes intéressées peuvent consulter l'ensemble des discussions qui nous ont amenés là où nous en sommes aujourd'hui, car elles constituent un bon exemple de la façon dont les propositions sont étudiées dans le groupe de travail CSS pour devenir quelque chose qui peut être implémenté dans les navigateurs.

Vignette de Patrick Tomasso. Merci à Chris Harrelson, Tab Atkins et Ian Kilpatrick pour leurs commentaires et leur examen.