Tillgängliga fokuslägen: Designa synligt tangentbordsfokus

Varför fokustillstånd spelar roll

Människor som använder ett tangentbord, byter enhet eller skärmförstorare går igenom en sida ett element i taget. Fokusindikatorn är det enda sättet de vet var de är. Att ta bort webbläsarkonturen utan en ersättning är ett av de vanligaste tillgänglighetsfelen.

Vad WCAG 2.2 kräver

Framgångskriterium 2.4.7 Fokus synlig (nivå AA) kräver att alla tangentbordsstyrda gränssnitt har ett läge där fokusindikatorn är synlig. WCAG 2.2 lade till 2.4.13 Focus Appearance (nivå AAA), som beskriver en stark indikator: minst lika stor som arean av en 2 CSS pixel tjock omkrets av komponenten, med ett kontrastförhållande på minst 3:1 mellan det fokuserade och ofokuserade tillståndet.

:fokus-synlig

MDN förklarar att :focus-visible gäller när ett element har fokus och webbläsaren bestämmer, med hjälp av heuristik, att fokus ska visas, vanligtvis för tangentbordsanvändning. Det låter dig visa starka fokusringar för tangentbordsanvändare utan att visa dem varje gång någon klickar på en knapp med en mus. Använd den istället för att ta bort konturer.

Designa ringen

Praktisk vägledning:

• Använd en kontur eller ring med en offset så att den inte smälter in i elementet.
• Kontrollera kontrasten mot varje bakgrund elementet kan visas på; en tvåfärgad ring hjälper.
• Håll det konsekvent över komponenterna, definierat som ett symbol i ditt designsystem.
• Lita aldrig på en subtil färgförändring ensam.
• Se till att det fokuserade elementet inte är dolt bakom klibbiga rubriker.

Fokus och rörelse

En fokusring kan dyka upp med en mycket kort övergång, men den ska kännas omedelbar. Undvik animationer som fördröjer ringen eller flyttar elementet, och för anpassade canvas-ritade komponenter, se till att det fortfarande finns ett riktigt fokuserbart element på sidan så att tangentbordsanvändare kan nå det.