Puedes completar un formulario de muchas maneras. Las personas pueden usar el formulario en sus smartphones mientras están en un autobús lleno de gente, un lector de pantalla o una laptop antigua. Veamos cómo puedes asegurarte de que tu formulario funcione en diferentes dispositivos y contextos.
Asegúrate de que tu formulario funcione para los usuarios de teclado
Una buena primera prueba para asegurarte de que se pueda acceder al formulario es llenarlo usando solo el teclado.
Abre el formulario y trata de navegar con la tecla tab.
¿Queda claro qué campo del formulario está activo actualmente?
Para ayudar a los usuarios a comprender qué campo del formulario está activo,
puedes usar indicadores de enfoque.
Pruébalo.
Usa la tecla tab para navegar a la entrada.
¿Ves el esquema cuando la entrada está activa?
Ese es el indicador del enfoque.
Puedes agregar indicadores de enfoque con el
Seudoclase :focus de CSS.
input:focus {
outline: 4px solid #222;
}
Obtén más información sobre diseñar indicadores de enfoque accesibles.
Ayuda a los usuarios a navegar por tu formulario
Otra buena prueba de usabilidad y accesibilidad es asegurarse de que el orden lógico de tabulaciones sigue el orden visual de tabulación. ¿Cómo puedes probar el orden de pestañas? Presiona toda la tecla Tab para desplazarte por el formulario. ¿Notas algún salto de navegación ilógico? Asegúrate de que el orden del DOM coincida con el orden visual.
Obtén más información sobre cómo asegúrate de que el orden visual de la página siga el orden DOM.
Ayuda a los usuarios a completar el formulario en dispositivos táctiles
¡Genial! Te aseguraste de que tu formulario funcione con el teclado. Ahora, veamos cómo puedes asegurarte de que también funcione en dispositivos táctiles, como teléfonos celulares.
Abre el formulario en el dispositivo táctil.
completa todos los campos y envía el formulario.
¿Tuviste que presionar varias veces para seleccionar un control de formulario?
Es posible que las áreas para presionar sean demasiado pequeñas.
Asegúrate de que
el tamaño del objetivo táctil de un botón es de al menos 48 px
y que cada <input> y <select> sean lo suficientemente grandes como para acceder a ellos.
También puede agregar suficiente espacio entre los controles del formulario para ayudar a los usuarios a navegar por el formulario en dispositivos táctiles.
Asegúrate de que los usuarios obtengan un teclado optimizado
En módulos anteriores, aprendiste a activar un teclado en pantalla diferente
con los atributos type o inputmode.
Abierta
la demostración
en tu teléfono y toca en el campo del número de teléfono.
Observa que los números se muestran de forma predeterminada en el teclado en pantalla,
junto con otros caracteres que puedas necesitar para un número de teléfono.
Usa type="tel" para obtener un teclado en pantalla optimizado para ingresar números de teléfono.