Toegankelijke focusstatussen: zichtbare toetsenbordfocus ontwerpen
Hoe je een zichtbare toetsenbordfocus ontwerpt die voldoet aan WCAG 2.2: wat 2.4.7 en 2.4.13 vereisen, hoe:focus-zichtbaar werkt, en ontwerptips voor focusringen.
Kern afhaalmaaltijd
Elk interactief element heeft een duidelijk zichtbare focusindicator nodig voor toetsenbordgebruikers; WCAG 2.2 vereist niveau AA (2.4.7). Voor een sterke indicator moet u zich richten op de AAA-richtlijnen van WCAG (2.4.13): ten minste het gebied van een omtrek van 2 CSS-pixels rond het element met een contrast van 3:1 tussen gefocuste en onscherpe toestanden. Gebruik :focus-zichtbaar om ringen voor toetsenbordgebruikers weer te geven zonder deze bij elke muisklik weer te geven.
Waarom focustoestanden ertoe doen
Mensen die een toetsenbord, een ander apparaat of een schermvergroter gebruiken, bladeren element voor element door een pagina. De focusindicator is de enige manier waarop ze weten waar ze zijn. Het verwijderen van de browsercontour zonder vervanging is een van de meest voorkomende toegankelijkheidsfouten.
Wat WCAG 2.2 vereist
Succescriterium 2.4.7 Focus zichtbaar (niveau AA) vereist dat elke via een toetsenbord te bedienen interface een modus heeft waarin de focusindicator zichtbaar is. WCAG 2.2 heeft 2.4.13 Focus Appearance (niveau AAA) toegevoegd, die een sterke indicator beschrijft: minstens zo groot als het gebied van een 2 CSS pixel dikke omtrek van de component, met een contrastverhouding van minstens 3:1 tussen de gefocuste en onscherpe toestanden.
:focus-zichtbaar
MDN legt uit dat :focus-visible van toepassing is wanneer een element focus heeft en de browser, met behulp van heuristieken, besluit dat focus moet worden weergegeven, meestal voor toetsenbordgebruik. Zo kunt u sterke focusringen voor toetsenbordgebruikers laten zien, zonder dat deze elke keer zichtbaar zijn wanneer iemand met de muis op een knop klikt. Gebruik het in plaats van contouren te verwijderen.
Het ontwerpen van de ring
Praktische begeleiding:
- Gebruik een omtrek of ring met een offset, zodat deze niet in het element past.
- Controleer het contrast tegen elke achtergrond waarop het element kan verschijnen; een tweekleurige ring helpt.
- Houd het consistent tussen alle componenten, gedefinieerd als een token in uw ontwerpsysteem.
- Vertrouw nooit alleen op een subtiele kleurverandering.
- Zorg ervoor dat het gefocuste element niet verborgen is achter plakkerige kopteksten.
Focus en beweging
Een focusring kan verschijnen met een zeer korte overgang, maar deze moet onmiddellijk aanvoelen. Vermijd animaties die de ring vertragen of het element verplaatsen, en zorg ervoor dat er bij op maat gemaakte, op canvas getekende componenten nog steeds een echt focusseerbaar element op de pagina aanwezig is, zodat toetsenbordgebruikers dit kunnen bereiken.
Toets Principles in om te onthouden
- Zichtbare focus is vereist bij WCAG AA (2.4.7)
- 2.4.13 (AAA): 2px-omtrekgebied en 3:1 contrastverandering
- Gebruik :focus-visible in plaats van contouren te verwijderen
- Definieer de focusring als een ontwerpteken
- Een canvas-gerenderde gebruikersinterface heeft echte focusbare elementen nodig
Veelgestelde vragen
Bronnen
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Webdocumenten