Tab. Je bent in het hoofdmenu. Tab. Je bent in de sidebar. Tab. Je bent terug in het hoofdmenu. Tab. Nu ben je in de content.
Wat?
De focus springt heen en weer als een bal in een flipperkast. De visuele volgorde zegt: menu, content, sidebar. De focusvolgorde zegt: menu, sidebar, content. Want zo staat het in de HTML.
CSS heeft de sidebar visueel naar rechts geplaatst. Maar de focus volgt de HTML. Niet de CSS.
Dit speelt bij elke layout waar CSS de visuele volgorde verandert:
orderin Flexboxgrid-columnengrid-rowin CSS Gridflex-direction: row-reverseposition: absoluteoffixed
De fix: pas de HTML-volgorde aan zodat die overeenkomt met de visuele layout.
De test: tab door je pagina. Volgt de focus de visuele volgorde, van links naar rechts, van boven naar beneden? Test ook op smalle schermen: responsive layouts veranderen de visuele volgorde, maar de HTML-volgorde blijft gelijk.
Het hoeft niet pixel-perfect overeen te komen. Maar het mag niet verwarrend zijn. Als je niet kunt voorspellen waar de focus naartoe gaat, is het een probleem.
