TILLGÄNGLIGHET ≠ OVERLAY · 38
Synligt tangentbordsfokus när ett fast sidhuvud täcker nästa steg
📅 11 november 2026 · ⏱ 6 min läsning
När du trycker på Tab kan webbläsaren flytta fokus till en kontroll bakom ett fast sidhuvud. Sidan svarar fortfarande, men personen förlorar den visuella ledtråden som behövs för att fortsätta.
01. Testa ett bokningsflöde
Öppna en bokningssida och välj ett datum med tangentbordet. När du går vidare med Tab väntar du dig en länk som förklarar ändringar eller knappen för att fortsätta. Dokumentet rullar några pixlar och konturen försvinner. Fokus har nått rätt kontroll, men sidhuvudet som sitter kvar överst täcker den. Om du trycker på Enter kan du gå vidare innan du har kunnat se vilken åtgärd du aktiverar.
Situationen är lätt att missa vid en kontroll med mus. Pekaren visar den valda platsen och gör det möjligt att justera rullningen före klicket. Med tangentbord följer webbläsaren fokusordningen och avgör när vyn ska rulla. Behåll den sekvensen i testet. Manuell rullning före observationen kan dölja just felet som du försöker återskapa.
02. Skilj på fokus, indikator och ordning
Fokus anger vilket element som tar emot tangentbordsinmatning. Indikatorn är den synliga signal som visar var elementet finns. Ordningen avgör vilken kontroll som kommer därefter. Ett överlappande sidhuvud kan täcka en knapp med en tydlig fokusindikator. En knapp kan även ligga fullt synlig utan att visa en signal när den får fokus. En tydligt markerad kontroll kan dessutom få fokus vid en oväntad punkt i uppgiften.
Anteckna vilken kontroll du väntade dig och vilken som faktiskt fick fokus. Använd förberedda utvecklarverktyg eller upprepa sekvensen utan att ändra sidans fokus under observationen. Jämför kontrollens område med den överlappande ytan. En skärmbild visar symtomet. Tangentstegen och komponentens tillstånd gör det möjligt att upprepa testet under samma förhållanden.
03. Vad WCAG 2.2 kräver
Kriterium 2.4.7 på nivå AA gäller fokusindikatorns synlighet. Kriterium 2.4.11, också AA, kontrollerar att en fokuserad komponent inte täcks helt av innehåll som webbplatsen har skapat. Bedöm frågorna var för sig. En smal synlig del av knappen kan räcka för att undvika fullständig täckning och ändå göra det svårt att förstå åtgärden.
Kriterium 2.4.12 på nivå AAA tar även upp delvis täckning. Som designmål kan hela kontrollen och indikatorn hållas synliga. Kriterium 2.4.3 på nivå A gäller en ordning som bevarar mening och användbarhet när sekvensen påverkar dem. Ett fast sidhuvud kan orsaka ett fel även när övriga krav är uppfyllda. Beskriv det observerade beteendet i rapporten och hänvisa till kriteriet som motsvarar det.
04. Hitta lagret som tar plats från innehållet
Ett fast sidhuvud kan ändra höjd vid rullning, när menyn öppnas eller när fönstret blir smalare. Ett meddelande längst ned, ett åtgärdsfält eller en hjälppanel kan ta plats i samma vy. Varje komponent kan fungera på egen hand och lämna mycket lite utrymme när flera används tillsammans. Det är den faktiska höjden i feltillståndet som spelar roll.
Kontrollera vilken behållare som rullar. På en enkel sida är det ofta dokumentet. I en applikation kan det vara en inre panel med egen rullning och ett eget verktygsfält. En regel på dokumentet behöver inte påverka panelen. Stäng tillfälligt av den fasta positionen i inspektören och upprepa sekvensen. Om kontrollen blir synlig har du en konkret hypotes att pröva i mallen.
05. Reservera plats i den rullande behållaren
Ett alternativ är att ange scroll-padding-block-start på den rullande behållaren utifrån sidhuvudets höjd. För ett fast fält längst ned kan scroll-padding-block-end vara relevant. W3C:s teknik C43 visar hur rullningsmarginalen kan kombineras med verkligt utrymme i layouten så att det sista elementet kan komma fram bakom fältet. Kontrollera början och slutet av flödet, eftersom rullningen har gränser.
En höjd hämtad från en stor skärm kan bli för liten när menyn får två rader. Använd värden som motsvarar mallens tillstånd och testa storleksändringar. Om lagret upptar för mycket plats i ett lågt fönster kan det få rulla med innehållet. Granska automatisk rullning vid fokus och länkar inom sidan. Båda kan placera innehåll nära sidhuvudet.
06. Gör fokusindikatorn synlig i varje tillstånd
Behåll webbläsarens indikator eller utforma en som syns på webbplatsens faktiska bakgrunder. En ram som fungerar på ett vitt kort kan försvinna i en mörkblå meny. Testa primära knappar, textlänkar, ikoner och fält. Kontrollera vanliga och besökta tillstånd och undersök kontrasten där varje kontroll visas.
CSS-selektorn :focus-visible gör det möjligt att använda en stil när webbläsaren bedömer att en markering bör visas. Undvik att ta bort alla konturer utan ett beprövat alternativ. Granska behållare som klipper markeringen med overflow och regler som döljer den när moduler överlappar. Om kontrollen bara går att urskilja när pekaren är över den, återgå till tangentbordet och kontrollera vilket tillstånd temat formger. Låt pekaren vila någon annanstans under provet.
07. Upprepa i båda riktningarna och med förstoring
Utgå från ett reproducerbart läge och anteckna webbläsare, fönsterstorlek och zoom. Gå framåt med Tab och bakåt med Skift+Tab. Observera varje kontroll när den får fokus. Testa nära över- och underkanten och när du når den sista kontrollen i en panel. Vissa lager täcker innehåll först när du går bakåt och webbläsaren rullar i motsatt riktning.
Upprepa med utvidgat sidhuvud, stängd meny och meddelanden som visas vid första besöket. I en smal eller förstorad vy kan texten brytas och minska den tillgängliga höjden. En kort inspelning av sekvensen hjälper till att skilja en rullningsförflyttning från ett fokusbyte. Personen ska kunna identifiera den aktuella kontrollen innan beslutet att aktivera den.
Anteckna också om kontrollen täcktes helt eller delvis och vilket lager som låg framför den. Det gör nästa kontroll enklare efter att mallen har ändrats.
08. Rätta Divi-mallen och kontrollera flödet
Ta reda på om sidhuvudet i WordPress kommer från temat, en Theme Builder-mall eller en modul som hålls kvar på skärmen. Hitta inställningen för höjden och regeln för rullning. Rätta komponenten som orsakar överlappningen och granska sidorna som återanvänder den. Ta med en lång sida, ett formulär och ett flöde med länkar inom sidan.
En overlay kan erbjuda presentationsinställningar. Sidhuvudets mått, fokusordningen och utrymmet hör till sidans implementation. Automatiska kontroller kan hitta enskilda problem. Avsluta testet genom att göra om bokningen med tangentbordet, se varje steg när det får fokus och kontrollera att det går att gå framåt eller tillbaka utan att tappa orienteringen. Spara resultatet tillsammans med stegen så att provet kan upprepas efter en malländring.