Het oplossen van de CSS-lay-out en de bronvolgorde

Uw feedback is gewenst over een voorgestelde oplossing voor het probleem van lay-outmethoden waarbij items worden gerangschikt in een volgorde die losstaat van de bron van het document.

Rachel Andrew

De CSS Working Group 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 worden het probleem en de voorgestelde oplossing uitgelegd, en we zijn benieuwd naar uw feedback.

Het probleem

De leesvolgorde van een HTML-document volgt de bronvolgorde. Dit betekent dat een schermlezer het document leest zoals het in de broncode is opgemaakt, en dat iemand die het toetsenbord gebruikt om door het document te bladeren, ook die bronvolgorde zal volgen. Meestal is dit logisch, en een verstandige bronvolgorde voor het document is van vitaal belang voor leesmoduspresentaties van inhoud, schermlezers en elk apparaat met beperkte CSS. CSS, en met name flexbox en grid, kunnen echter lay-outs creëren waarbij de lay-out een visuele leesvolgorde definieert die afwijkt van de onderliggende bron.

Als u bijvoorbeeld de eigenschap order op flexitems gebruikt, wordt de lay-outvolgorde gewijzigd, maar niet de volgorde in de bron.

Met behulp van de rasterindeling is het mogelijk dat de gekozen indelingsmethode de tabvolgorde door elkaar gooit, bijvoorbeeld bij gebruik van grid-auto-flow: dense , waardoor een willekeurige indelingsvolgorde van items wordt gecreëerd.

Een ontwikkelaar kan deze ontkoppeling ook veroorzaken door items in een andere volgorde op het raster te plaatsen dan aangegeven in de broncode.

Voorgestelde oplossing

De CSS-werkgroep stelt een oplossing voor dit probleem voor en zou graag feedback willen van ontwikkelaars en de toegankelijkheidsgemeenschap over deze aanpak.

Volgende gerandomiseerde lay-outs met reading-order: auto

In situaties waarin een willekeurige lay-outvolgorde ontstaat, zoals bij het gebruik van dichte pakking in een rasterlay-out, wilt u waarschijnlijk dat de browser de lay-out volgt in plaats van de bronvolgorde. Om dit te bewerkstelligen moeten de flex- of grid-items een reading-order eigenschap hebben, met de waarde auto .

De volgende CSS zorgt ervoor dat de leesvolgorde de plaatsing volgt van items die dicht opeengepakt zijn vanwege grid-auto-flow: dense .

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

Niet-gerandomiseerde lay-outs volgen met reading-order-items

In sommige raster- en flex-indelingen is de indelingsvolgorde eenvoudig te begrijpen. In een flexibele lay-out die de order gebruikt om items opnieuw te ordenen, is er bijvoorbeeld een duidelijke lay-outvolgorde die wordt bepaald door de order . Bij andere lay-outs is het minder duidelijk wat de ideale lay-outvolgorde is; er kan meer dan één keuze zijn. Daarom moet u bij het volgen van niet-willekeurige lay-outs de eigenschap grid-order-items aan de container toevoegen, met trefwoordwaarden die uw bedoeling met de lay-outvolgorde uitleggen.

Het volgende voorbeeld toont een flexibele lay-out met behulp van row-reverse . De flex-items hebben reading-order: auto , en de flexcontainer reading-order-items: flex flow om aan te geven dat we ook willen dat de leesvolgorde ook de flex-flow -richting volgt, in plaats van een visuele volgorde te volgen (wat we zouden kunnen doen 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 behulp van grid-template-areas en worden de items in een andere indelingsvolgorde geplaatst dan de bronvolgorde. De eigenschap reading-order-items wordt gebruikt om aan te geven dat we de lay-outvolgorde moeten volgen, waarbij we elke rij moeten doorlopen voordat we naar de volgende gaan. ( grid column zou de tegenovergestelde richting aangeven).

.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 er niet toe doet?

Nee, de bronvolgorde is nog steeds van belang. Deze functionaliteit mag alleen worden gebruikt in specifieke situaties waarin de leesvolgorde kan afwijken van de bron. Bijvoorbeeld bij het gebruik van lay-outmethoden die deze ontkoppeling kunnen veroorzaken, zoals een dichte rasteropvulling, of wanneer een andere lay-outvolgorde zinvol is op een bepaald breekpunt.

Wanneer u deze eigenschappen gebruikt, maakt u een brondocument in een volgorde die zinvol zou zijn als de pagina zonder CSS zou worden weergegeven. Voeg deze eigenschappen alleen toe op de plaatsen en op de breekpunten waar ze nodig zijn.

Moeten auteurstools deze eigenschappen toepassen?

Auteurstools waarmee mensen een rasterlay-out kunnen maken door elementen te slepen en neer te zetten, zouden mensen nog steeds moeten aanmoedigen een verstandig brondocument te maken. Daarom zou het in de meeste gevallen passender zijn om de bron opnieuw te ordenen op basis van de lay-outvolgorde, in plaats van deze eigenschappen te gebruiken als een luie manier om met de verbroken verbinding om te gaan.

Deel alstublieft uw feedback op dit voorstel

Wij willen hier graag feedback op verzamelen. In het bijzonder, als u een gebruiksscenario heeft waarvan u denkt dat dit niet zal oplossen, of als u zich zorgen maakt over de toegankelijkheid van de aanpak, laat dit dan weten aan de CSS-werkgroep.

Er is een doorlopende draad , die veel gebruiksscenario's en gedachten over de aanpak bevat. Deze draad is een geweldige plek om eventuele opmerkingen toe te voegen en mogelijke problemen met dit voorstel onder de aandacht te brengen. Merk op dat het huidige voorstel heel anders is dan mijn oorspronkelijke voorstel waarmee de draad begon. Geïnteresseerde mensen zullen misschien genieten van alle gesprekken die hebben geleid tot waar we nu zijn, omdat het een goed voorbeeld is van hoe voorstellen in de CSS Working Group worden uitgewerkt tot iets dat in browsers kan worden geïmplementeerd.

Miniatuurafbeelding door Patrick Tomasso . Met dank aan Chris Harrelson, Tab Atkins en Ian Kilpatrick voor feedback en recensie.