De ontwerper had een terechte ergernis: “Als ik op die knop klik, verschijnt er een lelijke blauwe rand omheen.” De ontwikkelaar zette één regel CSS in het thema, en de rand was weg. Op elke knop, elke link, elk formulierveld van de hele site. Wat niemand in de kamer merkte: voor iedereen die met het toetsenbord navigeert, was de site vanaf dat moment onbruikbaar. Een zichtbare focus op uw website is voor die bezoekers wat de muiscursor voor anderen is.
Wat focus is en wie het nodig heeft
Wie met het toetsenbord door een pagina gaat, springt met de Tab-toets van link naar knop naar formulierveld. Het element dat op dat moment actief is, heeft de focus. Druk op Enter, en dat element wordt geactiveerd. De focusindicator, meestal een rand of omlijning, laat zien waar u bent.
Mensen die dit gebruiken:
- mensen met een motorische beperking die geen muis kunnen bedienen;
- mensen die met een schakelaar of aangepast toetsenbord werken;
- slechtziende bezoekers die vergroting gebruiken en de muis moeilijk kunnen volgen;
- ervaren gebruikers die snel een formulier invullen met Tab;
- iedereen met een kapotte muis of een touchpad dat niet meewerkt.
Zonder zichtbare focus drukken zij op Tab en zien niets veranderen. Ze weten niet waar ze zijn, en dus ook niet wat er gebeurt als ze op Enter drukken.
Het probleem met outline: none
In veel thema’s en pagebuilders staat ergens deze regel:
*:focus {
outline: none;
}Of een variant op een specifiek element, zoals a:focus of button:focus. Daarmee verdwijnt de standaard focusrand van de browser. Als er geen alternatief voor in de plaats komt, is de focus onzichtbaar. Dat is in strijd met WCAG-succescriterium 2.4.7 Focus zichtbaar (niveau AA): elk element dat met het toetsenbord bediend kan worden, moet een zichtbare focusindicator hebben.
U kunt zo’n regel vinden door in de browser met rechtermuisknop op een link te klikken, “Inspecteren” te kiezen en in de stijlen te zoeken naar outline.
De oplossing: :focus-visible
De ergernis van de ontwerper was niet onterecht. Bij een muisklik is een focusrand voor de meeste mensen overbodig. Daar is een nette oplossing voor: de pseudo-klasse :focus-visible. De browser bepaalt zelf of het zinvol is om de focus te tonen. Bij toetsenbordgebruik doet hij dat wel, bij een muisklik op een knop meestal niet.
/* Haal de standaardrand alleen weg bij muisklik */
:focus:not(:focus-visible) {
outline: none;
}
/* Een duidelijke eigen focusstijl bij toetsenbordgebruik */
:focus-visible {
outline: 3px solid #1a4fd6;
outline-offset: 2px;
}Moderne browsers ondersteunen :focus-visible goed. Vaak is alleen de tweede regel al genoeg, omdat browsers bij een muisklik standaard geen rand meer tonen op knoppen.
Een tip voor het ontwerp: gebruik outline in plaats van border of alleen een box-shadow. Een outline verschuift de lay-out niet, en in de modus voor geforceerde kleuren van Windows, die mensen met een visuele beperking gebruiken, blijft een outline zichtbaar terwijl een schaduw kan verdwijnen.
Contrast van de focusindicator
Een focusrand die er wel is maar nauwelijks opvalt, helpt weinig. Een lichtblauwe rand op een lichtgrijze knop ziet niemand. Volgens WCAG 1.4.11 moeten visuele onderdelen die nodig zijn om een onderdeel te herkennen, waaronder de focusindicator, een contrast van minstens 3:1 hebben met de omringende kleuren.
Lastig wordt het als uw site zowel lichte als donkere vlakken heeft. Een donkerblauwe rand valt op wit goed op, maar verdwijnt op een donkerblauwe footer. Twee manieren om dat op te lossen:
/* Dubbele rand: werkt op lichte en donkere achtergrond */
:focus-visible {
outline: 2px solid #ffffff;
box-shadow: 0 0 0 4px #111111;
}
/* Of: een eigen kleur per sectie */
.site-footer :focus-visible {
outline-color: #ffd23f;
}Controleer het contrast met een contrastchecker. Meer over contrast in het algemeen leest u op de pagina kleurcontrast verbeteren.
WCAG 2.2: focus mag niet verstopt raken
WCAG 2.2, gepubliceerd in oktober 2023, voegde een criterium toe dat vaak over het hoofd wordt gezien: 2.4.11 Focus niet bedekt (minimum), niveau AA. Als een element de focus krijgt, mag het niet helemaal verstopt zitten achter iets anders op de pagina.
Het klassieke voorbeeld: een vaste header bovenaan of een cookiebalk onderaan. Een toetsenbordgebruiker tabt naar beneden, de pagina scrolt mee, maar het element met focus belandt precies onder de vaste balk. De focus is er, maar niemand ziet hem.
Een oplossing in CSS:
html {
scroll-padding-top: 90px; /* hoogte van de vaste header */
scroll-padding-bottom: 80px; /* hoogte van een vaste balk onderaan */
}Daarmee houdt de browser bij het scrollen rekening met de ruimte die de balken innemen. Bij een cookiebalk is het beter als die na een keuze verdwijnt of niet over de inhoud heen ligt.
WCAG 2.2 bevat ook een strenger criterium over het uiterlijk van de focus, 2.4.13, maar dat is niveau AAA en geen standaard-eis. Het is wel een goed richtpunt voor een ontwerper die een focusstijl kiest: een duidelijke, dikke rand met goed contrast.
Zichtbare focus op uw website testen in twee minuten
- Open uw homepage en klik eenmaal in de adresbalk.
- Druk op Tab. Ziet u een duidelijk kader verschijnen rond het eerste element?
- Tab door het menu, de knoppen en een formulier. Raakt u het kader ergens kwijt?
- Scrol naar beneden met Tab. Verdwijnt de focus achter een vaste balk?
- Bekijk het kader op lichte en op donkere stukken van de pagina.
Merkt u dat u het kader kwijtraakt, noteer dan waar. Dat is een concreet punt om op te lossen. Bij die test loopt u vaak ook tegen andere toetsenbordproblemen aan; die komen aan bod bij toetsenbordnavigatie op uw website. Een goede volgende stap is een skip-link toevoegen, zodat toetsenbordgebruikers niet steeds het hele menu door hoeven.
Zichtbare focus is een van de basisonderdelen van een toegankelijke site. Het overzicht van alle onderdelen vindt u bij uw website toegankelijk laten maken.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
