Queremos seu feedback sobre uma solução proposta para o problema de métodos de layout, organizando itens em uma ordem desconectada da fonte 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 os itens em uma ordem desconectada da fonte e, portanto, da ordem de leitura e foco do documento. Este artigo explica o problema e a solução proposta. Adoraríamos receber seu feedback.
O problema
A ordem de leitura de um documento HTML segue a ordem da origem. Isso significa que um leitor de tela lerá o documento conforme ele está disposto na fonte, e uma pessoa que usa o teclado para navegar pelo documento também seguirá essa ordem da fonte. Geralmente, isso faz sentido, e uma ordem criteriosa de origem 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, CSS, o flexbox e a grade em particular, podem criar layouts em que o layout define uma 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.
Com o layout de grade, é possível que o método de layout escolhido misture a ordem da tabulação, 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 colocando itens na grade em uma ordem diferente da indicada na fonte.
Solução proposta
O grupo de trabalho do CSS está propondo uma solução para esse problema e gostaria de receber o feedback dos desenvolvedores e da comunidade de acessibilidade sobre essa abordagem.
Seguindo 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, você provavelmente quer que o navegador siga o layout, e não a ordem da fonte. Para que isso aconteça, os itens flexível ou de grade precisam ter uma propriedade reading-order com um valor auto.
O CSS a seguir faria com que a ordem de leitura acompanhasse o posicionamento dos itens que foram densamente compactados 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 flexíveis e de grade, a ordem do layout é simples de entender. Por exemplo, em um layout flexível que usa a propriedade order para reordenar itens, há uma ordem de layout óbvia determinada pela propriedade order. Em outros layouts, não está claro qual é a ordem ideal. Pode haver mais de uma escolha possível. Portanto, ao seguir layouts não aleatórios, será necessário 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 para indicar que também queremos que a ordem de leitura siga a direção flex-flow, em vez de seguir uma ordem visual (que pode ser indicada 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 precisamos seguir a ordem do layout, passando por 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 origens é importante. Essa funcionalidade só deve ser usada em situações específicas em que a ordem de leitura pode variar em relação à fonte. Por exemplo, ao usar métodos de layout que podem causar essa desconexão, como o empacotamento de grade denso, ou quando uma ordem diferente de layout 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 locais e nos pontos de interrupção que precisam delas.
As ferramentas de criação devem aplicar essas propriedades?
Ferramentas de criação que permitem criar um layout de grade arrastando e soltando elementos, ainda devem incentivar as pessoas a criar um documento de origem coerente. 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 lenta de lidar com a desconexão.
Compartilhe seu feedback sobre esta proposta
Queremos muito receber feedback sobre isso. Especificamente, se você tiver um caso de uso que não vai resolver 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 esta proposta. A proposta atual é muito diferente da proposta inicial que iniciou a conversa. As pessoas interessadas podem aproveitar todas as conversas que levaram até onde estamos hoje, porque é um bom exemplo de como as propostas são trabalhadas no grupo de trabalho do CSS para se tornar algo que pode ser implementado em navegadores.
Imagem em miniatura por Patrick Tomasso. Agradecemos a Chris Harrelson, Tab Atkins e Ian Kilpatrick pelo feedback e pelas avaliações.