This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Akadálymentesség
Hogy néz ki egy fókuszkeret valójában?
A fókuszkeret a billentyűzet használóit mutatja, hol vannak. Az AA szint (2.4.7.) csak azt igényli, hogy látható legyen; ezt vékony, halvány keret tölti ki. Az AAA szint 2.4.13. kritériuma a következő intézkedéseket határozza meg: A fókuszkeret legalább 2 CSS pixel vastagságú vonallal veszi körül az elemet, és a fókuszban változó terület kontrasztja legalább 3: 1 a fókuszált és a nem fókuszált államok között.
Mit igényel a kritérium
Két intézkedés, mindkettő mérhető. Először is, a terület: a gyújtókeret legalább akkora, mint egy 2 pixel vastag körvonal az elem körül; Egy alulbecsülés vagy egy 1 pixel keret nem elég. Másodszor, a kontraszt: a fókuszban változó pixelek legalább 3: 1-re eltérnek a fókuszálás nélküli állapottól. Egy sötét kék keret egy sötét kék gomb esik át, egy fehér keret sötét szegély minden háttér létezik.
A keret, amely működik minden háttér
Mivel a gombok lehetnek könnyű és sötét, a kétszínű fókusz sikeres: vázlat 2 pixel egy merész színű, 2 pixel távolság az elem (outline-offset) és egy további árnyék az ellenszín. Így a kontraszt világos és sötét felületeken marad. Az alapértelmezett fókusz a böngésző gyakran túl vékony, vagy eltávolítják a styesheet vázlattal: nincs; Ez a tilalom a láthatatlan fókuszálás leggyakoribb oka.
Így kell ezt kezelni
A mérés az egyes vezérlőelemeket összpontosítja, a fókuszálás előtt és után összehasonlítja a pixeleket, és a változás vastagságát és kontrasztját méri. Így a kritérium teljesen automatikusan tesztelhető; az AA-szintű vizsgálat (látható fókusz) ugyanazokat az adatokat adja meg. A kritérium a tudásban az AAA kategóriába tartozik; a jelentésben referenciánként a vastagság és a kontraszt.
Példák
Vékony, halvány fókuszkeret
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Legalább 2 pixel vázlat, és a megváltozott pixelek 3: 1-re különböznek a fókuszálatlan állapottól. A fehér árnyék sötét felületeken tartja a kontrasztot.
- Távolítsa el az egyes körvonalakat: a stilesheet-ből nem, amely nem határozza meg azonnal a saját fókuszát.
- Határozza meg a globális fókusz: fókuszált látható: körvonala 3 pixel, outline-offset 2 pixel, egy 3: 1 szín a háttérben.
- Adjunk hozzá egy árnyékot az ellenszínhez, hogy a keret világos és sötét felületeken is látható maradjon.
- Menjen át az oldalon a lap billentyűvel, és ellenőrizze minden állapotot: menü, gombok, mezők, linkek a szövegben.
