Estados de foco acessíveis: projetando o foco visível do teclado

Por que os estados de foco são importantes

Pessoas que usam teclado, dispositivo móvel ou ampliador de tela movem-se pela página, um elemento por vez. O indicador de foco é a única maneira de saberem onde estão. Remover o contorno do navegador sem substituí-lo é uma das falhas de acessibilidade mais comuns.

O que WCAG 2.2 requer

O critério de sucesso 2.4.7 Foco Visível (nível AA) requer que qualquer interface operável por teclado tenha um modo onde o indicador de foco esteja visível. WCAG 2.2 adicionou 2.4.13 Focus Appearance (nível AAA), que descreve um indicador forte: pelo menos tão grande quanto a área de um perímetro de 2 pixels de espessura CSS do componente, com uma taxa de contraste de pelo menos 3:1 entre os estados focado e não focado.

:foco-visível

MDN explica que :focus-visible se aplica quando um elemento tem foco e o navegador decide, usando heurística, que o foco deve ser mostrado, normalmente para uso do teclado. Isso permite mostrar anéis de foco fortes para usuários de teclado, sem mostrá-los sempre que alguém clica em um botão com o mouse. Use-o em vez de remover contornos.

Projetando o anel

Orientação prática:

• Use um contorno ou anel com deslocamento para que não se misture ao elemento.
• Verifique o contraste em cada plano de fundo em que o elemento pode aparecer; um anel bicolor ajuda.
• Mantenha-o consistente entre os componentes, definidos como um token no seu sistema de design.
• Nunca confie apenas em uma mudança sutil de cor.
• Certifique-se de que o elemento em foco não esteja oculto atrás de cabeçalhos fixos.

Foco e movimento

Um anel de foco pode aparecer com uma transição muito curta, mas deve parecer instantâneo. Evite animações que atrasem o anel ou movam o elemento e, para componentes personalizados desenhados em tela, certifique-se de que ainda haja um elemento real focável na página para que os usuários do teclado possam acessá-lo.