Necesitamos tus comentarios sobre una solución propuesta para el problema de los métodos de diseño que organizan los elementos en un orden desconectado de la fuente del documento.
El grupo de trabajo de CSS está trabajando en una solución para una situación en la que un método de diseño puede organizar los elementos en un orden desconectado de la fuente y, por lo tanto, del orden de lectura y enfoque del documento. En este artículo, se explica el problema y se propone una solución. Nos encantaría recibir tus comentarios.
El problema
El orden de lectura de un documento HTML sigue el orden de origen. Esto significa que un lector de pantalla leerá el documento a medida que se muestra en la fuente, y una persona que use el teclado para usar tabulación en el documento también seguirá ese orden de origen. Por lo general, esto tiene sentido, y un orden de origen razonable para el documento es fundamental para leer presentaciones de contenido en modo de lectura, lectores de pantalla y cualquier dispositivo con CSS limitado. Sin embargo, CSS, y flexbox y la cuadrícula en particular, pueden crear diseños en los que el diseño defina un orden de lectura visual diferente a la fuente subyacente.
Por ejemplo, usar la propiedad order en elementos flexibles cambia el orden del diseño, pero no el de la fuente.
Con el diseño de cuadrícula, el método de diseño elegido puede mezclar el orden de tabulación, por ejemplo, cuando se usa grid-auto-flow: dense, que crea un orden de diseño aleatorio de los elementos.
Un desarrollador también puede causar esta desconexión si coloca los elementos en la cuadrícula en un orden diferente del dictado en la fuente.
Solución propuesta
El Grupo de trabajo de CSS propone una solución para este problema, y nos encantaría recibir los comentarios de los desarrolladores y la comunidad de accesibilidad sobre este enfoque.
Seguir diseños aleatorios con reading-order: auto
En situaciones en las que se crea un orden de diseño aleatorio, como cuando se usa el empaquetado denso en un diseño de cuadrícula, probablemente te convenga que el navegador siga el diseño, en lugar del orden de origen. Para que esto suceda, los elementos flexibles o de cuadrícula deben tener una propiedad reading-order con un valor de auto.
El siguiente CSS haría que el orden de lectura siguiera la posición de los elementos que se empaquetaron de forma densa debido a grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Seguir diseños no aleatorios con reading-order-items
En algunos diseños flexibles y de cuadrícula, el orden del diseño es fácil de entender. Por ejemplo, en un diseño flexible que usa la propiedad order para reordenar los elementos, existe un orden de diseño obvio dictado por la propiedad order. En otros diseños, no es tan claro cuál es el orden de diseño ideal, por lo que puede haber más de una opción posible. Por lo tanto, cuando sigas diseños no aleatorios, deberás agregar la propiedad grid-order-items al contenedor, con valores de palabras clave que expliquen tu intención respecto al orden del diseño.
En el siguiente ejemplo, se muestra un diseño flexible con row-reverse. Los elementos flexibles tienen reading-order: auto y el contenedor flexible reading-order-items: flex flow para indicar que también queremos que el orden de lectura siga la dirección flex-flow, en lugar de seguir un orden visual (que podríamos indicar con flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
En el siguiente ejemplo, se crea un diseño de cuadrícula con grid-template-areas y los elementos se colocan en un orden de diseño diferente del orden de origen. La propiedad reading-order-items se usa para indicar que debemos seguir el orden de diseño y recorrer cada fila antes de pasar a la siguiente. (grid column indicaría la dirección opuesta).
.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;
}
¿Significa que el orden de las fuentes no es importante?
No, el orden de origen sigue siendo importante. Esta funcionalidad solo se debe usar en situaciones específicas en las que el orden de lectura puede variar respecto de la fuente. Por ejemplo, cuando usas métodos de diseño que pueden causar esta desconexión, como el empaquetado denso de la cuadrícula, o cuando tiene sentido usar un orden de diseño diferente en un punto de interrupción determinado.
Cuando uses estas propiedades, crea un documento fuente con un orden que tenga sentido si la página se renderizara sin CSS. Agrega estas propiedades solo en los lugares y en los puntos de interrupción, que las requieran.
¿Las herramientas de creación deberían aplicar estas propiedades?
Las herramientas de creación que permiten a las personas crear un diseño de cuadrícula al arrastrar y soltar elementos deben alentar a las personas a crear un documento fuente razonable. Por lo tanto, en la mayoría de los casos, sería más apropiado reordenar la fuente según el orden de diseño, en lugar de usar estas propiedades como una forma diferida de lidiar con la desconexión.
Comparte tus comentarios sobre esta propuesta
Nos entusiasma mucho recibir comentarios sobre esto. Específicamente, si tienes un caso de uso que crees que no resolverá o te preocupa la accesibilidad del enfoque, comunícate con el grupo de trabajo de CSS.
Hay un subproceso en curso, que contiene muchos casos de uso e ideas sobre el enfoque. Esa conversación es un excelente lugar para agregar comentarios y destacar posibles problemas con la propuesta. Ten en cuenta que la propuesta actual es muy diferente de la propuesta inicial que comencé en la conversación. Es posible que las personas interesadas disfruten de todas las conversaciones que nos llevaron a donde estamos hoy, ya que es un buen ejemplo de cómo se trabajan las propuestas en el grupo de trabajo de CSS para que se puedan implementar en los navegadores.
Imagen en miniatura de Patrick Tomasso. Gracias a Chris Harrelson, Ian Kilpatrick y Tab Atkins por sus comentarios y opiniones.