Existen muchas formas de completar un formulario. Las personas pueden usar tu formulario en su smartphone mientras están paradas en un autobús lleno de gente, con un lector de pantalla o desde una laptop vieja. Veamos cómo puedes asegurarte de que el formulario funcione en diferentes dispositivos y contextos.
Cómo asegurarte de que el formulario funcione para usuarios de teclado
Una buena primera prueba para asegurarte de que se pueda acceder a tu formulario es completarlo usando solo el teclado.
Abre el formulario y trata de navegar con la clave tab.
¿Está 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 contorno cuando la entrada está activa?
Ese es el indicador de enfoque.
Puedes agregar indicadores de enfoque con la seudoclase de CSS :focus.
input:focus {
outline: 4px solid #222;
}
Obtén más información para 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 pestañas siga el orden visual de pestañas. ¿Cómo puedes probar el orden de tabulación? Usa la tecla Tab para completar el formulario. ¿Notas algún salto ilógico en la navegación? Asegúrate de que el orden del DOM coincida con el orden visual.
Obtén más información para garantizar que el orden visual de la página cumpla con el orden del DOM.
Ayuda a los usuarios a completar el formulario en dispositivos táctiles
¡Genial! Te aseguraste de que el formulario funciona 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íalo.
¿Tuviste que presionar varias veces para seleccionar un control de formulario?
Es posible que el problema sea que las áreas para presionar son demasiado pequeñas.
Asegúrate de que el tamaño del objetivo de presión de un botón sea de al menos 48 px y de que cada <input> y <select> sea lo suficientemente grande como para presionarlo.
También puedes agregar suficiente espacio entre los controles del formulario para ayudar a los usuarios a navegar por tu formulario en dispositivos táctiles.
Asegúrate de que los usuarios obtengan un teclado optimizado
En los módulos anteriores, aprendiste a activar un teclado en pantalla diferente usando los atributos type o inputmode.
Abre la demostración en tu teléfono y presiona el campo del número de teléfono.
Ten en cuenta que los números se muestran de forma predeterminada en el teclado en pantalla, junto con otros caracteres que podrías 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.
Usa un teléfono para probarlo por tu cuenta y verifica si puedes ingresar con facilidad todos los caracteres necesarios para completar un número de teléfono.
Si te interesa saber cómo funciona el teclado en pantalla con otro type, prueba type="email" en la demostración.
Asegúrate de que los botones del formulario no estén ocultos
Imagina que completaste un formulario largo
y estás listo para enviarlo. Pero ¿dónde está el botón Enviar?
Es posible que se encuentre detrás de la barra de herramientas del navegador, en la parte inferior de la pantalla.
Una forma de garantizar que los botones sean visibles es usar la función de CSS env().
Obtén información para asegurarte de que las interfaces de usuario del dispositivo no oculten los botones.
Asegúrate de que el formulario funcione en diferentes plataformas
Intenta probar tus formularios en la mayor cantidad posible de dispositivos. ¿Tienes una laptop vieja? Abre el navegador predeterminado y prueba tu formulario. ¿Tu amigo tiene una tablet? Úsalo prestado y prueba el formulario allí también.
¿Algunos de los estilos se ven diferentes en un navegador? En un módulo posterior, puedes aprender a garantizar que tus diseños funcionen en todas las plataformas.
BrowserStack ofrece cuentas de prueba gratuitas para proyectos de código abierto y Browserling ofrece una prueba gratuita para probar en diferentes navegadores, dispositivos y sistemas operativos.
Ayuda a los usuarios a completar tus formularios en diferentes contextos
Las personas no solo utilizan distintos navegadores, dispositivos y sistemas operativos. Las personas también usan tus formularios en diferentes contextos. Pruébalo. ¿Está saliendo el sol en este momento? Toma tu teléfono y sal afuera. Usar el formulario con luz brillante es una buena forma de probar si se pueden usar las relaciones de contraste.
Obtén más información sobre la accesibilidad de color y contraste.
Asegúrate de que el formulario funcione con mala conectividad
Digamos que viajas a algún lugar en tren. Abres una página web en tu teléfono. Te preguntas cuánto puede tardar tanto la carga de un sitio web {8/}.
Puedes simular conexiones lentas y diferentes tipos de red con WebPageTest o DevTools.
Obtén más información sobre cómo realizar pruebas con ancho de banda bajo y latencia alta.
Ayuda a los usuarios a usar tu formulario estén donde estén
Imagina que estás caminando hacia una cita. De repente, tu teléfono suena, respondes la llamada y, al mismo tiempo, recibes una alerta de tu empresa de seguros para completar el formulario de solicitud que comenzaste. Abres el formulario mientras intentas completarlo mientras caminas y hablas.
Recuerda que las personas usarán tus formularios en muchos contextos diferentes. En situaciones estresantes, mientras realizas otras acciones estés donde estés. Para ayudar a los usuarios, asegúrate de que el formulario sea fácil de usar.
Establece un límite de tiempo para completar el formulario. Intenta simular condiciones imperfectas en las que puedes probar tu formulario.
Asegúrate de compartir los resultados de la prueba
Documenta todas las pruebas y comparte los resultados con tu equipo. Esto ayudará a priorizar los elementos de acción para garantizar que todos los miembros del equipo estén al tanto de las tareas más importantes.
Obtén más información para compartir resultados de pruebas.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las pruebas multiplataforma
¿Puedes mostrar indicadores de enfoque solo a los usuarios de teclado?
:focus-visible.:focus-detected.:focus-shown.Recursos
- WebPageTest: Pruebas de rendimiento y optimización del sitio web
- Pruebas con ancho de banda bajo y latencia alta
- Cómo compartir los resultados de las pruebas