We willen graag je feedback over een voorgestelde oplossing voor het probleem dat lay-outmethoden items rangschikken in een volgorde die losstaat van de bron van het document.
De CSS-werkgroep werkt aan een oplossing voor de situatie waarin een lay-outmethode items kan rangschikken in een volgorde die losstaat van de bron en dus van de lees- en focusvolgorde van het document. In dit artikel leggen we het probleem en de voorgestelde oplossing uit. We zijn benieuwd naar je feedback.
Het probleem
De leesrichting van een HTML-document volgt de bronvolgorde. Dit betekent dat een schermlezer het document voorleest zoals het in de bron is ingedeeld en dat iemand die met het toetsenbord door het document tabt, ook die bronvolgorde volgt. Meestal is dit logisch en is een logische bronvolgorde voor het document essentieel voor presentaties van content in de leesmodus, schermlezers en apparaten met beperkte CSS. Met CSS, en met name flexbox en grid, kun je echter lay-outs maken waarbij de lay-out een visuele leesvolgorde definieert die verschilt van de onderliggende bron.
Als je bijvoorbeeld de property order gebruikt voor flex-items, verandert de indelingsvolgorde, maar niet de volgorde in de bron.
Als je een rasterindeling gebruikt, kan de gekozen indelingsmethode de tabvolgorde door elkaar halen, bijvoorbeeld als je grid-auto-flow: dense gebruikt. Hiermee wordt een willekeurige indelingsvolgorde van items gemaakt.
Een ontwikkelaar kan deze ontkoppeling ook veroorzaken door items in een andere volgorde in het raster te plaatsen dan in de bron is aangegeven.
Voorgestelde oplossing
De CSS Working Group stelt een oplossing voor dit probleem voor en wil graag feedback van ontwikkelaars en de toegankelijkheidscommunity over deze aanpak.
Volg willekeurige indelingen met reading-order: auto
In situaties waarin een willekeurige indelingsvolgorde wordt gemaakt, zoals bij het gebruik van dichte verpakking in een rasterindeling, wil je waarschijnlijk dat de browser de indeling volgt in plaats van de bronvolgorde. Hiervoor moeten de flex- of rasteritems een reading-order-property hebben met de waarde auto.
De volgende CSS zorgt dat de leesvolgorde de plaatsing volgt van items die dicht op elkaar zijn geplaatst vanwege grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
De volgende niet-gerandomiseerde indelingen met reading-order-items
In sommige raster- en flexlay-outs is de lay-outvolgorde makkelijk te begrijpen. In een flexibele indeling die de property order gebruikt om items opnieuw te ordenen, is er bijvoorbeeld een duidelijke indelingvolgorde die wordt bepaald door de property order. In andere indelingen is het minder duidelijk wat de ideale indelingsvolgorde is. Er kunnen meerdere mogelijke keuzes zijn. Als u niet-willekeurige indelingen volgt, moet u daarom de property grid-order-items aan de container toevoegen, met zoekwoordwaarden die uw intentie voor de indelingvolgorde uitleggen.
In het volgende voorbeeld ziet u een flexibele indeling met row-reverse. De flex-items hebben reading-order: auto en de flexcontainer heeft reading-order-items: flex flow om aan te geven dat we ook willen dat de leesvolgorde de richting flex-flow volgt in plaats van een visuele volgorde (die we kunnen aangeven met flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
In dit volgende voorbeeld wordt een rasterindeling gemaakt met grid-template-areas en worden de items in een andere indeling geplaatst dan de bronvolgorde. De property reading-order-items wordt gebruikt om aan te geven dat we de indelingsvolgorde moeten volgen en elke rij moeten doorlopen voordat we naar de volgende gaan. (grid column geeft de tegenovergestelde richting aan).
.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;
}
Betekent dit dat de bronvolgorde niet uitmaakt?
Nee, de volgorde van de bronnen is nog steeds belangrijk. Gebruik deze functionaliteit alleen in specifieke situaties waarin de leesvolgorde kan afwijken van de bron. Bijvoorbeeld als u lay-outmethoden gebruikt die deze ontkoppeling kunnen veroorzaken, zoals een dicht raster, of als een andere lay-outvolgorde logisch is bij een bepaald breekpunt.
Als u deze eigenschappen gebruikt, maakt u een brondocument met een volgorde die logisch is als de pagina zonder CSS wordt weergegeven. Voeg deze eigenschappen alleen toe op de plaatsen en bij de breekpunten waar ze nodig zijn.
Moeten deze eigenschappen worden toegepast door ontwerptools?
Ontwerptools waarmee mensen een rasterindeling kunnen maken door elementen te slepen en neer te zetten, moeten mensen nog steeds aanmoedigen om een logisch brondocument te maken. Daarom is het in de meeste gevallen beter om de bron opnieuw te ordenen op basis van de indeling dan deze eigenschappen te gebruiken als een makkelijke manier om de ontkoppeling op te lossen.
Deel je feedback over dit voorstel
We zijn erg benieuwd naar je feedback hierover. Laat het de CSS-werkgroep weten als je een use case hebt die hiermee niet wordt opgelost of als je je zorgen maakt over de toegankelijkheid van deze aanpak.
Er is een doorlopende discussie met veel toepassingen en gedachten over de aanpak. In dat gesprek kun je opmerkingen toevoegen en mogelijke problemen met dit voorstel benadrukken. Het huidige voorstel is heel anders dan mijn eerste voorstel waarmee ik het gesprek begon. Geïnteresseerden kunnen de hele discussie die heeft geleid tot waar we nu zijn, interessant vinden. Het is een goed voorbeeld van hoe voorstellen worden uitgewerkt in de CSS Working Group om iets te worden dat in browsers kan worden geïmplementeerd.
Thumbnailafbeelding door Patrick Tomasso. Met dank aan Chris Harrelson, Tab Atkins en Ian Kilpatrick voor hun feedback en beoordeling.