2526UPSA1.4.11-A-000
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.11-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.renfe.com/es/es
2.1.2. Código HTML:
<button style="background-color:#e0e0e0; border:1px solid #e0e0e0; color:#9e9e9e;">
Buscar
</button>
<input type="text" style="border:1px solid #e5e5e5;" placeholder="Origen">
Explicación del problema detectado:
El ejemplo no cumple el subcriterio 1.4.11-A porque los componentes de la interfaz, como botones e inputs, presentan un contraste insuficiente respecto al fondo. Los colores utilizados no alcanzan el ratio mínimo de 3:1 requerido para componentes no textuales, dificultando su identificación visual.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema supone una barrera grave para personas con baja visión, ya que los componentes de la interfaz no se distinguen claramente del fondo. Esto dificulta la interacción con la página, pudiendo impedir el uso correcto de formularios y botones.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://administracion.gob.es/
2.2.2 Código HTML:
<button style="background-color:#003366; border:2px solid #003366; color:#ffffff;">
Enviar
</button>
<input type="text" style="border:2px solid #003366;" placeholder="Nombre">
Explicación de la solución aplicada:
Este ejemplo cumple el subcriterio 1.4.11-A porque los componentes de la interfaz presentan un contraste suficiente respecto al fondo, alcanzando al menos una relación de 3:1. Los botones, iconos y bordes de los campos de formulario son claramente perceptibles, lo que permite a las tecnologías de apoyo y a las personas con baja visión identificar y utilizar correctamente los elementos interactivos.
