WCAG 2.4.13: Fokusutseende

Vad den här regeln innebär

WCAG 2.4.13 Focus Appearance är ett kriterium på nivå AAA som introducerades i WCAG 2.2 och som ställer upp precisa, mätbara krav på den visuella utformningen av tangentbordsfokusindikatorer. Medan kriteriet på lägre nivå 2.4.11 (Focus Not Obscured, nivå AA) säkerställer att det fokuserade elementet inte är helt dolt, och 2.4.7 (Focus Visible, nivå AA) enbart kräver att någon fokusindikator finns, går 2.4.13 längre genom att definiera hur synlig den indikatorn måste vara.

För att klara detta kriterium måste tangentbordsfokusindikatorn uppfylla alla följande villkor:

• Minsta area: Fokusindikatorn måste ha en area på minst den ofokuserade komponentens omkrets multiplicerad med 2 CSS-pixlar. I praktiken innebär detta för en typisk rektangulär knapp att fokusramen måste ha en area som är lika med eller större än knappens omkrets gånger 2px — en fokusring som är minst 2px tjock runt hela kanten uppfyller kravet.
• Kontrastförhållande för fokusindikatorn: De pixlar som utgör fokusindikatorn måste ha ett kontrastförhållande på minst 3:1 mellan sina fokuserade och ofokuserade tillstånd. Så om en knapp har en vit bakgrund i sitt standardläge måste fokusringen som ritas runt den ha minst 3:1 i kontrast mot den vita bakgrunden.
• Ingen minskning av kontrast för inneslutet innehåll: Fokusindikatorn får inte sänka kontrasten för text eller annat innehåll inuti den fokuserade komponenten till under 4.5:1 (för text under 18pt / 14pt fet) eller 3:1 (för stor text och icke-textinnehåll).

Alla tre villkor måste uppfyllas samtidigt för att en komponent ska klara kravet. En fokusindikator som är tillräckligt stor men har otillräcklig kontrast underkänns. På samma sätt underkänns en högkontrastindikator som är för liten.

WCAG-specifikationen definierar ett anmärkningsvärt undantag: om webbläsarens standardfokusindikator (user-agent default) uppfyller kraven behöver författaren inte lägga till en egen stil. Men webbläsarstandarder varierar avsevärt — Chromium-baserade webbläsare ger i allmänhet en blå kontur, medan Safari kan rendera en ring som saknar tillräcklig kontrast i vissa färgscheman. Författare bör verifiera att standardindikatorn uppfyller tröskelvärdet eller tillhandahålla en robust egen stil.

Kriteriet gäller alla interaktiva och fokuserbara komponenter: länkar, knappar, formulärfält, select-menyer, kryssrutor, alternativknappar, anpassade widgetkomponenter byggda med ARIA-roller och alla element som gjorts fokuserbara via tabindex. Det gäller också fokusindikatorer som skapas enbart via CSS på pseudo-element eller via JavaScript-styrda klassändringar.

Varför det är viktigt

Fokussynlighet är en kritisk navigationssignal för en bred grupp användare. När fokusindikatorer är tunna, lågkontrastiga eller helt saknas tappar dessa användare sin rumsliga orientering på en sida — de kan inte se var de befinner sig eller vart de kan gå härnäst.

Endast tangentbordsanvändare — inklusive personer med motoriska funktionsnedsättningar som skakningar, förlamning eller belastningsskador — är helt beroende av tangentbordet för att navigera. För dessa användare är en osynlig eller knappt synlig fokusindikator inte bara en olägenhet; den gör hela gränssnittet oanvändbart. Enligt Världshälsoorganisationen lever cirka 1,3 miljarder människor med någon form av funktionsnedsättning, och motoriska funktionsnedsättningar utgör en av de största kategorierna bland personer som undviker eller inte kan använda en mus.

Användare med nedsatt syn som använder förstoringsprogram men inte en fullskalig skärmläsare är också beroende av fokusringen för att orientera sig. Vid höga zoomnivåer kan en standardkontur på 1px klippas av visningsfönstret eller helt enkelt vara osynlig mot en likfärgad bakgrund. Dessa användare navigerar ofta med tangentbord just eftersom exakt muspekning är svår vid hög förstoring.

Kognitiva funktionsnedsättningar och uppmärksamhetsrelaterade funktionsnedsättningar såsom ADHD, ångestsyndrom och traumatiska hjärnskador kan göra det svårt att följa visuell information över en sida. En mycket synlig, tydligt avgränsad fokusindikator minskar den kognitiva belastningen vid navigering genom att ge en otvetydig förankring för användarens aktuella position.

Situationella funktionsnedsättningar spelar också roll: en utvecklare som testar på en bärbar dator med låg ljusstyrka utomhus, eller en äldre användare med åldersrelaterad nedsatt kontrastkänslighet, kan ha svårt med tunna eller lågkontrastiga fokusringar även utan klinisk diagnos.

Föreställ dig ett scenario i verkligheten: en banks onlineformulär för att överföra pengar innehåller tio inmatningsfält och fyra åtgärdsknappar. En användare med Parkinsons sjukdom tabbar genom formuläret med tangentbordet. Om fokusindikatorn är en standardiserad prickad kontur på 1px i ljusgrått mot en vit bakgrund kan användaren inte på ett tillförlitligt sätt se vilket fält hen för närvarande redigerar. Hen kan av misstag skicka en överföring till fel konto eftersom hen inte kunde se att fokus hade flyttats förbi mottagarfältet. En robust, högkontrastig fokusram hade helt förhindrat detta.

Utöver tillgänglighet är en tydlig fokusindikator en användbarhetsförbättring för alla användare. Avancerade användare som ofta navigerar i formulär och menyer med tangentbord — ett vanligt mönster bland utvecklare, dataregistreringspersonal och skärmläsaranvändare — drar nytta av snabb, tillförlitlig orientering. Det finns också en indirekt SEO-signal: webbplatser med stark tillgänglighet tenderar att ha lägre avvisningsfrekvens och högre uppgiftsgenomförande, vilket båda korrelerar med positiva rankningsfaktorer.

Relaterade Axe-core-regler

WCAG 2.4.13 kräver manuell testning eftersom automatiserade verktyg inte fullt ut kan utvärdera storlek och kontrast för en fokusindikator i alla möjliga webbläsar-renderingskontexter. Axe-core har ingen enskild automatiserad regel som direkt flaggar 2.4.13-fel. Skälen är tekniska:

• Varför automatisering är otillräcklig: Att beräkna den exakta pixelarean för en fokusindikator kräver att man simulerar tangentbordsfokus på varje interaktivt element, mäter den renderade konturgeometrin (som beror på webbläsare, operativsystem, zoomnivå och CSS), beräknar kontrastförhållandet för indikatorpixlarna mot deras grannar och verifierar att inget av detta bryter mot kravet på kontrast för inneslutet innehåll. Ingen nuvarande automatiserad tillgänglighetsmotor utför på ett tillförlitligt sätt alla dessa steg för alla komponenter. Axe-core kan flagga avsaknaden av någon fokusstil (relaterat till 2.4.7) men kan inte mäta om den stil som finns uppfyller 2.4.13:s tröskelvärden för area och kontrast.
• Delvis täckning via fokusrelaterade regler: Axe-cores regel focus-visible kontrollerar om element överhuvudtaget har en synlig fokusindikator. Om ett element har outline: none eller outline: 0 utan någon alternativ visuell indikator kommer denna regel att flagga det. Men att klara denna regel garanterar inte efterlevnad av 2.4.13 — ett element kan ha en tekniskt synlig kontur som ändå är för tunn eller har för låg kontrast.
• Manuell testning är den auktoritativa metoden: Testare måste visuellt inspektera varje interaktiv komponent i fokuserat tillstånd, mäta eller uppskatta konturens dimensioner och verifiera kontrastförhållanden med hjälp av en färgkontrastanalysator. Det är därför WCAG listar 2.4.13 som ett kriterium som endast testas manuellt för axe-core-ändamål.

Hur man testar

1. Automatisk skanning (endast delvis signal): Kör axe DevTools eller Lighthouse på sidan. Leta efter eventuella fel relaterade till focus-visible eller focus-order-semantics. Även om dessa inte direkt flaggar 2.4.13-överträdelser kan de lyfta fram element där fokusstilar har undertryckts helt, vilket är ett grundläggande fel. I Chrome DevTools, öppna panelen Accessibility och använd inspektionsläget "Tab" för att växla mellan fokuserbara element.
2. Visuellt tangentbordsnavigeringstest: Koppla bort eller lägg undan musen. Tryck på Tab för att gå igenom varje interaktivt element på sidan. För varje fokuserat element, inspektera fokusindikatorn visuellt. Fråga: Finns det en tydligt synlig ring eller annan indikator? Verkar den vara minst 2px tjock? Har den stark kontrast mot den omgivande bakgrunden? Notera alla element där du tvekar eller har svårt att se var fokus är.
3. Kontrastmätning: Använd WebAIM Contrast Checker eller skrivbordsverktyget Colour Contrast Analyser. Med fokus på en komponent, ta en skärmdump. Sampla färgen på fokusindikatorns pixlar och färgen på bakgrunden direkt intill. Verifiera att kontrastförhållandet är minst 3:1.
4. Dimensionsmätning: Använd webbläsarens DevTools (Chrome eller Firefox). Välj ett fokuserat element och inspektera dess beräknade stilar. Kontrollera outline-width, outline-offset och eventuell box-shadow som används som fokusring. Multiplicera elementets omkrets (2 × bredd + 2 × höjd) med 2px för att beräkna minsta area. Verifiera att indikatorns renderade area uppfyller eller överstiger detta värde.
5. Skärmläsare + tangentbordstest (NVDA + Firefox): Öppna sidan i Firefox med NVDA igång. Navigera med Tab och piltangenterna. Bekräfta att den visuella fokusindikatorn flyttas i synk med NVDA:s annonserade fokus. Var särskilt uppmärksam på anpassade widgets (karuseller, modaler, dragspel) där fokus kan hanteras via JavaScript.
6. VoiceOver + Safari (macOS/iOS): Aktivera VoiceOver med Kommando + F5. Använd Tab för att navigera mellan interaktiva element. Verifiera att VoiceOver-markören (den svarta konturlådan) inte ersätter en korrekt CSS-fokusindikator — sidan själv måste tillhandahålla en sådan oberoende.
7. Test i högkontrastläge: På Windows, aktivera High Contrast-läge (Inställningar → Ease of Access → High Contrast). Ladda om sidan och upprepa tangentbordsnavigeringstestet. Vissa CSS-fokusstilar åsidosätts av operativsystemet i högkontrastläge; verifiera att en synlig indikator fortfarande visas. Använd CSS-medieregeln forced-colors: active för att vid behov justera stilar villkorligt.

Hur man åtgärdar

Standardkontur från webbläsaren borttagen — Felaktigt

<!-- Many stylesheets globally suppress the default focus outline -->
<style>
  * {
    outline: none; /* Removes ALL focus indicators site-wide */
  }
  a:focus, button:focus {
    outline: 0; /* Redundant removal; no replacement provided */
  }
</style>
<button>Submit Payment</button>

Standardkontur från webbläsaren borttagen — Korrekt

<!-- Remove the default only when providing a superior custom indicator -->
<style>
  /* Only suppress default outline when :focus-visible applies, then provide a strong replacement */
  :focus-visible {
    outline: 3px solid #0057b8; /* 3px ensures area requirement is met for typical elements */
    outline-offset: 2px;       /* Offset separates indicator from element edge for clarity */
  }
  /* Respect forced-colors (Windows High Contrast) by using system keywords */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid ButtonText;
    }
  }
</style>
<button>Submit Payment</button>

Lågkontrastig fokusring på färgad bakgrund — Felaktigt

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus {
    outline: 2px solid #3399ff; /* Light blue outline on dark blue background: contrast ratio ~1.4:1 — fails */
  }
</style>
<button class='cta-button'>Book Now</button>

Lågkontrastig fokusring på färgad bakgrund — Korrekt

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus-visible {
    /* White outline contrasts strongly against the dark blue button (contrast ~8:1) */
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    /* A dark offset box-shadow behind the white ring ensures contrast against light page backgrounds */
    box-shadow: 0 0 0 5px #0057b8;
  }
</style>
<button class='cta-button'>Book Now</button>

Anpassad div-baserad interaktiv widget utan fokusstil — Felaktigt

<style>
  .tab-item { cursor: pointer; padding: 12px 20px; }
  /* No :focus or :focus-visible style defined for custom tab */
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Anpassad div-baserad interaktiv widget utan fokusstil — Korrekt

<style>
  .tab-item {
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 4px;
  }
  /* Explicit :focus-visible style — outline-width 3px with offset meets area threshold */
  .tab-item:focus-visible {
    outline: 3px solid #d4550a; /* 3:1+ contrast against white background */
    outline-offset: 3px;
  }
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Tunn box-shadow används som fokusindikator — Felaktigt

<style>
  .form-input:focus {
    outline: none;
    /* 1px box-shadow spread: likely too small in area for most input sizes */
    box-shadow: 0 0 0 1px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Tunn box-shadow används som fokusindikator — Korrekt

<style>
  .form-input:focus-visible {
    outline: none;
    /*
      3px spread provides sufficient area around a typical 300px-wide input.
      #005fcc on white background yields ~5.9:1 contrast — passes both 2.4.13 (3:1) and 1.4.3 (4.5:1).
    */
    box-shadow: 0 0 0 3px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Vanliga misstag

• Att använda outline: none i en CSS-reset utan att tillhandahålla någon ersättande fokusindikator. Många populära CSS-resets (äldre versioner av Normalize.css, anpassade resets) tar bort konturer generellt. Koppla alltid borttagning till en :focus-visible-ersättning som uppfyller kraven på storlek och kontrast.
• Att bara tillhandahålla en fokusstil för :focus men inte :focus-visible, vilket orsakar fokusringar vid musklick på knappar som irriterar seende musanvändare — vilket leder till att utvecklare tar bort dem helt istället för att använda korrekt uppdelning med pseudo-klasser.
• Att välja en fokusringsfärg som ligger nära komponentens bakgrundsfärg. Till exempel har en ljusblå ring #99ccff på en vit bakgrund #ffffff ett kontrastförhållande på cirka 1.5:1, långt under det kräva 3:1.
• Att använda outline-width: 1px på små komponenter som ikonknappar eller kryssrutor. En 1px ring runt en 24×24px ikon har en area på cirka 96 kvadratpixlar, men den minsta area som krävs för ett 24×24-element är (24+24+24+24) × 2 = 192 kvadratpixlar — exakt 2px tjock. En 1px-kontur underkänns i denna beräkning.
• Att glömma att testa fokusutseende på anpassade ARIA-widgets såsom role='combobox', role='listbox' eller role='slider'. Dessa komponenter har ofta JavaScript-hanterat fokus som kringgår inbyggda CSS-pseudo-klasser om de inte hanteras uttryckligen.
• Att bara tillämpa en fokusstil på a- och button-taggar och samtidigt försumma input, select, textarea och alla element med tabindex='0'.
• Att åsidosätta fokusstilar djupt inne i ett komponentbibliotek eller en tredjepartswidget utan att inse att åsidosättningen tar bort den synliga indikatorn. Vanliga bovar är UI-kit som Bootstrap 4 (som sätter box-shadow till ett subtilt sken) som kanske inte uppfyller 2.4.13:s tröskel.
• Att inte testa fokusutseende i Windows High Contrast-läge. Vissa tekniker med CSS-outline och box-shadow renderas osynligt i High Contrast-läge. Använd blocket @media (forced-colors: active) för att säkerställa en synlig fallback baserad på systemfärger.
• Att använda outline-offset med ett mycket stort negativt värde för att flytta konturen inuti elementets kant. Detta kan göra att indikatorn överlappar elementets bakgrund och sänker den effektiva kontrasten under 3:1.
• Att anta att fokusindikatorn på en överordnad behållare är tillräcklig för underordnade interaktiva element. Varje fokuserbart element måste självständigt uppfylla kriteriet; en markerad rad i en tabell uppfyller inte kravet för en länkcell inom den raden.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentdekret 2025/10, publicerat i Officiella tidningen nr 32933 den 21 juni 2025, fastställer bindande krav på webb- och mobiltillgänglighet för en bred grupp aktörer som är verksamma i Turkiet. Cirkuläret antar WCAG 2.2 som sin tekniska referensstandard och kräver efterlevnad på nivå AA för berörda aktörer. WCAG 2.4.13 Focus Appearance är ett kriterium på nivå AAA och är därför inte direkt obligatoriskt enligt cirkuläret för standardefterlevnad.

Cirkulärets räckvidd är dock omfattande. Berörda aktörer inkluderar offentliga institutioner och statliga myndigheter, banker och finansiella tjänsteleverantörer, sjukhus och vårdorganisationer, teleoperatörer med 200,000 eller fler abonnenter, e-handelsplattformar, resebyråer, privata transportföretag och privatskolor som godkänts av Ministry of National Education (MoNE). För alla dessa organisationer signalerar att visa upp efterlevnad på nivå AAA för tillämpliga kriterier — inklusive 2.4.13 — ett åtagande om tillgänglighet i toppklass som går utöver den juridiska miniminivån.

Det finns praktiska och reputationsmässiga skäl för berörda turkiska aktörer att frivilligt implementera 2.4.13. Banker och finansiella tjänsteleverantörer betjänar i synnerhet kunder med motoriska funktionsnedsättningar som är beroende av tangentbordsnavigering för säkra transaktioner. En turkisk banks internetbankportal som uppfyller 2.4.13 överträffar inte bara regleringskraven utan minskar också risken för användarfel och visar på företagens sociala ansvar. På samma sätt bör sjukhus och vårdportaler där patienter bokar tider eller får tillgång till journaler säkerställa att alla användare — inklusive äldre patienter med nedsatt finmotorik eller nedsatt syn — kan navigera i dessa gränssnitt med trygghet.

Teleoperatörer med stora abonnentbaser är bland de mest trafikerade digitala tjänsterna i Turkiet. Deras kundportaler och självbetjäningstjänster når miljontals användare, inklusive en betydande andel äldre och användare med funktionsnedsättningar. Att frivilligt implementera 2.4.13 på dessa plattformar säkerställer likvärdig tillgång för alla abonnenter och placerar operatören gynnsamt inför eventuell framtida skärpning av regleringen som kan utvidga obligatorisk efterlevnad till AAA-kriterier.

För organisationer som strävar efter full efterlevnad av WCAG 2.2 AAA — vare sig det drivs av upphandlingskrav, export till EU-marknader som omfattas av European Accessibility Act eller interna tillgänglighetspolicys — är implementering av 2.4.13 en nödvändig komponent. Accsible:s overlay-SDK tillhandahåller konfigurerbara fokusförbättringsfunktioner som kan hjälpa organisationer att lyfta fram starka, kompatibla fokusindikatorer i hela sina gränssnitt, som ett komplement till de CSS-åtgärder på författarnivå som beskrivs i den här artikeln.