Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung
Toegankelijkheid
Hoe ziet een focusframe eruit?
De focus frame toont toetsenbord gebruikers waar ze zijn. Niveau AA (2.4.7) vereist alleen dat het zichtbaar is; Een dun, bleek kader vervult dit. Niveau AAA-criterium 2.4.13 bevat maatregelen: Het brandpuntsframe omsluit het element met een lijn van minstens 2 CSS pixels dikte, en het gebied dat verandert bij focus heeft een contrast van ten minste 3:1 tussen gerichte en niet-gerichte toestanden.
Wat het criterium vereist
Twee maatregelen, beide meetbaar. Ten eerste het gebied: het brandpuntsframe is minstens zo groot als een 2 pixel dikke omtrek rond het element; Een underscore alleen of een 1-pixel frame is niet genoeg. Ten tweede, het contrast: de pixels die bij focus veranderen verschillen van de toestand zonder focus door tenminste 3:1. Een donkerblauw frame op een donkerblauwe knop valt door, een wit frame met donkere zoom op elke achtergrond bestaat.
Een kader dat op elke achtergrond werkt
Omdat knoppen licht en donker kunnen zijn, is een tweekleurige focus succesvol: een omtrek van 2 pixels in een vetgedrukte kleur met 2 pixels afstand tot het element (uitlijning) en een extra schaduw in de tegenkleur. Zo wordt het contrast gehandhaafd op lichte en donkere oppervlakken. De standaard focus van de browser is vaak te dun of wordt verwijderd van het stylesheet met overzicht: geen; Dit verbod is de meest voorkomende reden voor onzichtbare focus.
Zo gaan we ermee om
De meting richt zich op elk controleelement, vergelijkt de pixels voor en na de focus en meet de dikte en het contrast van de verandering. Dit maakt het criterium volledig automatisch te testen; de niveau AA test (focus zichtbaar) levert dezelfde gegevens. Het criterium behoort tot de categorie AAA in kennis; in het rapport, de dikte en het contrast per referentie.
Voorbeelden
Dun bleek brandpuntsframe
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Minstens 2 pixels overzicht, en de veranderde pixels verschillen van de niet-gefocuste toestand door 3:1. De witte schaduw houdt het contrast op donkere oppervlakken.
- Verwijder elke omtrek: geen van de stylesheet, die niet direct zijn eigen focus definieert.
- Definieer een globale focus met:focus-zichtbaar: omtrek van 3 pixels, omtrek-offset van 2 pixels, in een 3:1 kleur op de achtergrond.
- Voeg een schaduw toe in de tegenkleur zodat het frame zichtbaar blijft op lichte en donkere oppervlakken.
- Ga door de pagina met de tabsleutel en controleer elke staat: menu, knoppen, velden, links in de tekst.
