Vorremmo conoscere la soluzione proposta per il problema dei metodi di layout che organizzano gli elementi in un ordine non collegato all'origine del documento.
Il CSS Working Group sta lavorando a una soluzione alla situazione in cui un metodo di layout può organizzare gli elementi in un ordine scollegato dall'origine e, di conseguenza, dall'ordine di lettura e di 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 della sorgente. Ciò significa che uno screen reader leggerà il documento così come è disposto nel documento e una persona che utilizza la tastiera per esplorare il documento seguirà anche quell'ordine di origine. Di solito è una scelta sensata e un ordine delle origini ragionevole per il documento è fondamentale per le presentazioni dei contenuti in modalità Lettura, per gli screen reader e per qualsiasi dispositivo con CSS limitato. Tuttavia, il CSS e, in particolare, flexbox e grid, possono creare layout in cui il layout definisce un ordine di lettura visivo diverso dall'origine sottostante.
Ad esempio, se utilizzi la proprietà order sugli elementi flessibili, viene modificato l'ordine del layout, ma non quello nell'origine.
Quando utilizzi il layout a griglia, è possibile che il metodo di layout scelto rimescoli l'ordine delle schede, ad esempio quando utilizzi grid-auto-flow: dense, che crea un ordine di layout casuale degli elementi.
Uno sviluppatore può causare questa disconnessione anche posizionando gli elementi sulla griglia in un ordine diverso da quello indicato nell'origine.
Soluzione proposta
Il gruppo di lavoro CSS sta proponendo una soluzione a questo problema e vorrebbe ricevere feedback dagli sviluppatori e dalla community di accessibilità in merito a questo approccio.
Seguire layout casuali con reading-order: auto
In situazioni che creano un ordine di layout casuale, ad esempio quando utilizzi l'imballaggio compatto nel layout a griglia, probabilmente vuoi che il browser segua il layout anziché l'ordine dell'origine. Per farlo, gli elementi flex o grid devono avere una proprietà reading-order con un valore auto.
Il seguente CSS fa 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;
}
Seguire i layout non casuali con reading-order-items
In alcuni layout a griglia e flessibili, l'ordine del layout è facile da comprendere. Ad esempio, in un layout flessibile che utilizza la proprietà order per riordinare gli elementi, esiste un ovvio ordine di layout dettato dalla proprietà order. In altri layout, l'ordine ideale non è molto chiaro e potrebbe esserci più di una scelta possibile. Pertanto, quando segui layout non casuali, devi aggiungere la proprietà grid-order-items al contenitore, con valori di 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;
}
Nel prossimo esempio 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 indica 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;
}
Does this mean that source order doesn't matter?
No, l'ordine di origine è comunque importante. Questa funzionalità deve essere utilizzata solo in situazioni specifiche in cui l'ordine di lettura potrebbe variare rispetto all'originale. Ad esempio, quando utilizzi metodi di layout che possono causare questa disconnessione, come l'impacchettamento della griglia fitta, 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 fosse visualizzata senza CSS. Aggiungi queste proprietà solo nei punti e nelle interruzioni che le richiedono.
Gli strumenti di creazione devono applicare queste proprietà?
Gli strumenti di authoring che consentono di creare un layout a griglia trascinando elementi devono comunque incoraggiare gli utenti a creare un documento di origine valido. 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 ritieni che il tuo caso d'uso non sia risolto o hai problemi di accessibilità per l'approccio, informa il gruppo di lavoro CSS.
Esiste un thread in corso, che contiene molti casi d'uso e opinioni sull'approccio. Questo thread è un ottimo posto per aggiungere commenti ed evidenziare potenziali problemi con questa proposta. Tieni presente che la proposta attuale è molto diversa da quella iniziale che ha dato inizio al thread. Le persone interessate potrebbero apprezzare tutte le conversazioni che hanno portato a dove siamo oggi, poiché è un buon esempio di come vengono elaborate le proposte all'interno del gruppo di lavoro CSS 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.