This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Prístupnosť
Ako vyzerá rám zaostrenia?
Focus frame zobrazuje užívateľov klávesnice tam, kde sú. Úroveň AA (2.4.7) vyžaduje iba to, aby bola viditeľná; to spĺňa tenký, bledý rám. Úroveň AAA kritérium 2.4.13 špecifikuje opatrenia: Fokálny rám zakrýva prvok priamkou s hrúbkou najmenej 2 CSS pixelov a plocha, ktorá sa mení pri zameraní, má kontrast medzi sústredenými a nesústredenými stavmi najmenej 3:1.
Čo vyžaduje kritérium
Dve opatrenia, obe merateľné. Po prvé, oblasť: ohniskový rám je aspoň taký veľký ako obrys hrúbky 2 pixelov okolo prvku; Samotné podčiarknutie alebo 1-pixelový rám nestačí. Po druhé, kontrast: pixely, ktoré sa menia pri zameraní sa líšia od stavu bez zamerania najmenej o 3:1. Tmavomodrý rám na tmavomodrom tlačidle padne, na každom pozadí existuje biely rám s tmavým lemom.
Rámec, ktorý funguje na všetkých pozadí
Pretože tlačidlá môžu byť svetlé a tmavé, dvojfarebné zameranie je úspešné: obrys 2 pixelov v tučnej farbe s 2 pixelmi vzdialenosť od prvku (outline-offset) a ďalší tieň v protifarebnej farbe. Kontrast je teda udržiavaný na ľahkých a tmavých povrchoch. Predvolené zameranie prehliadača je často príliš tenké alebo je odstránené zo štýlového hárku s obrysom: žiadne; Tento zákaz je najčastejším dôvodom na neviditeľné zameranie.
Takto sa s tým vysporiadame
Meranie zameriava každý riadiaci prvok, porovnáva pixely pred a po zaostrení a meria hrúbku a kontrast zmeny. Toto kritérium je plne automaticky testovateľné; test úrovne AA (viditeľný) poskytuje rovnaké údaje. Kritérium patrí do kategórie AAA v poznatkoch; v správe hrúbka a kontrast podľa referencie.
Príklady
Tenký bledý ohniskový rám
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Minimálne 2 pixely a zmenené pixely sa líšia od nesústredeného stavu o 3:1. Biely tieň udržiava kontrast na tmavých povrchoch.
- Odstrániť každý obrys: žiadny zo štýlu, ktorý nedefinuje okamžite svoje vlastné zameranie.
- Definovať globálne zameranie s:focus-vidible: obrys 3 pixelov, obrys-offset 2 pixely, v 3:1 farby na pozadí.
- Pridať tieň v protifarbe tak, aby rám zostal viditeľný na ľahkých a tmavých povrchoch.
- Prejdite stránku s kľúčom karty a skontrolujte každý stav: menu, tlačidlá, polia, odkazy v texte.
