La accesibilidad web es clave para garantizar que todos los usuarios, incluidas las personas con discapacidades visuales, puedan interactuar con formularios sin barreras. Un problema frecuente es cuando los controles de formulario basados en texto no se redimensionan adecuadamente al aumentar el tamaño del texto, lo que dificulta la legibilidad y usabilidad.
Este fallo común, identificado como F80 en WCAG 2.1, compromete el cumplimiento del Criterio de Conformidad 1.4.4: Redimensionar texto. Si los controles de entrada de texto, botones o áreas de texto no se ajustan correctamente, los usuarios pueden tener problemas para ingresar y leer la información en los formularios.
Acerca de este fallo
El fallo F80 ocurre cuando los controles de formulario no se redimensionan junto con el texto al aumentar hasta un 200% su tamaño. Esto puede hacer que la información ingresada sea difícil de leer o, en casos más graves, quedar truncada o fuera de los límites del campo.
Escenarios comunes del fallo:
- Formularios con campos de entrada de texto que no ajustan su tamaño cuando el usuario incrementa la escala del texto.
- Botones con etiquetas de texto que no se amplían y quedan desproporcionados respecto al contenido circundante.
- Áreas de texto que no aumentan de tamaño, provocando la pérdida de visibilidad del texto ingresado.
Ejemplos
Ejemplo incorrecto 1: Controles de formulario con tamaño fijo
<style>
input, textarea, button {
width: 200px;
height: 30px;
font-size: 12px; /* Tamaño de fuente fijo */
}
</style>
<form>
<label for=»name»>Nombre:</label>
<input type=»text» id=»name» name=»name»>
<label for=»email»>Correo electrónico:</label>
<input type=»email» id=»email» name=»email»>
<button type=»submit»>Enviar</button>
</form>
🔴 Problema:
- El tamaño del texto puede aumentar, pero el control del formulario no se ajustará, dificultando la legibilidad.
- No hay escalabilidad en los elementos del formulario.
Solución correcta: Usar unidades relativas
<style>
input, textarea, button {
width: 100%;
height: auto;
font-size: 1em; /* Tamaño de fuente escalable */
padding: 0.5em;
}
</style>
<form>
<label for=»name»>Nombre:</label>
<input type=»text» id=»name» name=»name»>
<label for=»email»>Correo electrónico:</label>
<input type=»email» id=»email» name=»email»>
<button type=»submit»>Enviar</button>
</form>
✅ ¿Qué mejora?
- Los campos de texto y botones escalan correctamente al aumentar el tamaño del texto.
- Se utilizan unidades relativas (
em,%) en lugar de valores fijos.
Ejemplo incorrecto 2: Tamaño de fuente no escalable en botones
<style>
button {
font-size: 12px; /* Tamaño fijo */
}
</style>
<button>Enviar</button>
🔴 Problema: Si el usuario aumenta el tamaño del texto en el navegador, la etiqueta del botón seguirá siendo difícil de leer.
Solución correcta: Permitir escalabilidad
<style>
button {
font-size: 1em; /* Permite que el tamaño del texto sea ajustable */
padding: 1em;
}
</style>
<button>Enviar</button>
✅ ¿Qué mejora?
- El texto del botón aumenta proporcionalmente con la configuración del usuario.
- La legibilidad mejora significativamente.
Ejemplo correcto: Solución ideal
<style>
form {
max-width: 600px;
width: 100%;
}
label {
font-size: 1.2em;
}
input, textarea, button {
width: 100%;
font-size: 1em;
padding: 0.8em;
border-radius: 5px;
}
button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
<form>
<label for=»name»>Nombre:</label>
<input type=»text» id=»name» name=»name»>
<label for=»email»>Correo electrónico:</label>
<input type=»email» id=»email» name=»email»>
<button type=»submit»>Enviar</button>
</form>
✅ ¿Qué mejora?
- Los campos de texto y botones son completamente escalables.
- Se mejora la accesibilidad con una buena relación de contraste en los botones.
- La interfaz sigue siendo funcional al aumentar el tamaño del texto en un 200%.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar tamaños fijos de
pxpara fuentes en los formularios. - No permitir que los controles de entrada y botones se redimensionen.
- No probar el formulario con diferentes configuraciones de aumento de texto.
Cómo evitar estos errores:
- Utilizar unidades relativas como
em,%orempara escalabilidad. - Asegurar que los controles de entrada crezcan con el aumento del tamaño de texto.
- Probar el formulario aumentando el texto hasta un 200% para validar su comportamiento.
Preguntas frecuentes sobre el fallo F80
¿Por qué es importante que los formularios sean escalables?
Porque los usuarios con baja visión necesitan aumentar el tamaño del texto para leer y completar los formularios sin dificultades.
¿Puedo usar píxeles (px) en mi CSS?
Es recomendable evitar valores fijos en fuentes y tamaños de controles. En su lugar, usa unidades relativas (em, %, rem).
¿Qué pasa si el formulario pierde diseño al escalar?
Asegúrate de que el diseño sea flexible y usa max-width, flexbox o grid para mantener una estructura ordenada.
¿Cómo puedo probar si mi formulario cumple con WCAG?
Puedes probar aumentando el tamaño del texto en las configuraciones del navegador o con herramientas de prueba de accesibilidad como Lighthouse o WAVE.
¿Todos los navegadores soportan unidades relativas como em?
Sí, todos los navegadores modernos soportan estas unidades y permiten la escalabilidad de los elementos.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F80: Fallo del Criterio de Conformidad 1.4.4 cuando los controles de formulario basados en texto no cambian de tamaño cuando el texto representado visualmente cambia de tamaño hasta un 200%
- Comprender el criterio de éxito 1.4.4: Cambiar el tamaño del texto
- Buenas prácticas para formularios accesibles
Pruebas y validación
Procedimiento
- Aumenta el texto en la configuración del navegador hasta un 200%.
- Ingresa datos en los formularios y verifica que el texto en los campos sea legible.
- Confirma que los controles de formulario se escalan correctamente.
Resultados esperados
- ✅ Si los controles de formulario se redimensionan adecuadamente, cumplen con WCAG.
- ❌ Si los controles no permiten la ampliación del texto correctamente, fallan en el criterio común 1.4.4 y deben corregirse.
Asegurar que los controles de formulario sean escalables mejora la accesibilidad para personas con baja visión. Usar tamaños relativos y probar con ajustes de texto garantiza una mejor experiencia de usuario.
🚀 ¿Necesitas una auditoría de accesibilidad para tu sitio web? Contáctanos y optimiza tu web para todos. 💡