Crea mensajes accesibles en Braze

Comprende por qué es importante tener en cuenta la accesibilidad en tu contenido de marketing y cómo puedes crear mensajes accesibles en Braze. Para más orientación, consulta nuestro curso Fundamentos de mensajería accesible en Braze Learning.

El contenido de marketing que excluye a personas con discapacidades, incluso de forma involuntaria, puede impedir que millones de personas interactúen con tu marca. La accesibilidad en el marketing consiste en permitir que todos experimenten tu marketing, comprendan tu comunicación y tengan la oportunidad de invertir en tu producto, servicio o marca, o convertirse en seguidores de ellos.

Al diseñar tus mensajes, tómate el tiempo extra para considerar cómo puedes hacer que tus diseños sean accesibles para todos tus clientes.

Accesibilidad en Braze

Apoyar la comunicación accesible significa mantenerse abierto, curioso y dispuesto a aprender. En Braze, nos importa ayudar a las personas a conectarse, y sabemos que hacer espacio para todos es parte de hacerlo bien. La accesibilidad no es algo que consideremos “terminado”, y agradecemos la oportunidad de seguir aprendiendo.

Si tienes algún comentario sobre la accesibilidad de Braze o los mensajes enviados desde Braze, nos encantaría que nos lo comunicaras. Abre el menú Soporte en la cabecera global y selecciona Compartir opiniones para enviarnos tus pensamientos.

Áreas de discapacidad a considerar

Esta sección está parcialmente adaptada de W3C: Diverse Abilities and Barriers.

• visual
• auditiva
• física
• cognitiva

Mejores prácticas

Crear contenido accesible no tiene por qué ser abrumador. Pequeñas decisiones bien pensadas pueden marcar una gran diferencia. Esta sección recorre consejos prácticos que ayudan a más personas a leer, navegar e interactuar con tus mensajes con éxito. Ya sea que estés ajustando tu texto, dando estilo a tus botones o añadiendo texto alternativo a las imágenes, cada mejora suma para una experiencia más inclusiva. Vamos a ello.

Contenido

Estructura y flujo

Empecemos por los cimientos. Cuando tu contenido tiene una estructura clara, es más fácil para todos seguirlo, especialmente para las personas que dependen de lectores de pantalla o navegación por teclado.

• Divide tu contenido en secciones: Usar encabezados, viñetas y listas ayuda a las personas a comprender y escanear rápidamente tu contenido, incluso cuando tienen prisa.
• No te saltes niveles de encabezado: Los encabezados le dan estructura a tu contenido, ayudando a los lectores a comprender rápidamente cómo se relacionan las secciones entre sí. Cuando te saltas niveles de encabezado (por ejemplo, saltar directamente de un H2 a un H4), rompes esta estructura lógica. Esto dificulta que los usuarios, especialmente los que usan lectores de pantalla, naveguen y comprendan tu mensaje con claridad. Sigue siempre una jerarquía lógica y secuencial de encabezados (H1 a H2 a H3, y así sucesivamente) para asegurarte de que tu contenido se mantenga organizado, accesible y fácil de seguir para todos.

Legibilidad

Una vez que tu estructura está en su lugar, el siguiente paso es asegurarte de que tus palabras sean realmente fáciles de leer. Esto significa mantener las cosas simples, escaneables y cómodas de leer en diferentes dispositivos y necesidades de usuario.

• Escribe oraciones cortas y claras: Las oraciones cortas son fáciles de entender para todos, especialmente para las personas que usan lectores de pantalla o que tienen dificultades para procesar información compleja. Escribe a un nivel de lectura de séptimo grado de Estados Unidos. Puedes usar recursos como Hemingway App para verificar el nivel de lectura de tu texto.
• Elige tamaños de fuente y espaciado legibles: El texto demasiado pequeño puede ser difícil de leer, especialmente en dispositivos móviles. Usa al menos 14 px para el texto del cuerpo. Haz los encabezados más grandes para que los usuarios puedan ver claramente la diferencia. Un espaciado extra entre líneas (alrededor de 1.5 de altura de línea) y entre párrafos mejora la legibilidad, especialmente para personas con necesidades visuales o cognitivas.
• Evita el texto justificado: El texto justificado crea un espaciado desigual entre palabras, lo que dificulta la lectura para personas con dislexia o discapacidades cognitivas. Considera alinear a la izquierda el contenido que ocupe más de dos líneas para idiomas de izquierda a derecha, o alinear a la derecha para idiomas de derecha a izquierda.
• Usa negrita, cursiva y mayúsculas con moderación: Enfatizar demasiado texto dificulta la lectura, especialmente para personas con dislexia o discapacidades visuales. Mantenlo simple.

Claridad y usabilidad

Finalmente, hablemos de los detalles más finos: las cosas que ayudan a los usuarios no solo a ver tu contenido, sino a comprenderlo e interactuar con él.

• Etiqueta claramente los enlaces y botones: Asegúrate de que el texto de tus enlaces y botones explique claramente qué sucederá a continuación. Esto ayuda a las personas que usan lectores de pantalla o navegan con teclado a saber qué esperar.
• Usa símbolos y emojis con moderación: Los caracteres especiales y los emojis pueden hacer que tu contenido sea divertido, pero pueden resultar confusos cuando los lee un lector de pantalla. Úsalos con moderación y asegúrate de que no reemplacen texto claro y descriptivo.
• Prueba el truncamiento: Siempre prueba tu texto enviando un mensaje de prueba a un dispositivo para asegurarte de que tu texto no se trunca. Si tu mensaje se está cortando, esto te perjudica tanto a ti como a tu audiencia, ya que impide que tu contenido les llegue.

Botones

Usa botones para indicar una acción, como enviar un formulario o reproducir un carrusel. Si estás navegando a una nueva URL, considera usar un enlace en su lugar.

Escribe texto claro y orientado a la acción

Al igual que el texto de los enlaces, las etiquetas de los botones deben describir claramente la acción. Un texto de botón efectivo es específico y orientado a la acción. Por ejemplo, “Enviar pedido” indica claramente a los usuarios qué sucederá cuando hagan clic, mientras que simplemente “Enviar” puede ser ambiguo. Cada etiqueta debe describir con precisión su acción prevista, para que los lectores de pantalla y todos los usuarios puedan comprender y predecir fácilmente el resultado al interactuar con tus botones.

Mantén el texto de los botones conciso para evitar el truncamiento. Si el texto de un botón es demasiado largo, puede cortarse con puntos suspensivos en lugar de ajustarse.

Usa suficiente contraste de color

El texto de los botones debe ser fácil de leer contra el color de fondo del botón. Verifica que el texto de tu botón cumpla con los mínimos de contraste de WCAG 2.2 AA:

• Relación de contraste de 4.5:1 para texto de tamaño normal (la mayoría de los botones)
• Relación de contraste de 3:1 para texto grande (generalmente superior a 18 pt)

Un alto contraste ayuda a que los botones sigan siendo legibles y clicables para todos, incluidos los usuarios con discapacidades visuales o aquellos que ven tu mensaje en entornos difíciles. Para más orientación, consulta la sección Contraste de color.

Haz que los botones sean fáciles de tocar

Asegúrate de que tus botones (y enlaces) sean lo suficientemente grandes y estén lo suficientemente separados para los usuarios en dispositivos móviles. Los objetivos táctiles pequeños o amontonados pueden ser frustrantes o imposibles de usar para usuarios con discapacidades motoras.

Enlaces

Usa enlaces para la navegación, como dirigir a los usuarios a una página externa.

Escribe texto de enlace descriptivo

Escribe texto de enlace que describa claramente a dónde llevará el enlace al usuario. Los usuarios de lectores de pantalla a menudo saltan de enlace en enlace como forma de escanear el contenido, así que asegúrate de que el texto de tu enlace pueda entenderse por sí solo. Evita frases como “haz clic aquí”, “más” y “haz clic para más detalles”, ya que son ambiguas cuando se leen fuera de contexto.

Por ejemplo, considera cómo escribirías un enlace para ver un informe meteorológico.

Como con todo el contenido, mantenlo directo con la menor cantidad de palabras extra posible.

Evita dar estilo de botón a los enlaces

Los editores de arrastrar y soltar de Braze generan HTML semántico de forma predeterminada, por lo que los enlaces no tienen estilo de botón allí. Sin embargo, si estás trabajando con HTML personalizado o haciendo cambios a nivel de código, ten esto en cuenta:

• Los enlaces (<a>) responden a la tecla Enter.
• Los botones (<button>) responden tanto a la tecla Enter como a la tecla Espacio.

Dar estilo de botón a un enlace puede confundir a las personas que navegan con teclado: podrían intentar presionar Espacio y esperar que funcione.

Usa el elemento correcto para la acción:

• Usa <button> para acciones, como enviar un formulario o abrir un modal.
• Usa <a> para navegación, como enlazar a otra página o archivo.

1
2
3
4
5
<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

Objetivos táctiles

Los objetivos táctiles son cualquier parte de tu mensaje que los usuarios tocan para realizar una acción, como botones, enlaces o iconos. Estos elementos deben ser lo suficientemente grandes y estar lo suficientemente separados para que las personas puedan tocarlos fácilmente, especialmente en dispositivos móviles.

Cuando los objetivos táctiles son demasiado pequeños o están demasiado juntos, puede ser frustrante o imposible para los usuarios con dificultades de movilidad o destreza interactuar con tu mensaje. Mejorar esto puede ayudar a reducir errores y crear una experiencia más fluida para todos.

Esto es lo que debes tener en cuenta:

• Usa un tamaño de objetivo táctil adecuado. Apunta a un tamaño mínimo de objetivo táctil de 44 x 44 píxeles. Esto se alinea con las directrices de WCAG 2.2 para objetivos táctiles y los estándares comunes de usabilidad móvil.
• Dale a cada objetivo espacio para respirar. Si los objetivos táctiles están demasiado juntos, como enlaces apilados o botones agrupados estrechamente, puede ser fácil fallar o tocar el incorrecto. Añade espaciado o relleno entre elementos para evitarlo.
• No dependas solo de los elementos visuales. Incluso los iconos pequeños pueden hacerse más usables con relleno adicional, permitiéndoles cumplir con los requisitos de tamaño mínimo sin alterar el diseño.
• Previsualiza en dispositivos móviles. Prueba tu mensaje en diferentes tamaños de pantalla y asegúrate de que los elementos interactivos sean fáciles de usar.

Mejorar los objetivos táctiles es una de las formas más efectivas de hacer tu mensaje más accesible en dispositivos móviles, y es una buena experiencia de usuario para todos.

Imágenes

Proporciona texto alternativo

El texto alternativo (texto alt) es una breve descripción del contenido o la función de una imagen que los lectores de pantalla y otras tecnologías de asistencia proporcionan a los usuarios. Para cada imagen significativa, escribe texto alternativo descriptivo para que los usuarios que no pueden ver los elementos visuales aún comprendan tu mensaje o llamada a la acción.

Evita imágenes de texto

Siempre que sea posible, evita colocar texto dentro de imágenes: los lectores de pantalla no pueden leer texto basado en imágenes, y los usuarios no pueden ajustar fácilmente el tamaño de fuente o el color para una mejor visibilidad. Considera estos consejos:

• Elimina texto donde puedas: Mueve cualquier texto descriptivo o promocional de la imagen a un campo de texto en tu mensaje. De esta manera, los usuarios pueden redimensionarlo o cambiar su color según sea necesario usando las preferencias de su dispositivo o navegador.
• Prueba la legibilidad y el contraste: Si debes mantener texto en la imagen, sigue las mejores prácticas de contraste de color y usa una fuente de escala grande. Esto significa que el texto debe tener al menos 18 puntos (aproximadamente 24 píxeles) para texto sin negrita o 14 puntos (aproximadamente 18 píxeles) si es negrita. Usar estos tamaños ayuda a que el texto siga siendo legible sin obligar a los usuarios a hacer zoom, y mejora el contraste general y la legibilidad del contenido. Prueba para confirmar que sigue siendo legible en pantallas más pequeñas.
• Proporciona texto alternativo: Para texto esencial que debe permanecer en la imagen, incluye texto alternativo que describa las palabras.

Cuando las imágenes contienen texto que no se puede editar, los usuarios con discapacidades visuales pierden la flexibilidad de hacer ajustes de lectura. Al separar el texto de las imágenes, ayudas a más usuarios a leer e interactuar con tu mensaje cómodamente.

Consejos para escribir texto alternativo

• Describe lo que realmente hay en la imagen
• Mantenlo breve, pero específico
• Evita “imagen de” o “foto de”
• Refleja el texto que aparece en la imagen
• Limítate al contexto relevante, sin jerga de marketing extra
• Considera el propósito de la imagen

Describe lo que realmente hay en la imagen

Los usuarios de lectores de pantalla dependen del texto alternativo para comprender el contenido o la función de una imagen. Evita el “lenguaje de marketing” genérico que no coincide con lo que se muestra visualmente.

Mantenlo breve, pero específico

Un texto alternativo conciso facilita el procesamiento para los usuarios. Incluye suficiente detalle para transmitir el propósito, pero omite lo innecesario. Como regla general, mantén el texto alternativo en 125 caracteres o menos. Si se necesita algo más que una frase breve u oración, considera usar uno de los métodos de descripción larga de W3C.

Evita “imagen de” o “foto de”

Los lectores de pantalla ya anuncian que es una imagen. Ve directamente a describir el tema.

Refleja el texto que aparece en la imagen

Si una imagen incluye texto esencial, pon esa información en el texto alternativo para que los usuarios no se la pierdan.

Limítate al contexto relevante, sin jerga de marketing extra

No rellenes el texto alternativo con términos SEO o llamadas a la acción que no estén directamente relacionadas con la imagen. Proporciona valor para quienes no pueden ver la imagen.

Considera el propósito de la imagen

Si una imagen funciona como un enlace o una llamada a la acción, describe la acción prevista (“Comprar”, “Enlace a”, “Registrarse”), no solo la etiqueta o el producto mostrado.

Si la imagen no tiene un propósito, hazlo saber también. Las imágenes decorativas, como los logos, deben tener una etiqueta alt vacía (alt="") para que los lectores de pantalla sepan que deben omitirla. Sin ella, generalmente se lee el nombre del archivo de imagen en su lugar.

Videos

Los videos son atractivos, pero si no son accesibles, corres el riesgo de excluir a parte de tu audiencia. Usa los siguientes consejos para hacer tu contenido de video más inclusivo:

• Proporciona subtítulos
• Proporciona controles de reproducción
• Evita la reproducción automática
• Evita contenido con destellos o parpadeos

Proporciona subtítulos

Incluye subtítulos en tus videos para que los usuarios puedan seguir los diálogos, efectos de sonido y otro contenido de audio. Los subtítulos ayudan a:

• Personas sordas o con dificultades auditivas
• Espectadores que ven en un entorno sin sonido
• Hablantes no nativos que prefieren leer junto con el audio

Los subtítulos se pueden activar o desactivar, permitiendo a los usuarios elegir lo que mejor les funcione.

Proporciona controles de reproducción

Asegúrate de que tu video incrustado incluya controles de reproducción accesibles, como reproducir, pausar, silenciar y buscar, para que los usuarios puedan interactuar con él de la forma que mejor les funcione.

Evita la reproducción automática

Siempre que sea posible, evita configurar los videos para que se reproduzcan automáticamente. La reproducción automática puede ser molesta o desorientadora para:

• Usuarios que dependen de lectores de pantalla o navegación por teclado
• Personas con sensibilidad al movimiento
• Cualquier persona en un entorno silencioso (como un lugar de trabajo o una situación nocturna)

Deja que los usuarios elijan cuándo reproducir un video incluyendo controles claros.

Evita contenido con destellos o parpadeos

No incluyas videos con efectos de destellos o parpadeos, especialmente a alta frecuencia. Estos pueden provocar convulsiones en usuarios con epilepsia fotosensible y causar molestias a otros.

Contraste de color

Un contraste de color suficiente ayuda a garantizar que tus mensajes sean fáciles de leer para todos, incluidas las personas con baja visión o aquellas que ven tu contenido en condiciones de brillo o entornos difíciles. Apunta a relaciones de contraste que cumplan con los requisitos de nivel AA de WCAG 2.2:

• Relación de contraste de 4.5:1 para texto normal (piensa en texto del cuerpo, botones y enlaces)
• Relación de contraste de 3:1 para texto grande (piensa en encabezados y etiquetas más grandes)

Puedes probar tus opciones de color usando la herramienta de verificación de contraste de WebAim.

HTML personalizado

Si usas HTML personalizado en tus mensajes:

• Usa HTML semántico. Esto significa usar los elementos HTML correctos para su propósito previsto en lugar de dar estilo a un elemento para que parezca otro. La mayoría de los elementos HTML tienen su propio soporte de accesibilidad incorporado.
• Establece el atributo lang dentro de tu HTML para identificar el idioma de tu contenido. Los lectores de pantalla usan diferentes bibliotecas de sonido para cada idioma según la pronunciación y las características de ese idioma. Si no se especifica, un lector de pantalla asume que el contenido está escrito en el idioma predeterminado que el usuario eligió al configurar el lector de pantalla. Si el mensaje no está realmente en el idioma predeterminado, entonces el lector de pantalla podría no pronunciar el mensaje correctamente.

1
<html lang="en-us">

• Usa atributos ARIA para dar contexto adicional. Estos atributos proporcionan información adicional a las tecnologías de asistencia, ayudando a aclarar el rol, estado o propiedades de los elementos de la interfaz de usuario que de otro modo podrían no ser claros.

Atributos ARIA

Cuando usas código personalizado en los editores de Braze, puedes usar Accessible Rich Internet Applications (ARIA) para proporcionar soporte de accesibilidad adicional para los usuarios que dependen de tecnología de asistencia. Los roles y atributos ARIA ayudan a los lectores de pantalla a interpretar tu contenido con mayor claridad, especialmente cuando usas elementos que no transmiten significado por sí mismos (como <div> o <span>).

Aquí hay algunos ejemplos que son especialmente útiles en contextos de mensajería:

• aria-label
• aria-labelledby
• aria-hidden=”true”
• role=”presentation”
• aria-live=”polite”

aria-label

aria-label añade un nombre accesible a elementos que no tienen texto visible. Si estás usando un icono sin texto (como una papelera o una “X” para cerrar), alguien que use un lector de pantalla no sabrá qué hace, a menos que lo etiquetes. aria-label le da voz a ese icono.

1
2
3
<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledby conecta un elemento con algo que ya tiene una etiqueta visible. Así que si tienes un banner o una región que debe leerse en voz alta con un título, puedes usar aria-labelledby para decirle a la tecnología de asistencia: “Oye, usa ese encabezado de allí para nombrar esta parte.”

1
2
<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true" oculta cosas de los lectores de pantalla. Es útil para texto o elementos visuales que no transmiten un significado importante, como un destello, una marca de verificación o un emoji usado puramente por estilo.

Esto mantiene la experiencia más limpia para los usuarios de lectores de pantalla, que de otro modo podrían escuchar contenido redundante o confuso. También es útil para ocultar cosas como contenido de acordeón fuera de pantalla que aún no se ha expandido.

1
<span aria-hidden="true">✔️</span>

En general, es mejor usar alt="" para imágenes decorativas e iconos en lugar de aria-hidden="true". Mientras que el HTML semántico es ampliamente soportado por todos los lectores de pantalla y software de asistencia, el soporte de ARIA varía. Incluso si usas aria-hidden, deberías incluir igualmente un atributo alt vacío.

role=”presentation”

role="presentation" le dice a la tecnología de asistencia que ignore los elementos que son solo de diseño, como las tablas de maquetación. Por ejemplo, los correos electrónicos a menudo usan tablas solo para alinear elementos. Sin este rol, los lectores de pantalla podrían asumir que tu maquetación es una tabla de datos y comenzar a leer números de fila y columna.

1
<table role="presentation">...</table>

Los correos electrónicos creados en el editor de correo electrónico de arrastrar y soltar tienen los elementos de presentación marcados automáticamente con el atributo ARIA role="presentation".

aria-live=”polite”

aria-live="polite" anuncia actualizaciones cuando el contenido cambia sin necesidad de interacción del usuario. Úsalo cuando muestres actualizaciones dinámicas dentro de un mensaje, como éxitos, errores u otras notificaciones.

1
<div aria-live="polite">Your preferences have been saved.</div>

Pruebas automatizadas de accesibilidad

Para ayudarte a identificar y corregir problemas de accesibilidad de forma temprana, Braze ofrece pruebas automatizadas de accesibilidad en las siguientes áreas:

• Inbox Vision para correos electrónicos
• Escáner de accesibilidad para mensajes creados con nuestro editor HTML (por ejemplo, In-App Messages HTML, Content Blocks HTML, pies de correo electrónico personalizados, páginas de adhesión voluntaria por correo electrónico y páginas de cancelación de suscripción por correo electrónico).

Estas pruebas verifican tu mensaje contra el estándar de Pautas de Accesibilidad al Contenido Web (WCAG), un conjunto de estándares técnicos reconocidos internacionalmente para contenido accesible. Cualquier problema que pueda detectarse automáticamente se marca y categoriza por gravedad para ayudarte a priorizar.

Lo que las pruebas automatizadas pueden y no pueden detectar

Las pruebas automatizadas de accesibilidad son un excelente punto de partida, pero no pueden detectar todo. Algunos problemas necesitan un toque humano para evaluarse correctamente, especialmente cuando el contexto o el diseño visual juegan un papel en cómo los usuarios experimentan tu correo electrónico.

Puedes ver algunos problemas marcados como Necesita revisión. Estos son casos en los que el verificador no puede determinar con certeza si algo es un problema de accesibilidad. Cuando eso suceda, te recomendamos revisarlo manualmente.

Algunos ejemplos de lo que las herramientas automatizadas no pueden detectar de forma fiable incluyen:

• Si el orden de foco de los elementos interactivos sigue una secuencia lógica
• Si el contenido es completamente operable con un teclado, sin requerir un ratón
• Si el texto alternativo describe significativamente una imagen
• Si los encabezados se usan correctamente para organizar el contenido
• Si los enlaces y botones están claramente etiquetados y son fáciles de entender
• Si los objetivos táctiles son lo suficientemente grandes y están espaciados adecuadamente
• Si el texto sobre imágenes de fondo cumple con los requisitos de contraste de color
• Si las instrucciones o etiquetas son claras y útiles para todos los usuarios

Estas limitaciones no son exclusivas de Braze—son comunes a todas las herramientas automatizadas de accesibilidad. Las verificaciones automatizadas no pueden simular cada tecnología de asistencia, lector de pantalla o necesidad de usuario. Por eso la accesibilidad no es una verificación única—es una práctica continua.

Incluso si tu mensaje pasa todas las verificaciones automatizadas, sigue siendo importante:

• Revisar cuidadosamente los problemas marcados, especialmente los etiquetados como Necesita revisión.
• Probar manualmente cuando sea posible, especialmente para patrones de diseño e interacción.
• Usar herramientas como lectores de pantalla, navegación solo con teclado y zoom del navegador para simular diferentes necesidades de acceso.

Al combinar las pruebas automatizadas con una revisión manual cuidadosa, detectarás más problemas potenciales y crearás campañas más inclusivas y usables para cada destinatario.