Contraste dos controles de formulário
A Silktide verifica se os campos de formulário, como caixas de texto e menus suspensos, se destacam visualmente da área ao redor. Um campo que se mistura à página é difícil de encontrar e usar para pessoas com visão reduzida.
Por que isso é importante
Para preencher um formulário, primeiro é preciso ver onde estão os campos. Um campo de entrada branco, sem borda, em uma página branca fica invisível para muitas pessoas com baixa visão — elas não conseguem identificar onde clicar ou digitar. Os formulários geralmente são a parte mais importante de um site (contato, checkout, cadastro), portanto, campos que não podem ser encontrados resultam diretamente em consultas e vendas perdidas. Esse também é um requisito de nível das .
Como corrigir
- Dê ao controle uma borda ou contorno visível com uma de pelo menos 3:1 em relação ao fundo ao redor. Normalmente, isso pode ser feito com uma única linha na sua folha de estilos.
/* Campo invisível em uma página branca */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Corrigido: a borda tem contraste de pelo menos 3:1 com o fundo */
input { background: #fff; border: 1px solid #767676; }
- Como alternativa, preencha o próprio controle com uma cor que tenha contraste de pelo menos 3:1 com o que está ao redor.
Como a Silktide faz esta verificação
- Encontra todos os campos de entrada de texto, áreas de texto e menus suspensos visíveis (
<input>,<textarea>e<select>) na página, ignorando os elementos que você excluiu da verificação. - Ignora os tipos de entrada cuja aparência é desenhada pelo navegador ou pelo sistema operacional: caixas de seleção, botões de opção, botões de envio/redefinição/imagem, seletores de arquivos e campos de entrada ocultos.
- Determina a cor de fundo efetiva do controle e a cor de fundo da área ao redor, levando em conta a transparência e os elementos pai.
- Aprova o controle se o preenchimento tiver contraste de pelo menos 3:1 com o fundo ao redor. Caso contrário, testa cada uma das cores da borda e do contorno do controle em relação ao fundo ao redor e aprova se alguma delas atingir 3:1.
- Relata os controles em que nada atinge 3:1, mostrando o melhor contraste encontrado.
Solução de problemas
Efeitos que não podemos medir
Sombras projetadas, brilhos, gradientes e imagens de fundo não têm uma única cor que possa ser medida, portanto, o contraste fornecido apenas por esses efeitos não é considerado. Da mesma forma, um controle posicionado sobre vários fundos diferentes (por exemplo, com position: absolute) pode não ser mensurável. Se um controle sinalizado for realmente distinto, o resultado.
Botões, caixas de seleção e botões de opção não são verificados
Os botões não precisam de um limite visível, desde que seu rótulo seja legível, e as caixas de seleção e os botões de opção geralmente são desenhados pelo navegador. Por isso, esta verificação os exclui deliberadamente.
Menus suspensos com estilo personalizado
Algumas bibliotecas de componentes ocultam o controle nativo e desenham sua própria substituição. A Silktide ignora o controle nativo oculto, e a substituição visível é avaliada como qualquer outro elemento sempre que possível.