This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Jak vypadá zaostřovací rám?
Rámeček focus ukazuje, kde jsou uživatelé klávesnice. Úroveň AA (2.4.7) vyžaduje pouze, aby byla viditelná; tenký, bledý rám to plní. Kritérium úrovně AAA 2.4.13 specifikuje opatření: Fokální rám zakrývá prvek s čárou nejméně 2 CSS pixelů tloušťky, a oblast, která se mění v ohnisku má kontrast nejméně 3: 1 mezi soustředěnými a nezaměřenými stavy.
Co kritérium vyžaduje
Dvě opatření, obě měřitelná. Za prvé, oblast: ohniskový rám je přinejmenším stejně velký jako 2 pixelové tlusté obrysy kolem prvku; Samotný podtržení nebo 1pixelový rám nestačí. Za druhé, kontrast: pixely, které se mění při zaostření se liší od stavu bez zaostření nejméně o 3: 1. Tmavě modrý rám na tmavě modrém tlačítku propadá, bílý rám s tmavým lemem na každém pozadí existuje.
Rámec, který pracuje na jakémkoli pozadí
Protože tlačítka mohou být světlá a tmavá, dvoubarevný fokus je úspěšný: obrys 2 pixelů v tučné barvě s 2 pixelů vzdálenost k prvku (outline-ofset) a další stín v kontra-color. Proto je kontrast udržován na světlých a tmavých površích. Výchozí zaměření prohlížeče je často příliš tenké nebo je odstraněno z stylesheet s obrysem: žádný; Tento zákaz je nejčastějším důvodem neviditelného zaměření.
Takhle se s tím vypořádáváme
Měření zaměřuje každý ovládací prvek, porovnává pixely před a po zaostření a měří tloušťku a kontrast změny. Tím je kritérium plně automaticky ověřitelné; zkouška úrovně AA (viditelná ostření) poskytuje stejné údaje. Kritérium patří do kategorie AAA ve znalostech; ve zprávě je tloušťka a kontrast podle referenční hodnoty.
Pří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;
}Nejméně 2 pixely obrysu, a změněné pixely se liší od nezaměřeného stavu o 3: 1. Bílý stín udržuje kontrast na tmavých površích.
- Odstranit každý obrys: žádný z stylesheet, který není okamžitě definovat jeho vlastní zaměření.
- Definujte globální zaměření s: focus- viditelný: obrys 3 pixelů, outline-ofset 2 pixelů, v barvě 3: 1 na pozadí.
- Přidejte stín v prot- barva tak, aby rám zůstal viditelný na světle a tmavé plochy.
- Projděte stránku pomocí klávesy a zkontrolujte každý stav: menu, tlačítka, pole, odkazy v textu.
