Ci piacerebbe ricevere un feedback su una soluzione proposta per il problema dei metodi di layout che dispongono gli elementi in un ordine scollegato dalla fonte del documento.
Il CSS Working Group sta lavorando a una soluzione per la situazione in cui un metodo di layout può disporre gli elementi in un ordine scollegato dall'origine e quindi dall'ordine di lettura e messa a fuoco del documento. Questo articolo spiega il problema e la soluzione proposta. Ci piacerebbe ricevere il tuo feedback.
Il problema
L'ordine di lettura di un documento HTML segue l'ordine di origine. Ciò significa che un lettore di schermo leggerà il documento così come è disposto nell'origine e una persona che utilizza la tastiera per spostarsi nel documento seguirà anche l'ordine dell'origine. In genere, questa scelta è sensata e un ordine delle origini sensato per il documento è fondamentale per le presentazioni dei contenuti in modalità Lettura, per gli screen reader e per qualsiasi dispositivo con CSS limitati. Tuttavia, CSS, flexbox e griglia in particolare, possono creare layout in cui il layout definisce un ordine di lettura visivo diverso dall'origine sottostante.
Ad esempio, l'utilizzo della proprietà order sugli elementi flessibili modifica l'ordine del layout, ma non l'ordine nell'origine.
Utilizzando il layout a griglia, è possibile che il metodo di layout scelto mescoli l'ordine delle schede, ad esempio quando si utilizza grid-auto-flow: dense, che crea un ordine di layout casuale degli elementi.
Uno sviluppatore può anche causare questa disconnessione posizionando gli elementi nella griglia in un ordine diverso da quello indicato nell'origine.
Soluzione proposta
Il CSS Working Group sta proponendo una soluzione a questo problema e vorrebbe ricevere feedback dagli sviluppatori e dalla community per l'accessibilità su questo approccio.
Seguendo layout casuali con reading-order: auto
In situazioni che creano un ordine di layout randomizzato, ad esempio quando utilizzi la compressione densa nel layout a griglia, probabilmente vuoi che il browser segua il layout, anziché l'ordine di origine. Per fare in modo che ciò accada, gli elementi flessibili o della griglia devono avere una proprietà reading-order con un valore di auto.
Il seguente CSS farebbe sì che l'ordine di lettura segua il posizionamento degli elementi che sono stati raggruppati in modo fitto a causa di grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Seguendo layout non randomizzati con reading-order-items
In alcuni layout a griglia e flessibili, l'ordine del layout è facile da capire. Ad esempio, in un layout flessibile che utilizza la proprietà order per riordinare gli elementi, esiste un ordine di layout ovvio dettato dalla proprietà order. In altri layout non è chiaro quale sia l'ordine ideale, in quanto potrebbe esserci più di una scelta possibile. Pertanto, quando segui layout non randomizzati, devi aggiungere la proprietà grid-order-items al contenitore, con valori delle parole chiave che spiegano la tua intenzione per l'ordine del layout.
L'esempio seguente mostra un layout flessibile che utilizza row-reverse. Gli elementi flessibili hanno reading-order: auto e il contenitore flessibile reading-order-items: flex flow per indicare che vogliamo che anche l'ordine di lettura segua la direzione flex-flow, anziché un ordine visivo (che potremmo indicare con flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Nell'esempio successivo, viene creato un layout a griglia utilizzando grid-template-areas e gli elementi vengono posizionati in un ordine di layout diverso rispetto all'ordine di origine. La proprietà reading-order-items viene utilizzata per indicare che dobbiamo seguire l'ordine del layout, attraversando ogni riga prima di passare alla successiva. (grid column indicherebbe la direzione opposta).
.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 che l'ordine delle fonti non è importante?
No, l'ordine delle fonti è ancora importante. Questa funzionalità deve essere utilizzata solo in situazioni specifiche in cui l'ordine di lettura potrebbe variare rispetto alla fonte. Ad esempio, quando utilizzi metodi di layout che possono causare questa disconnessione, come il raggruppamento di griglie dense, o quando un ordine di layout diverso ha senso in un determinato punto di interruzione.
Quando utilizzi queste proprietà, crea un documento di origine utilizzando un ordine che avrebbe senso se la pagina venisse visualizzata senza CSS. Aggiungi queste proprietà solo nei luoghi e nei breakpoint che le richiedono.
Gli strumenti di creazione devono applicare queste proprietà?
Gli strumenti di creazione che consentono alle persone di creare un layout a griglia trascinando gli elementi dovrebbero comunque incoraggiare le persone a creare un documento di origine sensato. Pertanto, nella maggior parte dei casi sarebbe più appropriato riordinare l'origine in base all'ordine del layout, anziché utilizzare queste proprietà come un modo pigro per gestire la disconnessione.
Condividi il tuo feedback su questa proposta
Siamo molto interessati a raccogliere feedback in merito. In particolare, se hai un caso d'uso che ritieni non possa essere risolto o se hai un problema di accessibilità con l'approccio, comunicalo al gruppo di lavoro CSS.
Esiste un thread in corso, che contiene molti casi d'uso e riflessioni sull'approccio. Questo thread è il luogo ideale per aggiungere commenti ed evidenziare potenziali problemi relativi a questa proposta. Tieni presente che la proposta attuale è molto diversa da quella iniziale che ha dato il via alla discussione. Le persone interessate potrebbero apprezzare tutta la conversazione che ha portato alla situazione attuale, in quanto è un buon esempio di come le proposte vengono elaborate nel CSS Working Group per diventare qualcosa che può essere implementato nei browser.
Immagine in miniatura di Patrick Tomasso. Grazie a Chris Harrelson, Tab Atkins e Ian Kilpatrick per il feedback e la revisione.