Spanish (Español) translation by steven (you can also view the original English article)
Los formularios son una parte muy importante de la experiencia web. Catalogan solicitudes, completan compras, ayudan a los flujos de registro y desempeñan un papel crucial en las métricas clave de tu negocio. Aquí hay algunos consejos y ejemplos de mejores prácticas para garantizar que tus formularios sean utilizables, lógicos y efectivos para una amplia gama de usuarios.
1. ¡Prueba la herramienta!
Una de las mejores formas de comprender las limitaciones de tu diseño es probarlo. Si bien es posible que no tengas acceso a todas las tecnologías de asistencia existentes en el mercado, hay muchas extensiones del navegador y software gratuito que puedes usar para simular escenarios de accesibilidad. Pueden ayudarte, por ejemplo, a navegar con un lector de pantalla; una herramienta que navega por una página a través de la estructura del encabezado y el texto del enlace. También puedes ver videos de lectores de pantalla en acción, para tener una idea de cómo pueden manejar tus formularios.
Algunos ejemplos populares de lectores de pantalla incluyen: JAWS de Freedom Scientific, Window-Eyes de GW Micro y Dolphin Supernova de Dolphin.
2. Indica claramente la información necesaria
Un problema que enfrentan los usuarios con discapacidades es una barrera para comprender qué información se requiere. Asegúrate de indicar claramente lo que se necesita. Si algo es opcional, hazlo saber con una etiqueta.
3. Agrupar elementos relacionados visualmente
Se pueden agrupar varias opciones para una categoría determinada en cualquier formulario. La etiqueta de un formulario no solo debe pasar las pruebas de contraste visual, sino que también debe estar muy cerca del campo del formulario (para que estén visualmente asociadas entre sí, de acuerdo con los principios de Gestalt).
También considera el hecho de que el texto del marcador de posición (también conocido como Placeholder) de un campo de formulario puede crear desafíos para que las personas recuerden qué información pertenece a ese campo y para corregir errores. Una vez que un campo de formulario está enfocado, el texto del marcador de posición desaparece, así que asegúrate de que no sea de importancia primordial.
4. Sé específico al indicar el estado
Además de la accesibilidad, es una buena práctica indicar claramente los estados a través de tu diseño. Esto puede significar que los estados de error sean locales para el elemento de formulario específico donde existe el error, o como en el ejemplo a continuación, utilizando estados de casilla de verificación establecidos que sean reconocibles y diferenciados.
5. Asociar etiquetas significativas
Es importante agregar etiquetas al marcado HTML que sean específicas y significativas. Asegúrate de que tus etiquetas sean lo suficientemente descriptivas como para que el usuario pueda actuar solo sobre ellas, lo que puede ser el caso si estás utilizando un lector de pantalla.
1 |
<label for="address">Enter your address:</label><br> |
2 |
<textarea id="address" name="addresstext"></textarea> |
6. Activar el envío desde una acción explícita
Los botones de acción como "Guardar" y "Enviar" pueden activar la siguiente acción en un flujo, como la confirmación o la actualización de una página. Tener un botón de acción separado ayuda a evitar acciones de navegación o incluso clics accidentales.
Conclusión
Los malos formularios pueden ser tediosos o molestos en el mejor de los casos, y una barrera seria para la conversión en el peor. Las guías para mejorar estas prácticas las enumeraremos a continuación y te ayudarán a optimizar la experiencia de tu formulario.
Aprende más
AccesibilidadCómo hacer casillas de verificación y botones de radio accesibles personalizados
AccesibilidadCómo probamos la accesibilidad en Envato (herramientas y consejos)
AccesibilidadLa importancia de los niveles de rumbo para la tecnología de asistencia
AccesibilidadConsejos de accesibilidad del teclado usando HTML y CSS
By
