Queremos conocer tu opinión sobre una solución propuesta para el problema de los métodos de diseño que organizan elementos en un orden desconectado de la fuente del documento.
El Grupo de trabajo de CSS está trabajando en una solución para la situación en la que un método de diseño puede organizar elementos en un orden que está 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 la solución propuesta, y nos encantaría recibir tus comentarios.
El problema
El orden de lectura de un documento HTML sigue el orden de la fuente. Esto significa que un lector de pantalla leerá el documento tal como está dispuesto en la fuente, y una persona que use el teclado para navegar por el documento también seguirá ese orden de la fuente. Por lo general, esto tiene sentido, y un orden de fuente sensato para el documento es fundamental para las presentaciones de contenido en el modo de lectura, los 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 define un orden de lectura visual diferente de la fuente subyacente.
Por ejemplo, usar la propiedad order en elementos flexibles cambia el orden del diseño, pero no el orden en la fuente.
Con el diseño de cuadrícula, es posible que el método de diseño elegido desordene el orden de las pestañas, 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 provocar esta desconexión colocando elementos en la cuadrícula en un orden diferente al indicado en la fuente.
Solución propuesta
El Grupo de trabajo de CSS propone una solución para este problema y le gustaría recibir comentarios de los desarrolladores y la comunidad de accesibilidad sobre este enfoque.
Seguir diseños aleatorios con reading-order: auto
En situaciones que crean un orden de diseño aleatorio, como cuando se usa el empaquetado denso en el diseño de cuadrícula, es probable que desees 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 código CSS haría que el orden de lectura siguiera la ubicació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;
}
Cómo seguir diseños no aleatorios con reading-order-items
En algunos diseños de cuadrícula y flexibles, el orden del diseño es fácil de comprender. Por ejemplo, en un diseño flexible que usa la propiedad order para reordenar elementos, hay un orden de diseño obvio dictado por la propiedad order. En otros diseños, no queda tan claro cuál es el orden ideal, y 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 para el 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 al orden de la fuente. La propiedad reading-order-items se usa para indicar que debemos seguir el orden del diseño y recorrer cada fila antes de avanzar 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;
}
¿Esto significa que el orden de las fuentes no importa?
No, el orden de la fuente sigue siendo importante. Esta funcionalidad solo se debe usar en situaciones específicas en las que el orden de lectura puede variar de la fuente. Por ejemplo, cuando se usan métodos de diseño que pueden causar esta desconexión, como el empaquetado de cuadrícula densa, o cuando un orden de diseño diferente tiene sentido en un determinado punto de interrupción.
Cuando uses estas propiedades, crea un documento fuente con un orden que tendría 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 arrastrando y soltando elementos deben seguir alentando a las personas a crear un documento fuente sensato. Por lo tanto, en la mayoría de los casos, sería más adecuado reordenar la fuente según el orden del diseño, en lugar de usar estas propiedades como una forma perezosa de abordar la desconexión.
Comparte tus comentarios sobre esta propuesta
Nos interesa mucho recopilar comentarios sobre esta función. En particular, si tienes un caso de uso que crees que no se resolverá con este enfoque o tienes una inquietud sobre la accesibilidad del enfoque, infórmale al Grupo de trabajo de CSS.
Hay un hilo en curso que contiene muchos casos de uso y opiniones sobre el enfoque. Ese hilo es un excelente lugar para agregar comentarios y destacar posibles problemas con esta propuesta. Ten en cuenta que la propuesta actual es muy diferente de la inicial con la que se inició el hilo. Es posible que a las personas interesadas les guste toda la conversación que nos llevó 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 convertirse en algo que se puede implementar en los navegadores.
Imagen en miniatura de Patrick Tomasso. Gracias a Chris Harrelson, Tab Atkins y Ian Kilpatrick por sus comentarios y revisiones.