Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung
Acessibilidade
O que é que uma moldura de foco se destaca?
O frame de foco mostra usuários de teclado onde eles estão. Nível AA (2.4.7) requer apenas que seja visível; Uma moldura fina e pálida cumpre isso. O critério de nível AAA 2.4.13 especifica as medidas: O quadro focal envolve o elemento com uma linha de pelo menos 2 pixels de espessura CSS, e a área que muda em foco tem um contraste de pelo menos 3:1 entre estados focados e não focados.
O que o critério requer
Duas medidas, ambas mensuráveis. Primeiro, a área: a moldura focal é pelo menos tão grande quanto um contorno de 2 pixels em torno do elemento; Um sublinhado sozinho ou um quadro de 1 pixel não é suficiente. Em segundo lugar, o contraste: os pixels que mudam em foco diferem do estado sem foco por pelo menos 3:1. Um quadro azul escuro em um botão azul escuro cai através, um quadro branco com bainha escura em cada fundo existe.
Um framework que funciona em qualquer fundo
Como os botões podem ser claros e escuros, um foco de duas cores é bem sucedido: um contorno de 2 pixels em uma cor arrojada com 2 pixels de distância ao elemento (desativação de linha) e uma sombra adicional na contra-cor. Assim, o contraste é mantido em superfícies claras e escuras. O foco padrão do navegador é muitas vezes muito fino ou é removido da folha de estilo com contorno: nenhum; Esta proibição é a razão mais comum para o foco invisível.
É assim que lidamos com isso
A medição foca cada elemento de controle, compara os pixels antes e depois do foco, e mede a espessura e o contraste da mudança. Isto torna o critério totalmente testável automaticamente; o teste de nível AA (foco visível) fornece os mesmos dados. O critério pertence à categoria AAA no conhecimento; no relatório, a espessura e o contraste por referência.
Exemplos
Quadro focal pálido fino
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Pelo menos 2 pixels de contorno, e os pixels alterados diferem do estado não focado em 3:1. A sombra branca mantém o contraste em superfícies escuras.
- Remover cada contorno: nenhum da folha de estilo, que não define imediatamente o seu próprio foco.
- Defina um foco global com: foco-visível: contorno de 3 pixels, contorno-offset de 2 pixels, em uma cor 3:1 para o fundo.
- Adicione uma sombra na contra-cor para que o quadro permaneça visível em superfícies claras e escuras.
- Passe pela página com a tecla tabulação e verifique cada estado: menu, botões, campos, links no texto.
