Eén regel lost het meeste op: schrijf de HTML in de volgorde waarin de pagina gelezen moet worden, en gebruik CSS alleen om te bepalen wáár iets staat.
Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Het oog volgt de nieuwe plek, het toetsenbord de oude:
.blok { order: -1; }
.raster { grid-row: 1; grid-column: 2; }
.zijbalk { position: absolute; right: 0; }Wil je de tekst links en het beeld rechts, zet de tekst dan eerst in de HTML. Op een smal scherm komt alles onder elkaar in die volgorde te staan, en dan klopt het daar ook.
<div class="tweeluik">
<div class="tekst">…</div> <!-- eerst lezen, eerst in de code -->
<figure class="beeld">…</figure>
</div>
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; }Gebruik geen positieve tabindex. Een getal boven nul zet het onderdeel vooraan in de rij, vóór alles wat geen tabindex heeft. Eén zo’n onderdeel zet de hele volgorde op zijn kop. tabindex="0" en tabindex="-1" zijn wel in orde.
Let daarnaast op twee plekken waar de volgorde met script wordt bepaald. Een venster dat opengaat hoort de focus mee te nemen en bij het sluiten terug te geven aan de knop waarop is gedrukt. Een menu dat uitklapt hoort zijn onderdelen meteen na de knop te hebben staan, niet onderaan de pagina.