Contraste de los controles de formulario
Silktide comprueba que los campos de formulario, como cuadros de texto y menús desplegables, se destaquen visualmente del área que los rodea. Un campo que se confunde con la página es difícil de localizar y usar para las personas con visión reducida.
Por qué es importante
Para rellenar un formulario, primero hay que ver dónde están los campos. Un campo de entrada blanco sin borde en una página blanca es invisible para muchas personas con baja visión: no pueden saber dónde hacer clic o escribir. Los formularios suelen ser la parte más importante de un sitio web (contacto, finalización de compra, registro), por lo que los campos que no se pueden encontrar se traducen directamente en consultas y ventas perdidas. Esto también es un requisito de .
Cómo solucionarlo
- Proporcione al control un borde o contorno visible con una de al menos 3:1 respecto al fondo que lo rodea. Esto suele ser un cambio de una sola línea en su hoja de estilos.
\/* Campo invisible sobre una página blanca *\/
input { background: #fff; border: 1px solid #f2f2f2; }
\/* Corregido: el borde contrasta al menos 3:1 con el fondo *\/
input { background: #fff; border: 1px solid #767676; }
- Como alternativa, rellene el propio control con un color que contraste al menos 3:1 con su entorno.
Cómo lo comprueba Silktide
- Encontrar cada entrada de texto, área de texto y menú desplegable visibles
(
<input>,<textarea>y<select>) en la página, omitiendo cualquier elemento que haya excluido de la comprobación. - Omitir los tipos de entrada cuya apariencia es dibujada por el navegador o el sistema operativo: casillas de verificación, botones de opción, botones de enviar/restablecer/imagen, selectores de archivos y campos ocultos.
- Determinar el color de fondo efectivo del control y el color de fondo del área circundante, teniendo en cuenta la transparencia y los elementos padre.
- Aprobar el control si su relleno contrasta al menos 3:1 con el fondo circundante. En caso contrario, probar cada uno de los colores del borde y del contorno del control frente al fondo circundante, y aprobar si alguno de ellos alcanza 3:1.
- Informar de los controles en los que nada alcanza 3:1, mostrando el mejor contraste encontrado.
Solución de problemas
Efectos que no podemos medir
Las sombras paralelas, los brillos, los degradados y las imágenes de fondo no
poseen un único color que medir, por lo que el contraste aportado únicamente
por estos efectos no se contabiliza. Del mismo modo, un control situado sobre
varios fondos distintos (por ejemplo, con position: absolute) puede no ser
medible. Si un control marcado es realmente distinguible,
el hallazgo.
No se comprueban los botones, las casillas de verificación ni los botones de opción
Los botones no necesitan un límite visible siempre que su etiqueta sea legible, y las casillas de verificación y los botones de opción suelen ser dibujados por el navegador, por lo que esta comprobación los omite deliberadamente.
Menús desplegables con estilo personalizado
Algunas bibliotecas de componentes ocultan el control nativo y dibujan su propio sustituto. Silktide omite el control nativo oculto y, cuando es posible, el sustituto visible se evalúa como cualquier otro elemento.