fokusmarkeringer

Fokusmarkeringar är visuella ledtrådar som visar vilket element i ett användargränssnitt som har tangentbordsfokus. De underlättar navigering för användare som använder tangentbord eller assistiv teknik genom att visa var markören är och hur man aktiverar element som länkar, knappar och formulärfält.

Vanliga former är tydliga kanter (outline), färgändringar, ljus eller skugga samt box-shadow-effekter. Det är viktigt att de fungerar i olika färgteman och höga kontrastmiljöer.

Riktlinjerna WCAG kräver synligt tangentbordsfokus (2.4.7 Focus Visible). Många implementerar även CSS-pseudo-klassen :focus-visible för att visa fokus endast när det är relevant för tangentbordsnavigation.

Vid design och implementering bör fokusmarkeringen ha tillräcklig kontrast, vara tydlig i alla interaktiva element och inte försvinna vid anpassade komponenter. Använd gärna standardmönster som outline eller box-shadow och undvik att förlora fokus när element ändrar stil eller tema.

Vanliga fallgropar inkluderar att dölja fokus för vissa element, att förlita sig på färg utan kontrast, eller att använda animerade indikatorer som kan vara störande. Testa med tangentbord och skärmläsare för att säkerställa synlighet och konsekvent tabbordning.