Ti scriviamo per sapere cosa ne pensi di una soluzione proposta per risolvere il problema dei metodi di layout che dispongono degli elementi in un ordine che non è collegato all'origine del documento.
Il gruppo di lavoro CSS sta cercando una soluzione alla situazione in cui un metodo di layout può disporre gli elementi in un ordine disconnesso dall'origine, quindi dall'ordine di lettura e di messa a fuoco del documento. Questo articolo spiega il problema e la soluzione proposta; ci farebbe piacere ricevere il tuo feedback.
Il problema
L'ordine di lettura di un documento HTML segue l'ordine di origine. Ciò significa che uno screen reader leggerà il documento così come è disposto nell'origine e una persona che utilizza la tastiera per navigare nel documento seguirà anche l'ordine di origine. Di solito questo ha senso e un ordine ragionevole per le fonti del documento è fondamentale per le presentazioni in modalità di lettura dei contenuti, gli screen reader e 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 per gli elementi flessibili modifica l'ordine del layout, ma non quello nell'origine.
Utilizzando il layout a griglia, è possibile che il metodo di layout scelto misuri 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 CSS Working Group sta proponendo una soluzione a questo problema e vorrebbe ricevere il feedback degli sviluppatori e della community sull'accessibilità in merito a questo approccio.
Seguono layout randomizzati con reading-order: auto
Nelle situazioni in cui viene creato un ordine di layout casuale, ad esempio quando si utilizza la pacchettizzazione densa nel layout a griglia, è consigliabile che il browser segua il layout anziché l'ordine di origine. A questo scopo, gli elementi flessibili o griglia devono avere una proprietà reading-order con valore auto.
Il seguente CSS fa sì che l'ordine di lettura segua la posizione degli elementi densamente compressi a causa dell'errore 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 randomizzati con reading-order-items
In alcuni layout a griglia e flessibile, l'ordine del layout è semplice da comprendere. Ad esempio, in un layout flessibile che utilizza la proprietà order per riordinare gli elementi, c'è un chiaro ordine di layout dettato dalla proprietà order. In altri layout è meno chiaro quale sia l'ordine di layout ideale, potrebbe esserci più di una scelta possibile. Di conseguenza, quando segui i layout non casuali, dovrai aggiungere la proprietà grid-order-items al contenitore, con i valori delle parole chiave che spiegano la tua intenzione di definire 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é seguire 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, un layout a griglia viene creato utilizzando grid-template-areas e gli elementi vengono posizionati in un ordine di layout diverso da quello di origine. La proprietà reading-order-items viene utilizzata per indicare che dobbiamo seguire l'ordine di layout, attraversando ogni riga prima di passare a quella 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;
}
Questo significa che l'ordine della fonte non è importante?
No, l'ordine di origine è 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 si utilizzano metodi di layout che possono causare questa disconnessione, come un raggruppamento denso della griglia, 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 punti di interruzione 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 elementi dovrebbero comunque incoraggiare le persone a creare un documento di origine ragionevole. Pertanto, nella maggior parte dei casi sarebbe più appropriato riordinare l'origine in base all'ordine del layout piuttosto che utilizzare queste proprietà come un modo pigro per gestire la disconnessione.
Condividi il tuo feedback su questa proposta
Ci interessa molto ricevere feedback in merito. In particolare, se hai un caso d'uso che ritieni non possa risolvere o hai dubbi sull'accessibilità con l'approccio, informa il CSS Working Group.
È presente un thread continuo che contiene molti casi d'uso e riflessioni sull'approccio. Quel thread è il posto perfetto per aggiungere commenti ed evidenziare i potenziali problemi della proposta. Tieni presente che la proposta attuale è molto diversa da quella iniziale che ha dato inizio al thread. Le persone interessate potrebbero apprezzare tutta la conversazione che ha portato a dove siamo oggi, poiché è un buon esempio di come vengono elaborate le proposte 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 recensione.