Queremos seu feedback sobre uma solução proposta para o problema de métodos de layout que organizam itens em uma ordem desconectada da origem do documento.
O grupo de trabalho do CSS está trabalhando em uma solução para a situação em que um método de layout pode organizar itens em uma ordem desconectada da origem e, portanto, da ordem de leitura e foco do documento. Este artigo explica o problema e a solução proposta. Queremos saber sua opinião.
O problema
A ordem de leitura de um documento HTML segue a ordem da fonte. Isso significa que um leitor de tela vai ler o documento conforme ele está disposto na fonte, e uma pessoa que usa o teclado para navegar pelo documento também vai seguir essa ordem. Geralmente, isso faz sentido, e uma ordem coerente da fonte do documento é vital para apresentações de conteúdo no modo de leitura, leitores de tela e qualquer dispositivo com CSS limitado. No entanto, o CSS, e flexbox e grade em particular, podem criar layouts em que o layout define uma ordem de leitura visual diferente da fonte.
Por exemplo, o uso da propriedade order em itens flexíveis muda a ordem do layout, mas não a ordem na origem.
Usando o layout de grade, o método de layout escolhido pode misturar a ordem das guias, por exemplo, ao usar grid-auto-flow: dense, o que cria uma ordem aleatória de itens no layout.
Um desenvolvedor também pode causar essa desconexão ao colocar itens na grade em uma ordem diferente da estabelecida na fonte.
Solução proposta
O Grupo de Trabalho do CSS está propondo uma solução para esse problema e gostaria de receber feedback dos desenvolvedores e da comunidade de acessibilidade sobre essa abordagem.
Seguir layouts aleatórios com reading-order: auto
Em situações que criam uma ordem de layout aleatória, como ao usar o empacotamento denso no layout de grade, provavelmente você vai querer que o navegador siga o layout, e não a ordem da fonte. Para que isso aconteça, os itens flex ou de grade precisam ter uma propriedade reading-order com um valor de auto.
O CSS a seguir faria com que a ordem de leitura seguisse a posição dos itens que foram compactados densamente devido a grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Seguir layouts não aleatórios com reading-order-items
Em alguns layouts de grade e flex, a ordem do layout é fácil de entender. Por exemplo, em um layout flexível que usa a propriedade order para reordenar itens, há uma ordem de layout óbvia ditada pela propriedade order. Em outros layouts, não está claro qual é a ordem ideal do layout, e pode haver mais de uma opção possível. Portanto, ao seguir layouts não aleatórios, você precisará adicionar a propriedade grid-order-items ao contêiner, com valores de palavra-chave explicando sua intenção para a ordem do layout.
O exemplo a seguir mostra um layout flexível usando row-reverse. Os itens flexíveis têm reading-order: auto, e o contêiner flexível reading-order-items: flex flow indica que também queremos que a ordem de leitura siga a direção flex-flow, em vez de seguir uma ordem visual (que podemos indicar com flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Neste exemplo, um layout de grade é criado usando grid-template-areas e os itens são colocados em uma ordem de layout diferente da ordem de origem. A propriedade reading-order-items é usada para indicar que precisamos seguir a ordem do layout, percorrendo cada linha antes de avançar para a próxima. (grid column indica a direção oposta).
.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;
}
Isso significa que a ordem da fonte não importa?
Não, a ordem da fonte ainda é importante. Essa funcionalidade só deve ser usada em situações específicas em que a ordem de leitura possa variar em relação à fonte. Por exemplo, ao usar métodos de layout que podem causar essa desconexão, como a embalagem de grade densa, ou quando uma ordem de layout diferente faz sentido em um determinado ponto de interrupção.
Ao usar essas propriedades, crie um documento de origem usando uma ordem que faria sentido se a página fosse renderizada sem CSS. Adicione essas propriedades apenas nos lugares e nos pontos de interrupção que as exigem.
As ferramentas de criação precisam aplicar essas propriedades?
As ferramentas de criação que permitem que as pessoas criem um layout de grade arrastando e soltando elementos ainda precisam incentivar as pessoas a criar um documento de origem sensato. Portanto, na maioria dos casos, seria mais apropriado reordenar a fonte com base na ordem do layout, em vez de usar essas propriedades como uma maneira preguiçosa de lidar com a desconexão.
Deixe seu feedback sobre a proposta
Queremos muito receber seu feedback sobre isso. Em particular, se você tiver um caso de uso que não será resolvido ou tiver uma preocupação com a acessibilidade da abordagem, informe o Grupo de Trabalho do CSS.
Há uma discussão em andamento, que contém muitos casos de uso e ideias sobre a abordagem. Essa conversa é um ótimo lugar para adicionar comentários e destacar possíveis problemas com a proposta. A proposta atual é muito diferente da proposta inicial que iniciou a conversa. Pessoas interessadas podem gostar de toda a conversa que nos levou a onde estamos hoje, já que esse é um bom exemplo de como as propostas são trabalhadas no grupo de trabalho de CSS para se tornarem algo que possa ser implementado em navegadores.
Imagem de miniatura de Patrick Tomasso. Agradecemos a Chris Harrelson, Tab Atkins e Ian Kilpatrick pelo feedback e revisão.