Focus- en focus-visible-varianten
Pas focus:*-stijlen toe voor toetsenbordnavigatie en focus-visible:* om focusringen alleen voor toetsenbordgebruikers te tonen, niet na muisklikken.
Focus- en focus-visible-varianten is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Het belang van focusstijlen
Toetsenbordnavigatie wordt gebruikt door mensen met motorische beperkingen, ervaren gebruikers en iedereen die een lang formulier invult. Wanneer een element via het toetsenbord focus krijgt, markeert de browser het met een focusindicator. De pseudoklasse :focus van CSS wordt geactiveerd bij elke focusgebeurtenis, terwijl :focus-visible alleen wordt geactiveerd wanneer de browser bepaalt dat een zichtbare focusindicator nuttig is — meestal bij toetsenbordnavigatie. Tailwind biedt beide aan als de variantprefixes focus: en focus-visible:.
<!-- focus-visible is the accessible modern choice -->
<div class="flex gap-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Tab to me
</button>
</div>Basis van de focus:-variant
De variant focus: past een stijl toe zodra het element focus krijgt, ongeacht de manier waarop — via een muisklik, aanraking of het toetsenbord. De meest voorkomende toepassing is het verwijderen van de standaardfocusomtreklijn van de browser en deze vervangen door een aangepaste ring: focus:outline-none focus:ring-2 focus:ring-blue-500. Hoewel dit handig is, heeft dit patroon een nadeel: muisgebruikers zien de ring ook bij een klik, wat sommige ontwerpers visueel storend vinden.
<!-- focus: fires on both mouse click and keyboard tab -->
<div class="space-y-3 max-w-sm">
<input
type="text"
placeholder="Click or tab to focus"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<button class="w-full bg-gray-200 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">
Focus-on-click-too button
</button>
</div>focus-visible: de moderne aanpak
focus-visible: verwijst naar de CSS-pseudoklasse :focus-visible. Browsers passen deze alleen toe wanneer ze bepalen dat een focusindicator passend is — bij toetsenbordnavigatie dus, maar meestal niet bij muisklikken op knoppen. Zo krijg je het beste van beide werelden: muisgebruikers zien de ring niet, maar toetsenbordgebruikers krijgen altijd duidelijke feedback. Dit is de aanbevolen aanpak in alle moderne Tailwind-projecten.
<!-- focus-visible: only shows ring for keyboard, not mouse -->
<div class="space-y-3 max-w-sm">
<!-- Try: click with mouse (no ring) vs Tab key (ring appears) -->
<button class="w-full bg-blue-500 text-white py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Smart focus (use Tab key)
</button>
<input
type="text"
placeholder="Input: ring on keyboard focus"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
/>
</div>Afspraken voor aangepaste focuskleuren
Kies focusringkleuren die voldoende contrasteren met zowel het element als de achtergrond van de pagina. Ringen in een merkkleur werken goed: focus-visible:ring-indigo-500 voor een product met indigo als merkkleur. Voor de focus van een foutstatus kun je focus:ring-red-500 gebruiken bij ongeldige invoervelden. In de donkere modus moet je nagaan of je ringkleur voldoende contrasteert met donkere achtergronden — lichte ringen (ring-white of ring-blue-300) werken beter op donkere oppervlakken.
<!-- Focus colors for different contexts -->
<div class="space-y-4 max-w-sm">
<!-- Normal: brand color ring -->
<input class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Brand focus" />
<!-- Success: green ring -->
<input class="w-full border border-green-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 bg-green-50" placeholder="Valid input" />
<!-- Error: red ring -->
<input class="w-full border border-red-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 bg-red-50" placeholder="Invalid input" />
</div>Focusstijlen voor koppelingen
Koppelingen behoren tot de belangrijkste elementen die met het toetsenbord kunnen worden bediend. Browsers passen standaard een focusomtreklijn toe op koppelingen, maar misschien wil je deze aanpassen aan je ontwerp. Het patroon focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded maakt een strakke ring die nauw rond tekstkoppelingen in een regel past, zodat ze tijdens toetsenbordnavigatie duidelijk herkenbaar zijn.
<!-- Accessible link focus styles -->
<p class="text-gray-700 leading-relaxed max-w-prose">
Visit our
<a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
documentation
</a>
to learn more about
<a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
getting started
</a>
with our product.
</p>Focus binnen — ouder reageert op focus van kind
focus-within: wordt op een ouder toegepast wanneer een van zijn afstammelingen focus heeft. Dit is handig om een volledige container van een formulierveld (label + invoerveld + helptekst) te markeren wanneer het invoerveld erin focus krijgt, in plaats van alleen het invoerveld zelf. De visuele groep wordt uitgebreid om aan te geven welke groep formuliervelden actief is, waardoor complexe formulieren gemakkelijker te navigeren zijn.
<!-- Entire form group highlights when input is focused -->
<div class="space-y-3 max-w-sm">
<!-- Container gets ring when child input is focused -->
<div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
<label class="block text-xs font-medium text-gray-500 mb-1">Email Address</label>
<input
type="email"
class="w-full focus:outline-none text-gray-800"
placeholder="you@example.com"
/>
</div>
<div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
<label class="block text-xs font-medium text-gray-500 mb-1">Password</label>
<input
type="password"
class="w-full focus:outline-none text-gray-800"
placeholder="••••••••"
/>
</div>
</div>Focus en overgang voor vloeiende ringen
Veranderingen in ringen en randen bij focus kunnen worden geanimeerd met de overgangshulpprogramma's van Tailwind. transition-shadow animeert de schaduw (die ringen intern gebruiken) en transition-colors animeert veranderingen in de randkleur. Met duration-150 voor een snelle overgang van 150 ms voelen focusstijlen direct en responsief aan zonder schokkerig te worden — de juiste balans voor interactieve formulierelementen.
<!-- Smoothly animated focus rings -->
<div class="space-y-4 max-w-sm p-4">
<input
type="text"
placeholder="Focus with smooth transition"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-150"
/>
<textarea
placeholder="Textarea with focus transition"
rows="3"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-150 resize-none"
></textarea>
</div>Focusstijlen verantwoord uitschakelen
Je kunt ontwerpverzoeken tegenkomen om focusomtreklijnen volledig te verwijderen — doe dit niet tenzij je een alternatief biedt. Alleen focus:outline-none gebruiken is in strijd met succescriterium 2.4.7 van WCAG 2.1 (Focus zichtbaar). Combineer dit altijd met een aangepaste ring, een verandering van rand, een verandering van achtergrond of een andere zichtbare indicator. Het patroon focus:outline-none focus-visible:ring-2 is de verantwoorde manier om de standaardomtreklijn te verwijderen en toch de toegankelijkheid te behouden.
<!-- ❌ Bad: removes focus with no replacement -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none">
Inaccessible (no focus indicator)
</button>
<!-- ✅ Good: replaces with custom ring -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Accessible (custom ring)
</button>Focus in selectievakken en selectievakjes
Native formulierelementen zoals select, checkbox en radio reageren ook op focusvarianten. Voor selectievakken is het patroon hetzelfde als voor invoervelden: focus:outline-none focus:ring-2 focus:ring-blue-500. Bij selectievakken ligt de ring om het vierkant en bij keuzerondjes om de cirkel. De plugin @tailwindcss/forms biedt in verschillende browsers betere standaardstijlen voor deze elementen.
<!-- Focus styles on different form controls -->
<div class="space-y-4 max-w-sm">
<!-- Select -->
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<!-- Checkboxes -->
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
<span>Agree to terms</span>
</label>
<!-- Radio -->
<label class="flex items-center gap-3 cursor-pointer">
<input type="radio" name="plan" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
<span>Monthly plan</span>
</label>
</div>Navigatielinks overslaan
Links om de navigatie over te slaan zijn het eerste element op een pagina dat focus kan krijgen. Zo kunnen toetsenbordgebruikers rechtstreeks naar de hoofdinhoud springen en de navigatie overslaan. Standaard zijn ze visueel verborgen, maar ze worden zichtbaar wanneer ze focus krijgen. Het patroon gebruikt sr-only in combinatie met focus:not-sr-only focus:absolute om de link alleen zichtbaar te maken wanneer een toetsenbordgebruiker ernaartoe tabt. Dit is een vereiste voor naleving van WCAG 2.4.1.
<!-- Skip navigation link: visible only on keyboard focus -->
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-blue-500 text-white px-4 py-2 rounded font-medium z-50"
>
Skip to main content
</a>
<nav class="bg-gray-800 text-white px-6 py-4">
<!-- Navigation items -->
</nav>
<main id="main-content" class="p-6">
Main content here
</main>Focusstijlen in de donkere modus
Focusringen die voor de lichte modus zijn ontworpen, kunnen in de donkere modus verdwijnen of onvoldoende contrast hebben. Gebruik de variant dark: van Tailwind om ringkleuren te wijzigen: focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 gebruikt in de donkere modus een iets lichtere blauwtint voor beter contrast tegen donkere achtergronden. U kunt ook witte ringen op donkere oppervlakken gebruiken: dark:focus-visible:ring-white.
<!-- Focus rings for both light and dark mode -->
<div class="p-6 bg-white dark:bg-gray-900 space-y-3">
<input
type="text"
placeholder="Adaptive focus ring"
class="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:border-blue-500 max-w-sm"
/>
</div>Korte controle
Test uw begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les hebt u geleerd: focus: wordt geactiveerd bij elke focusgebeurtenis, terwijl focus-visible: alleen wordt geactiveerd bij toetsenbordnavigatie, focus-within: markeert een bovenliggend element wanneer een onderliggend element focus heeft — ideaal voor groepen formuliervelden en combineer focus:outline-none altijd met een aangepaste ring om de toegankelijkheid volgens WCAG te behouden. Hierna bekijken we de varianten voor uitgeschakelde elementen en tijdelijke aanduidingen bij het opmaken van formulierelementen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Focus- en focus-visible-varianten” gratis?
Ja — de volledige tekst van “Focus- en focus-visible-varianten” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Focus- en focus-visible-varianten”?
Pas focus:*-stijlen toe voor toetsenbordnavigatie en focus-visible:* om focusringen alleen voor toetsenbordgebruikers te tonen, niet na muisklikken. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Focus- en focus-visible-varianten”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Hover- en active-varianten
- Focus- en focus-visible-varianten
- Disabled- en placeholder-varianten
- Group- en peer-varianten