waarom springt de cursor of focus rondom op mijn website

Rondspringende focus komt door de broncode-volgorde

Een focus die alle kanten op springt, ontstaat meestal omdat de volgorde waarin elementen in de broncode staan niet overeenkomt met de volgorde waarin ze op het scherm te zien zijn. Wie met de Tab-toets door een pagina gaat, verwacht dat de focus netjes van boven naar onder en van links naar rechts loopt — logisch volgens de leesrichting. Als een menu, een pop-up of een zijbalk via CSS ergens anders op het scherm is gepositioneerd dan waar het element in de code staat, springt de focus zichtbaar heen en weer: eerst naar beneden, dan weer helemaal naar boven, dan naar een knop die visueel al gepasseerd was.

Een veelvoorkomende oorzaak is een `tabindex`-waarde die handmatig is ingesteld op een getal hoger dan nul, waardoor elementen buiten de natuurlijke volgorde worden getrokken. Ook cookiebanners, filters die dynamisch worden ingeladen, en modale vensters die niet goed de focus vasthouden zorgen voor dit effect — de focus verdwijnt dan soms zelfs helemaal uit beeld, achter de banner of onder een overlay die nog open staat. Wie dit wil narekenen, doet dat het beste door zelf met alleen het toetsenbord door de bestelling te lopen; hoe je testet of een webshop met het toetsenbord te bedienen is beschrijft hoe die test in de praktijk werkt. Vaak blijkt de focusvolgorde samen te hangen met dezelfde elementen die ook problemen geven bij cookiebanners en pop-ups, omdat die als eerste over de pagina heen worden gelegd.

Waar dit in WCAG 2.1 staat: criterium 2.4.3

Deze eis staat in WCAG 2.1 onder succescriterium 2.4.3, "Focus Order", dat vraagt dat de volgorde waarin elementen focus krijgen de betekenis en bedienbaarheid van de pagina behoudt. Dit is een niveau A-criterium, en daarmee ook onderdeel van niveau AA, waar EN 301 549 in de praktijk op neerkomt. Het onderzoek van de ACM naar de toegankelijkheid van webshops laat zien dat dit soort navigatieproblemen in de praktijk regelmatig voorkomt en door gebruikers als hinderlijk wordt ervaren. Een automatische scan kan wel signaleren of een `tabindex` met een positieve waarde aanwezig is, maar of de focusvolgorde ook echt logisch aanvoelt voor iemand die de pagina niet ziet, is iets wat een automatische toegankelijkheidstest niet volledig kan vaststellen — dat blijft afhankelijk van handmatig doorlopen.