Ti chiediamo un feedback su una soluzione proposta per il problema dei metodi di layout che organizzano gli elementi in un ordine scollegato dall'origine del documento.
Il gruppo di lavoro CSS 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, di conseguenza, dall'ordine di lettura e di attivazione del documento. Questo articolo spiega il problema e la soluzione proposta e 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 è impostato nel codice sorgente e una persona che utilizza la tastiera per spostarsi nel documento seguirà lo stesso ordine del codice sorgente. 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, l'utilizzo della proprietà order negli elementi flessibili modifica l'ordine del layout, ma non l'ordine 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.
Un sviluppatore può anche causare questa disconnessione posizionando gli elementi nella 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
Nelle situazioni in cui viene creato un ordine di layout casuale, ad esempio quando si utilizza il confezionamento 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 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 del 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;
}
In questo 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 delle origini è ancora importante. Questa funzionalità deve essere utilizzata solo in situazioni specifiche in cui l'ordine di lettura potrebbe variare rispetto all'originale. Ad esempio, quando si utilizzano 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 authoring devono applicare queste proprietà?
Gli strumenti di authoring che consentono alle persone di creare un layout a griglia trascinando gli elementi dovrebbero comunque incoraggiarle 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 ritieni che questo approccio non risolva un caso d'uso o hai dubbi sull'accessibilità, comunicalo al 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 avviato il thread. Le persone interessate potrebbero apprezzare tutta la conversazione che ci ha portato a dove siamo oggi, in quanto è un buon esempio di come le proposte vengono elaborate nel 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.