Ci piacerebbe ricevere un feedback su una soluzione proposta per il problema dei metodi di layout che dispongono gli elementi in un ordine scollegato dall'origine 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 del codice sorgente. 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 nella fonte.
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 casuale, ad esempio quando si utilizza il compattamento denso 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 compattati 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 e potrebbe esserci più di una scelta possibile. Pertanto, quando segui layout non randomizzati, 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 seguente 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 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 compattamento della griglia densa, 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 gli elementi devono comunque incoraggiare le persone a creare un documento sorgente sensato. Pertanto, nella maggior parte dei casi è più appropriato riordinare l'origine in base all'ordine del layout, anziché utilizzare queste proprietà come modo semplice 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 CSS Working Group.
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 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.