Goede praktijken

Zichtbare focus: waarom outline: none de toetsenbordtoegankelijkheid breekt

Verwijder je de CSS-outline om esthetische redenen, dan maak je de site onbruikbaar met het toetsenbord. Deze wijdverspreide praktijk schendt twee WCAG-criteria: zichtbare focus (2.4.7) en niet-verborgen focus (2.4.11). Moderne oplossingen zoals :focus-visible en outline-offset zorgen voor een discrete, contrasterende en conforme focusindicator.

De korte samenvatting

De focusindicator (vaak een grijze of blauwe omlijning) geeft aan dat een formulierveld, link of knop de toetsenbordinteractie ontvangt. Het verwijderen van deze omlijning met `outline: none` zonder vervanging maakt toetsenbordnavigatie onzichtbaar: een ernstige beperking voor elke gebruiker die de muis niet kan gebruiken. Criterium WCAG 2.4.7 vereist dit; 2.4.11 preciseert dat deze niet verborgen mag worden.

Focus dient niet alleen om aan te geven dat een element geselecteerd is. Het helpt ook om te begrijpen waar men zich bevindt in het parcours van de pagina, welke actie met de Enter-toets wordt geactiveerd en welk veld de volgende invoer zal ontvangen. Zonder visuele aanwijzing moet de gebruiker zijn positie raden of de navigatie vanaf het begin opnieuw starten.

De correctie bestaat dus niet uit het verplicht behouden van de standaardstijl van de browser. Het gaat erom een waarneembare, consistente en voldoende contrasterende indicator te garanderen op elk interactief component. Deze indicator mag de grafische identiteit van de site respecteren, op voorwaarde dat hij in alle staten en op alle achtergronden zichtbaar blijft.

Waarom outline: none een gewoonte is geworden

De standaardoutline van browsers is een vrij dikke grijze of blauwe rechthoek, die sinds de jaren 1990 wordt opgelegd voor toegankelijkheid. Vanaf de jaren 2010 vonden ontwerpers deze lelijk: hij zou het strakke design „verpesten”. CSS-resets (Normalize, Reset of native Bootstrap) begonnen deze te verbergen, vaak zonder vervanging: „outline: none” verspreidde zich als standaardpatroon in frameworks en ontwikkelstudio’s.

Het probleem is systemisch: deze verwijdering is bijna automatisch en zelden doelbewust. Uit het Inclaria-onderzoek 2026 blijkt dat van de 55 geanalyseerde Franse e-commercewebsites de meeste kritieke niet-conformiteiten minstens één verwijdering van outline zonder vervanging omvatten. Dit is een symptoom: geen toetsenbordtest, geen toegankelijkheidsreview voorafgaand aan het ontwerp.

Een andere veelvoorkomende oorzaak is de verwarring tussen focus veroorzaakt door een klik en focus veroorzaakt door het toetsenbord. Teams willen de ring verwijderen die verschijnt na een muisklik en passen vervolgens outline: none toe op alle :focus-staten. Deze regel heeft dan ook gevolgen voor mensen die Tab, Shift + Tab of een hulpmiddeltechnologie gebruiken. :focus-visible biedt hiervoor een precieze oplossing door onderscheid te maken tussen interactiemodaliteiten.

Wie zit er vast?

Vier profielen worden rechtstreeks getroffen.

• Gebruikers die alleen het toetsenbord gebruiken: motorische beperking, tremoren, verlamming of hulpmiddeltechnologie (voetpedaal, aangepaste muis). Zij zien niets gebeuren wanneer ze door het formulier tabben.
• Gebruikers die uit voorkeur met het toetsenbord navigeren: ontwikkelaars, data-analisten, power users die 15 seconden per formulier winnen, blinden en slechtzienden die navigeren met een schermlezer (die vaak afhankelijk is van de visuele focus van de browser of een leesring).
• Oudere gebruikers of mensen met motorische vermoeidheid: precisie met de muis wordt moeilijk; het toetsenbord is gemakkelijker en sneller.
• Tijdelijke beperkingen: gebroken arm, defect touchpad, werken op een touchmonitor zonder muis.

De blokkering kan volledig zijn bij een lang formulier. Iemand kan bij de validatieknop komen zonder te weten welk besturingselement actief is, per ongeluk een secundaire link activeren of een reeds ingevuld veld wijzigen. Bij een modaal venster kan het ontbreken van een indicator ook de indruk wekken dat het toetsenbord niet meer werkt, terwijl de focus zich blijft verplaatsen naar onzichtbare elementen of elementen achter het venster.

De betrokken WCAG-criteria

Twee criteria vormen een probleem:

Op het vlak van wettelijke conformiteit zijn deze twee criteria van niveau AA, verplicht in Frankrijk onder de Europese richtlijn (European Accessibility Act, van toepassing vanaf 28 juni 2025 voor nieuwe diensten, 28 juni 2030 voor bestaande diensten).

De zichtbaarheid moet worden gecontroleerd onder reële gebruiksomstandigheden, niet alleen op een geïsoleerd component in een designbibliotheek. Een conforme ring op een witte achtergrond kan onwaarneembaar worden in een blauwe banner, worden afgekapt door overflow: hidden of verdwijnen onder een koptekst die als fixed is gepositioneerd. De conformiteit hangt dus af van de uiteindelijke weergave, de positie van het element en de visuele omgeving.

De moderne oplossing: :focus-visible en outline-offset

Moderne browsers en technologische hulpmiddelen ondersteunen :focus-visible (sinds 2018, IE 11 wordt niet ondersteund, maar vereist een fallbackstrategie: .element:focus { outline: 2px solid #0066cc; } gevolgd door .element:focus-visible { /* verfijnde regels */ }).

De regel om te onthouden: :focus-visible richt zich enkel op toetsenbordfocus, niet op muisfocus (op .element:focus-visible { … }). Dit zorgt ervoor dat de interface overzichtelijk blijft bij klikken, terwijl het toetsenbord nog steeds toegankelijk is.

Voorbeeld 1: de standaard outline vervangen

a, button, input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Hier creëert outline-offset: 2px een ruimte tussen het element en de ring, waardoor inhoud niet wordt verborgen (criterium 2.4.11).

Voor een consistente dekking moet dezelfde logica worden toegepast op andere interactieve componenten: tekstvelden, uitklaplijsten, aangepaste bedieningselementen, elementen met tabindex en JavaScript-widgets. Alleen regels toevoegen aan links en knoppen laat vaak gaten in het toetsenbordpad.

Voorbeeld 2: contrasterende grijze outline, ook voor dark mode

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #333; outline-offset: 4px; } @media (prefers-color-scheme: dark) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; } }

Het minimale contrast van 3:1 (link 1.4.11, grijstint) wordt gerespecteerd: #333 op wit = 8,6:1 contrast.

Voorbeeld 3: box-shadow als indicator

Wat als je de outline echt wilt vervangen? box-shadow werkt ook, maar duwt de verschuiving niet zoals outline-offset:

a:focus-visible { outline: none; box-shadow: 0 0 0 3px #0066cc; }

Let op: box-shadow verbruikt iets meer GPU dan outline en wordt niet buiten containers met `overflow: hidden` getekend. outline is robuuster.

Als outline: none noodzakelijk blijft in een specifieke regel, moet de vervanging in hetzelfde blok of in een direct herkenbare regel worden gedefinieerd. Deze nabijheid verkleint het risico dat een toekomstige wijziging in de cascade de alternatieve indicator verwijdert. Test ook gecombineerde staten, zoals :hover, :active, :disabled en :focus-visible, zodat een specifiekere stijl niet per ongeluk de focus overschrijft.

Hoe test je of de focus zichtbaar is

• Druk op Tab op het toetsenbord: elk interactief element (link, knop, invoerveld) moet een zichtbare ring eromheen hebben.
• Open de DevTools van de browser (F12), tabblad « Accessibility » (Chrome, Edge) of « Inspector → Accessibility » (Firefox), en bekijk de focusindicator terwijl je tabt.
• Gebruik een schermlezer (NVDA op Windows, VoiceOver op Mac/iOS): deze kondigt het element in focus aan; de visuele focus moet tegelijkertijd meebewegen.

De test moet de hele pagina in beide richtingen bestrijken, met Tab en vervolgens Shift + Tab. De volgorde van verplaatsing moet logisch blijven, de indicator mag nooit verdwijnen en geen enkel element mag het toetsenbord vastzetten. Het is ook nodig om menu’s, accordeons, modale vensters en dynamische componenten te openen, omdat hun gedrag niet altijd zichtbaar is bij een eenvoudige doorloop van de hoofdinhoud van de pagina.

Test ten slotte op verschillende schermbreedtes en zoomniveaus. Bij 200% kan een vaste koptekst of een toestemmingsbanner het gefocuste element bedekken, terwijl alles op 100% correct lijkt. De focus moet ten minste gedeeltelijk zichtbaar blijven wanneer de inhoud zich herordent.

Detectie van het verwijderen van outline

De scanner van Inclaria test twee zaken: (1) de aanwezigheid van een zichtbare focusindicator op belangrijke elementen (formulieren, knoppen, links); (2) de offset van deze indicator (geen verbergen onder een vast menu, bijvoorbeeld). Een verwijdering van outline: none zonder vervanging wordt gemarkeerd als niet-conform met WCAG 2.4.7.

Het rapport geeft prioriteit aan deze fout: deze komt vaak voor op honderden elementen (CSS-reset overal toegepast) en heeft een directe impact op de bruikbaarheid.

Een geautomatiseerde detectie maakt het mogelijk om verdachte CSS-regels en componenten zonder vervangende stijl snel op te sporen. Dit moet echter worden aangevuld met een handmatige test met het toetsenbord, omdat de werkelijke zichtbaarheid afhangt van het contrast, de grafische context, het scrollen en eventuele overlappende elementen.