Mostrar onde a interação está

Vamos descobrir juntos

1. 1

   Hover descreve um ponteiro sobre o elemento; focus-visible indica quando o navegador considera necessário mostrar foco. Nenhum deles substitui o outro. Mantenha links e botões nativos no HTML.

2. 2

   Use outline com cor e espessura visíveis e outline-offset para separá-lo da borda. Não remova o contorno sem oferecer um indicador adequado. Confira o foco contra as cores adjacentes em todos os temas usados.

3. 3

   CSS pode fazer algo parecer desabilitado, mas isso não implementa a restrição. Também não transforme um link em botão apenas com aparência. O botão do modelo é de treino e não executa uma operação de cadastro.

4. 4

   Use Tab, Shift+Tab e Enter no documento da prévia. Depois confira o arquivo local. Foco que sai da tela, some atrás de outra camada ou depende apenas de uma mudança sutil de cor precisa de revisão.

5. 5

   Confira também o tamanho e o espaço entre alvos de toque. WCAG 2.2 inclui o critério 2.5.8, com referência de 24 × 24 pixels CSS e exceções definidas, como espaçamento suficiente. Não o aplique como tamanho obrigatório de cada link em um parágrafo. Para os botões do projeto, prefira uma área confortável e teste com pessoas.