Referencia de las prácticas recomendadas para la accesibilidad en emails y formularios

Qué aprenderás

Aprende a hacer que tus emails y formularios de registro sean más accesibles. Al diseñar tus emails y formularios de registro, asegúrate de que los diseños sean accesibles para todos los destinatarios.

Accesibilidad en emails

Optimizar los asuntos y el texto de vista previa

Haz que el asunto y el texto de vista previa sean descriptivos, atractivos y breves.

Sigue las prácticas recomendadas generales de diseño de email

Seguir las prácticas recomendadas generales de diseño de emails hará que tus emails sean más accesibles:

• Añade texto alternativo descriptivo a las imágenes que transmitan información, incluidas las imágenes que se utilicen como enlaces. Deja el texto alternativo vacío para las imágenes puramente decorativas que no sean enlaces.
• Evita los emails de solo imágenes.
• Evita usar imágenes para transmitir detalles clave.
• Utiliza colores de texto y de fondo con suficiente contraste. El blanco y el negro ofrecen un contraste intenso; combinaciones como el gris y el azul oscuro o el rosa y el rojo oscuro dependen de los tonos. Comprueba los colores exactos con el comprobador de contraste de WebAIM.
• Usa encabezados para separar ideas.
• Usa enlaces descriptivos (p. ej., «Comprar la colección» en lugar de «Haz clic aquí para ir a la colección»).
• Estructura tus emails de forma lógica.

A continuación se muestra un ejemplo de un email optimizado para todos los destinatarios (izquierda) y otro que no lo está (derecha).

Accesibilidad en formularios de registro

Los formularios de registro de Klaviyo incluyen compatibilidad con el teclado y el lector de pantalla, pero aun así tienes que comprobar el contenido y el diseño del formulario para garantizar la accesibilidad. Los visitantes pueden usar Tab para desplazarse entre los campos y los botones, y pulsar Intro en un botón de envío con el foco. Pueden pulsar Escape para cerrar los formularios emergentes y desplegables.

Para que el foco del teclado sea más fácil de ver, selecciona Editar estilos en el editor de formularios y elige un color que contraste en Contorno de foco.

Diseño de formularios de registro

Al igual que con el diseño de email, te conviene seguir algunas directrices básicas para asegurarte de que todos tus destinatarios reciban la información que quieres compartir con ellos a través de tus formularios. Al diseñar formularios:

• Usa colores contrastados para el texto y el fondo, y comprueba los tonos exactos con el comprobador de contraste de WebAIM.
• Evita incluir información pertinente en las imágenes.
• Usa un lenguaje descriptivo en los enlaces.
• Estructura tus formularios de forma lógica.

A medida que creas el formulario de registro, Klaviyo comprueba si hay problemas comunes de accesibilidad. Selecciona Alertas en el editor de formularios y, después, revisa Alertas activas y sigue las instrucciones de cada tarjeta para corregir los problemas identificados.

Las comprobaciones automatizadas no detectan todos los problemas de accesibilidad. Prueba el formulario con un teclado y un lector de pantalla antes de publicarlo. Para que las actualizaciones se publiquen en el sitio, selecciona Publicar o programar, elige la opción Publicar ahora y haz clic en Publicar ahora.

A continuación se muestra un ejemplo de un formulario bien diseñado (derecha) y un formulario que no será accesible para todo el mundo (izquierda).

Recursos adicionales