De todas las puertas que se atascan en un sitio web, los formularios son las más comunes — y las de mayores consecuencias, porque un formulario suele ser el lugar donde alguien intenta hacer algo: contactarte, registrarse, comprar. Un formulario que un usuario de teclado no puede recorrer no es un defecto menor. Es una tienda cerrada con las luces encendidas. La buena noticia: los formularios también son una de las cosas más fáciles de arreglar, y puedes probar y reparar casi todo en bastante menos de una hora, sin necesidad de reconstruir nada.
Aquí está la idea completa antes de los pasos: algunas personas navegan por completo con el teclado — Tab para avanzar, Shift+Tab para retroceder, Enter o Espacio para activar. Personas con discapacidades motrices, muchos usuarios mayores, quienes usan lector de pantalla, y también muchos usuarios avanzados. Si tu formulario funciona solo con el teclado, funciona para casi todos. Así que eso es exactamente lo que vamos a probar y arreglar.
Antes de empezar: lo que necesitas
Solo necesitas esto
- El formulario que quieres arreglar, abierto en un navegador — un formulario de contacto, de registro, de pago, lo que sea.
- Tu teclado, y la disciplina de no tocar el ratón. Ese es todo el equipo de prueba.
- Acceso para editar la página, o alguien que pueda hacerlo — los arreglos son pequeños cambios de HTML.
- Unos veinte minutos de tranquilidad. La mayoría de los formularios tienen dos o tres puertas atascadas, no veinte.
Si puedes rellenar y enviar tu formulario sin tocar nunca el ratón, también podrán las personas que no tienen otra opción. Esa única prueba es la mayor parte de la accesibilidad.
El arreglo, en cinco pasos
Ve por estos en orden. El primero es puro diagnóstico — no cambias nada hasta que hayas sentido dónde se atasca.
Recórrelo con Tab, sin tocar nada más
Haz clic una vez en la parte superior de la página, luego guarda el ratón. Pulsa Tab repetidamente. Observa cómo se mueve el resaltado. ¿Puedes llegar a cada campo, casilla y al botón de enviar, en un orden que tenga sentido? Anota cada lugar donde el resaltado desaparece, se salta algo o se queda atascado. Esas son las puertas que debes abrir.
Dale a cada campo una etiqueta real y vinculada
Este es el arreglo más importante de todos. Cada campo necesita una etiqueta visible ligada a él de forma programática — en HTML, un <label for="..."> que coincida con el id del campo. El texto de marcador de posición por sí solo no cuenta: desaparece al escribir y los lectores de pantalla pueden ignorarlo. Un campo que un lector de pantalla no puede nombrar es un campo que su usuario no puede rellenar.
Asegúrate de poder ver dónde estás
A medida que avanzas con Tab, debería haber un contorno claro sobre lo que esté seleccionado. Si un diseñador anterior lo eliminó (outline: none es un culpable común), vuelve a poner un estilo de foco visible. Un usuario de teclado que no puede ver dónde está escribe a ciegas. Un contorno sencillo y de alto contraste es todo lo que hace falta.
Haz que los errores sean alcanzables, no solo rojos
Si un campo está mal, no lo señales solo con color — di qué está mal con palabras, ligadas al campo, para que un lector de pantalla lo anuncie. "Ingresa un correo electrónico válido" junto al campo es mejor que un borde rojo silencioso. Un error que nadie puede percibir es un error que nadie puede corregir.
Envíalo — solo con el teclado
Avanza con Tab hasta el botón de enviar y pulsa Enter o Espacio. ¿Se envió? ¿El foco se movió después a algún lugar con sentido — un mensaje de éxito que de verdad puedas encontrar? Recorre todo el formulario una vez más, de principio a fin, sin tocar el ratón. Si puedes completarlo, has abierto la puerta.
El único hábito que previene todo esto
Una vez que lo hayas hecho, llevarás contigo un reflejo que vale más que cualquier lista de verificación: antes de dar por terminado un formulario, recórrelo con Tab. Treinta segundos, sin ratón. Detecta casi todo, y convierte la accesibilidad de algo que auditas después en algo que simplemente construyes. La prueba de teclado es el control de calidad más barato del trabajo web, y resulta ser el más amable.
Y fíjate en lo que realmente estás haciendo aquí — no añadir una función especial para unos pocos especiales, sino quitar barreras que nunca debieron estar ahí. El formulario siempre estuvo pensado para dejar entrar a la gente. Solo te estás asegurando de que lo haga.
▲ El porqué Este es el hacer de "Tu sitio debería dejar entrar a todos" Esa guía sostiene que la accesibilidad es no-extracción. Aquí verás cómo abrir una de las puertas más atascadas: los formularios. Léela →Cuando estés listo
¿Quieres formularios que todos puedan completar?
Construcciones limpias con la accesibilidad integrada desde la primera línea — etiquetas reales, foco visible, errores alcanzables, todo navegable por teclado — para que ningún visitante se tope con una puerta cerrada justo en el momento en que intenta llegar a ti. Probado con el teclado, tal como está construido todo este centro.
Ver servicios de privacidad y protección →