Focus

Focus is de toestand waarbij een element de actieve ontvanger van toetsenbordinvoer is. Slechts één element op een pagina kan op elk moment focus hebben, en de visuele indicator van die toestand — de focusring — is de belangrijkste aanwijzing voor toetsenbord-, schakelaar- en schermlezergebruikers.

Waarom focus belangrijk is

Een aanzienlijk deel van de gebruikers navigeert het web volledig zonder muis:

• Toetsenbordgebruikers met motorische beperkingen die aanwijzen moeilijk of onmogelijk maken.
• Schakelaarinvoergebruikers die interfaces bedienen via een enkelvoudige knop of sip-and-puff-apparaat.
• Schermlezergebruikers, die de toetsenbordinterface gebruiken, ook op touchscreens.
• Spraakaansturingsgebruikers (“Klik op de knop Verzenden”) wiens hulpmiddelen opdrachten oplossen door focusbare elementen te koppelen.

Voor al deze gebruikers is focus de cursor. Waar de focus is, waar die naartoe gaat en hoe die eruitziet, bepaalt of de pagina überhaupt bruikbaar is.

De focusregels van WCAG

WCAG 2.x en 2.2 bevatten meerdere criteria gericht op focus:

• 2.1.1 Toetsenbord (A) — alle functionaliteit moet via het toetsenbord bedienbaar zijn.
• 2.1.2 Geen toetsenbordval (A) — toetsenbordgebruikers moeten focus weg kunnen bewegen van elk focusbaar element met uitsluitend het toetsenbord.
• 2.4.3 Focusvolgorde (A) — focusvolgorde moet logisch en betekenisvol zijn.
• 2.4.7 Focus zichtbaar (AA) — het gefocuste element moet een zichtbare indicator hebben.
• 2.4.11 Focus niet verborgen (AA, nieuw in WCAG 2.2) — vaste koppen, cookiebanners en zwevende chatwidgets mogen een gefocust element niet volledig verbergen.
• 2.4.13 Focusweergave (AAA, nieuw in 2.2) — de focusindicator moet voldoen aan specifieke drempelwaarden voor oppervlakte en contrast.

Veelvoorkomende foutpatronen

• outline: none zonder vervanging. Ontwerpers verwijderen de standaardring omdat deze niet past bij de visuele stijl, en vergeten een gestyled equivalent terug te plaatsen. Dit is een Level AA-fout en de meest voorkomende.
• Focus alleen op :focus-visible, niet op :focus. Moderne beste praktijk gebruikt :focus-visible zodat de ring alleen verschijnt bij toetsenbordnavigatie, niet bij muisklikken. Prima — maar de indicator op :focus-visible moet nog steeds voldoen aan AA-contrast.
• Verloren focus na dynamische acties. Na het sluiten van een modaal moet focus terugkeren naar het triggerelement. Na het verwijderen van een rij moet focus naar een logische buur bewegen. Anders belandt de gebruiker ergens willekeurig (vaak de documentbody) en moet opnieuw van bovenaf tabben.
• Verborgen focus onder vaste chrome. Een gefocuste koppeling 50 pixels van boven staat achter de vaste koptekst die ook 50 pixels hoog is. De gebruiker tabt naar schijnbare leegte. Stel scroll-padding-top gelijk aan de kopteksthoogte in, of detecteer de overlapping en scrol het gefocuste element in beeld.

De snelste handmatige audit

Tab door elke pagina van de adresbalk tot de voettekst. Als men op enig moment niet kan zien waar focus is, een interactieve besturing niet kan bereiken of vastloopt in een focusval, slaagt de pagina niet voor 2.4.7 of 2.1.2.