Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. UX

6 consejos para la accesibilidad en el diseño de formularios

by
Length:ShortLanguages:

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.

First nName rises to the top of the field on input focus Warbyparkercom
El nombre se eleva a la parte superior del campo cuando se enfoca en el input de warbyparker.com

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.

Bad example
Ejemplo del estado de una casilla de verificación incorrecta

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.

Enter your address with text area
Buen ejemplo de ingresar tu dirección con un área de texto

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.