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 que está 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 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. 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á diseñado en la fuente, y una persona que use el teclado para desplazar el documento también seguirá ese orden de la fuente. Por lo general, esto tiene sentido, y un orden de fuente adecuado para el documento es vital para las presentaciones de contenido en modo de lectura, los lectores de pantalla y cualquier dispositivo con CSS limitado. Sin embargo, CSS, y en particular flexbox y cuadrícula, 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 flex cambia el orden del diseño, pero no el orden en la fuente.
Cuando se usa el diseño de cuadrícula, es posible que el método de diseño elegido mezcle 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 provocar esta desconexión si coloca los elementos en la cuadrícula en un orden diferente al que se dictó en la fuente.
Solución propuesta
El grupo de trabajo de CSS propone una solución para este problema y le encantaría recibir comentarios de los desarrolladores y la comunidad de accesibilidad sobre este enfoque.
Sigue 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 de la cuadrícula o de flex deben tener una propiedad reading-order con un valor de auto.
El siguiente CSS haría que el orden de lectura siga la ubicación de los elementos que se agruparon 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;
}
Sigue diseños no aleatorios con reading-order-items
En algunos diseños de cuadrícula y flex, 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, la propiedad order determina un orden de diseño evidente. En otros diseños, no está tan claro cuál es el orden ideal, ya 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 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 de 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 origen. 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 la fuente no importa?
No, el orden de las fuentes sigue siendo importante. Esta funcionalidad solo debe usarse en situaciones específicas en las que el orden de lectura pueda 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ículas densas, o cuando tiene sentido 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 tendría sentido si la página se renderizara sin CSS. Agrega estas propiedades solo en los lugares y los puntos de interrupción que las requieran.
¿Las herramientas de creación deben aplicar estas propiedades?
Las herramientas de creación que permiten a las personas crear un diseño de cuadrícula arrastrando y soltando elementos deberían alentar a las personas a crear un documento fuente sensato. Por lo tanto, en la mayoría de los casos, sería más apropiado reordenar la fuente según el orden del 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 gustaría recibir comentarios sobre este tema. En particular, si tienes un caso de uso que crees que no se resolverá con esta solución o tienes una inquietud de accesibilidad con el enfoque, comunícaselo al grupo de trabajo del CSS.
Hay una conversación en curso, que contiene muchos casos de uso y opiniones sobre el enfoque. Esa conversación 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 que inició la conversación. Las personas interesadas podrían disfrutar de toda la conversación que condujo 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 navegadores.
Imagen en miniatura de Patrick Tomasso. Gracias a Chris Harrelson, Tab Atkins y Ian Kilpatrick por sus comentarios y revisión.