Queremos seu feedback sobre uma solução proposta para o problema dos 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 é apresentado na fonte, e uma pessoa que usa o teclado para navegar pelo documento também vai seguir essa ordem. Normalmente, isso faz sentido, e uma ordem de origem sensata para o 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 o flexbox e a grade em particular, podem criar layouts em que a ordem de leitura visual é diferente da fonte subjacente.
Por exemplo, usar a propriedade order em itens flexíveis muda a ordem do layout, mas não a ordem na origem.
Ao usar o layout de grade, é possível que o método escolhido embaralhe a ordem das guias, por exemplo, ao usar grid-auto-flow: dense, que cria uma ordem de layout aleatória de itens.
Um desenvolvedor também pode causar essa desconexão ao colocar itens na grade em uma ordem diferente daquela ditada na origem.
Solução proposta
O Grupo de trabalho do CSS está propondo uma solução para esse problema e gostaria de receber feedback de 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 empacotamento denso em um layout de grade, provavelmente você quer que o navegador siga o layout, e não a ordem de origem. 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 o posicionamento de itens que foram agrupados devido a grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Seguindo layouts não aleatórios com reading-order-items
Em alguns layouts de grade e flexíveis, a ordem é 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 fica tão claro qual é a ordem ideal, 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 palavras-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 para indicar que também queremos que a ordem de leitura siga a direção flex-flow, em vez de uma ordem visual (que poderíamos indicar com flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
No próximo 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 devemos seguir a ordem do layout, percorrendo cada linha antes de avançar para a próxima. grid column indicaria 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 das fontes ainda é importante. Essa funcionalidade só deve ser usada em situações específicas em que a ordem de leitura pode variar da fonte. Por exemplo, ao usar métodos de layout que podem causar essa desconexão, como o empacotamento 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 pontos de interrupção que as exigem.
As ferramentas de criação de conteúdo devem aplicar essas propriedades?
As ferramentas de criação que permitem criar um layout de grade arrastando e soltando elementos ainda precisam incentivar as pessoas a criar um documento de origem adequado. Portanto, na maioria dos casos, é mais adequado reordenar a origem com base na ordem do layout do que usar essas propriedades como uma maneira preguiçosa de lidar com a desconexão.
Envie seu feedback sobre esta proposta
Queremos muito receber feedback sobre isso. Em particular, se você tiver um caso de uso que não será resolvido ou tiver uma preocupação de acessibilidade com a abordagem, informe o Grupo de trabalho do CSS.
Há uma conversa 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 essa proposta. A proposta atual é muito diferente da minha inicial, que deu início à conversa. As pessoas interessadas podem gostar de toda a conversa que nos trouxe até aqui, já que é um bom exemplo de como as propostas são trabalhadas no Grupo de Trabalho do CSS para se tornarem algo que pode ser implementado em navegadores.
Imagem em miniatura de Patrick Tomasso. Agradecemos a Chris Harrelson, Tab Atkins e Ian Kilpatrick pelo feedback e pela revisão.