Construir mensajes accesibles en Braze

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

Los contenidos de marketing que excluyen a las personas con discapacidad, aunque sea involuntariamente, pueden impedir que millones de personas interactúen con tu marca. La accesibilidad en marketing consiste en facilitar que todo el mundo experimente tu marketing, reciba y comprenda tu comunicación, y tenga la oportunidad de invertir en tu producto, servicio o marca, o de convertirse en fan de ellos.

Cuando diseñes tu mensajería, tómate un tiempo extra para considerar cómo puedes hacer que tus diseños sean accesibles a todos tus clientes.

Accesibilidad en Braze

Apoyar la comunicación accesible significa permanecer abierto, curioso y dispuesto a aprender. En Braze, nos preocupamos por ayudar a las personas a conectarse, y sabemos que hacer sitio a todo el mundo forma parte de hacerlo bien. La accesibilidad no es algo que consideremos “hecho”, y agradecemos la oportunidad de seguir aprendiendo.

If you have feedback about the accessibility of Braze or messages sent from Braze, we’d love to hear from you. Open the Support menu in the global header and select Share feedback to send us your thoughts.

Áreas de discapacidad a considerar

Esta sección está parcialmente adaptada de W3C: Capacidades diversas y barreras.

• visual
• hearing
• physical
• cognitive

Buenas prácticas

Crear contenidos accesibles no tiene por qué ser abrumador. Las elecciones pequeñas y meditadas pueden marcar una gran diferencia. Esta sección recorre consejos prácticos que ayudan a que más personas lean, naveguen e interactúen con éxito con tus mensajes. Tanto si ajustas tu texto, como si das estilo a tus botones o añades texto alternativo a las imágenes, cada ajuste contribuye a una experiencia más inclusiva. Vamos a profundizar.

Contenido

Estructura y flujo

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

• Divide tu contenido en secciones: Utilizar encabezamientos, viñetas y listas ayuda a las personas a comprender y escanear rápidamente tu contenido, incluso cuando tienen prisa.
• No te saltes los niveles de encabezamiento: Los encabezamientos estructuran tu contenido, ayudando a los lectores a comprender rápidamente cómo se relacionan las secciones entre sí. Cuando te saltas niveles de encabezamiento (por ejemplo, saltando directamente de un H2 a un H4), rompes esta estructura lógica. Esto dificulta a los usuarios, especialmente a los que utilizan lectores de pantalla, la navegación y la comprensión clara de tu mensaje. Sigue siempre una jerarquía lógica y secuencial de encabezamientos (H1 a H2 a H3, etc.) para asegurarte de que tu contenido permanece organizado, accesible y fácil de seguir para todos.

Legibilidad

Una vez establecida la estructura, el siguiente paso es asegurarte de que tus palabras sean realmente fáciles de leer. Esto significa mantener las cosas sencillas, escaneables y cómodas de leer en todos los dispositivos y necesidades de los usuarios.

• Escribe frases cortas y claras: Las frases cortas son fáciles de entender para todos, especialmente para las personas que utilizan lectores de pantalla o que tienen problemas para procesar información compleja. Escribe a un nivel de lectura de séptimo grado de Estados Unidos. Puedes utilizar recursos como la aplicación Hemingway para comprobar el nivel de lectura de tu texto.
• Elige tamaños de letra y espaciado legibles: Un texto demasiado pequeño puede ser difícil de leer, sobre todo en el móvil. Utiliza al menos 14px para el cuerpo del texto. Haz los títulos más grandes para que los usuarios puedan ver claramente la diferencia. El espaciado adicional entre líneas (alrededor de 1,5 de altura de línea) y párrafos mejora la legibilidad, especialmente para las personas con necesidades visuales o cognitivas.
• Evita el texto justificado: El texto justificado crea un espaciado desigual entre las palabras, lo que dificulta la lectura a las personas con dislexia o discapacidades cognitivas. Considera la posibilidad de alinear a la izquierda los contenidos que ocupen más de dos líneas en las lenguas de izquierda a derecha, o a la derecha en las lenguas de derecha a izquierda.
• Utiliza negrita, cursiva y mayúsculas con moderación: Enfatizar demasiado el texto dificulta la lectura, sobre todo a las personas con dislexia o deficiencias visuales. Hazlo sencillo.

Claridad y usabilidad

Por último, hablemos de los detalles más sutiles: las cosas que ayudan a los usuarios no sólo a ver tu contenido, sino a comprenderlo e interactuar con él.

• Etiqueta claramente los enlaces y botones: Asegúrate de que el texto de tu enlace y botón explica claramente lo que ocurre a continuación. Ayuda a las personas que utilizan lectores de pantalla o navegan con un teclado a saber qué esperar.
• No te pases con los símbolos y emojis: Los caracteres especiales y los emojis pueden hacer que tu contenido sea divertido, pero pueden ser confusos cuando los leen los lectores de pantalla. Utilízalos con moderación y asegúrate de que no sustituyen a un texto claro y descriptivo.
• Prueba de truncamiento: Comprueba siempre tu texto enviando un mensaje de prueba a un dispositivo para asegurarte de que no se trunca. Si tu mensaje se corta, esto te perjudica tanto a ti como a tu audiencia, ya que impide que tu contenido les llegue.

Botones

Utiliza botones para indicar una acción, como enviar un formulario o reproducir un carrusel. Si navegas a una nueva URL, considera utilizar un enlace en su lugar.

Escribe textos claros y orientados a la acción

Al igual que el texto del enlace, las etiquetas de los botones deben describir claramente la acción. El texto de un botón eficaz es específico y está orientado a la acción. Por ejemplo, “Enviar pedido” indica claramente a los usuarios lo que ocurrirá cuando hagan clic, mientras que “Enviar” simplemente 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 del botón conciso para evitar que se trunque. Si el texto de un botón es demasiado largo, puede cortarse con una elipsis en lugar de envolverlo.

Utiliza un contraste de color suficiente

El texto del botón debe ser fácil de leer sobre el color de fondo del botón. Comprueba que el texto de tu botón cumple los mínimos de contraste 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 3:1 para texto grande (normalmente por encima de 18pt)

El alto contraste ayuda a que los botones sigan siendo legibles y se pueda hacer clic en ellos para todo el mundo, incluidos los usuarios con deficiencias visuales o los 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 pulsar

Asegúrate de que tus botones (y enlaces) sean lo suficientemente grandes y estén lo suficientemente separados para los usuarios de dispositivos móviles. Los objetivos táctiles pequeños o abarrotados pueden resultar frustrantes o imposibles de interactuar para los usuarios con discapacidad motora.

Enlaces

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

Escribe un texto de enlace descriptivo

Escribe un texto de enlace que describa claramente adónde llevará el enlace al usuario. Los usuarios de lectores de pantalla suelen pasar de un enlace a otro para hojear el contenido, así que asegúrate de que el texto de tu enlace se sostiene 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, piensa en cómo podrías escribir un enlace para ver un parte meteorológico.

Como con todo el contenido, que sea sencillo y con el menor número posible de palabras adicionales.

Evita estilizar los enlaces como botones

Los editores de arrastrar y soltar de Braze producen HTML semántico predeterminado, por lo que los enlaces no tienen el estilo de los botones. Sin embargo, si trabajas con HTML personalizado o haces cambios a nivel de código, ten esto en cuenta:

• Los enlaces (<a> ) responden a la tecla Intro.
• Los botones (<button> ) responden a las teclas Intro y Espacio.

Estilizar un enlace para que parezca un botón puede confundir a las personas que navegan con un teclado: pueden intentar pulsar la barra espaciadora y esperar que funcione.

Utiliza el elemento adecuado para la acción:

• Utiliza <button> para acciones, como enviar un formulario o abrir un modal.
• Utiliza <a> para navegar, por ejemplo para 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 espaciados para que la gente pueda tocarlos con facilidad, especialmente en los dispositivos móviles.

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

Esto es lo que debes tener en cuenta:

• Haz que sea fácil de pulsar. Procura que el tamaño mínimo del objetivo táctil sea de 44 x 44 píxeles. Esto se ajusta a las directrices WCAG 2.2 para objetivos táctiles y a las normas comunes de usabilidad móvil.
• Da un respiro a cada objetivo. Si los objetivos de pulsación están demasiado juntos -como enlaces apilados o botones muy agrupados- puede ser fácil pasar por alto o pulsar el objetivo equivocado. Añade espaciado o relleno entre los elementos para evitarlo.
• No te fíes sólo de lo visual. Incluso los iconos pequeños pueden hacerse más utilizables con un relleno adicional, que les permita cumplir los requisitos de tamaño mínimo sin alterar el diseño.
• Vista previa en el móvil. Prueba tu mensaje en diferentes tamaños de pantalla y asegúrate de que los elementos interactivos son fáciles de usar.

Mejorar los objetivos táctiles es una de las formas más eficaces de hacer que tu mensaje sea más accesible en el móvil, y es una buena experiencia de usuario para todos.

Imágenes

Proporcionar texto alternativo

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

Evita las imágenes de texto

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

• Elimina el texto donde puedas: En su lugar, traslada cualquier texto descriptivo o promocional de la imagen a un campo de texto de tu mensaje. De este modo, los usuarios pueden cambiar el tamaño o el color según lo necesiten utilizando las preferencias de su dispositivo o navegador.
• Comprueba la legibilidad y el contraste: Si debes mantener el texto en la imagen, sigue las mejores prácticas de contraste de color y utiliza una fuente a gran escala. Esto significa que el texto debe tener al menos 18 puntos (unos 24 píxeles) si no está en negrita, o 14 puntos (unos 18 píxeles) si está en negrita. Utilizar 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. Haz una prueba para confirmar que sigue siendo legible en pantallas más pequeñas.
• Proporciona un texto alternativo: Para el texto esencial que debe permanecer en la imagen, incluye un texto alternativo que describa las palabras.

Cuando las imágenes contienen texto que no puede editarse, los usuarios con deficiencias visuales pierden flexibilidad para realizar ajustes de lectura. Al separar el texto de las imágenes, ayudas a que más usuarios lean e interactúen con tu mensaje cómodamente.

Consejos para escribir texto alternativo

• Describe lo que hay realmente en la imagen
• Sé breve, pero específico
• Evita “imagen de” o “foto de”
• Refleja el texto que aparece en la imagen
• Cíñete al contexto pertinente, sin jerga adicional de marketing
• Considera la finalidad de la imagen

Describe lo que hay realmente en la imagen

Los usuarios de lectores de pantalla confían en el 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.

Sé breve, pero específico

Un texto alternativo conciso facilita el procesamiento por parte de los usuarios. Incluye suficientes detalles para transmitir el propósito, pero omite cualquier palabrería. Como regla general, mantén el texto alternativo en 125 caracteres o menos. Si es necesario algo más que una frase u oración breve, considera la posibilidad de utilizar uno de los métodos de descripción larga del W3C.

Evita “imagen de” o “foto de”

Los lectores de pantalla ya anuncian una imagen. Pasa 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.

Cíñete al contexto pertinente, sin jerga adicional de marketing

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

Considera la finalidad de la imagen

Si una imagen funciona como un enlace o una llamada a la acción, describe la acción prevista (“Compra”, “Enlace a”, “Regístrate”), no sólo la etiqueta o el producto mostrado.

Si la imagen no tiene una finalidad, hazlo saber también. Las imágenes decorativas, como los logotipos, deben tener una etiqueta alt vacía (alt="") para que los lectores de pantalla sepan que deben omitir su anuncio. Sin ella, normalmente se lee el nombre del archivo de imagen.

Videos

Los videos son atractivos, pero si no son accesibles, corres el riesgo de excluir a parte de tu audiencia. Utiliza los siguientes consejos para que tus contenidos de video sean más inclusivos:

• Proporcionar subtítulos
• Proporcionar controles de reproducción
• Evita la reproducción automática
• Evita el contenido intermitente o estroboscópico

Proporcionar subtítulos

Incluye subtítulos en tus videos para que los usuarios puedan seguir el diálogo, los efectos de sonido y otros contenidos de audio. Los subtítulos ayudan:

• Personas sordas o con dificultades auditivas
• Espectadores en un entorno sin sonido
• Hablantes no nativos que prefieren leer en voz alta

Los subtítulos se pueden alternar entre activarlos y desactivarlos, permitiendo a los usuarios elegir lo que más les convenga.

Proporcionar controles de reproducción

Asegúrate de que tu video incrustado incluye 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 convenga.

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 resultar chocante o desorientadora para:

• Usuarios que utilizan lectores de pantalla o navegación por teclado
• Personas con sensibilidad al movimiento
• Cualquier persona en un entorno tranquilo (como un lugar de trabajo o un entorno nocturno)

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

Evita el contenido intermitente o estroboscópico

No incluyas videos con efectos intermitentes o estroboscópicos, especialmente con una frecuencia elevada. Pueden desencadenar ataques en usuarios con epilepsia fotosensible y causar molestias a los demás.

Contraste de color

Un contraste de color suficiente ayuda a garantizar que tus mensajes sean fáciles de leer para todo el mundo, incluidas las personas con baja visión o las que ven tu contenido en condiciones de mucha luz o difíciles. Procura que las relaciones de contraste cumplan los requisitos del nivel AA de las WCAG 2.2:

• Relación de contraste de 4,5:1 para texto normal (piensa en el cuerpo del texto, botones y enlaces)
• Relación de contraste 3:1 para texto grande (piensa en títulos y etiquetas grandes)

Puedes probar tus elecciones de color utilizando la herramienta de comprobación de contraste de WebAim.

HTML personalizado

Si utilizas algún HTML personalizado en tu mensajería:

• Utiliza HTML semántico. Esto significa utilizar los elementos HTML correctos para su propósito, en lugar de estilizar un elemento para que parezca otro. La mayoría de los elementos HTML tienen incorporado su propio soporte de accesibilidad.
• Establece el atributolang dentro de tu HTML para identificar el idioma en el que está tu contenido. Los lectores de pantalla utilizan diferentes bibliotecas de sonidos 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á en la lengua predeterminada, es posible que el lector de pantalla no pronuncie el mensaje correctamente.

1
<html lang="en-us">

• Utiliza atributos ARIA para dar un contexto adicional. Estos atributos proporcionan información adicional a las tecnologías de asistencia, ayudando a aclarar la función, el estado o las propiedades de los elementos de la IU que, de otro modo, podrían no estar claros.

Atributos ARIA

Cuando utilices código personalizado en los editores de Braze, puedes utilizar Aplicaciones de Internet Ricas Accesibles(ARIA) para proporcionar soporte de accesibilidad adicional a 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 utilizas elementos que no transmiten significado por sí solos (como <div> o <span>).

He aquí algunos ejemplos especialmente útiles en contextos de mensajería:

• aria-etiqueta
• aria-etiquetadapor
• aria-hidden=”true”
• role=”presentación”
• aria-live=”cortés”

aria-etiqueta

aria-label añade un nombre accesible a los elementos que no tienen texto visible. Si utilizas un icono sin texto (como una papelera o una “X” de cerrar), alguien que utilice un lector de pantalla no sabrá lo que hace, a menos que lo etiquetes. aria-label da voz a ese icono.

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

aria-etiquetadapor

aria-labelledby conecta un elemento a 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 utilizar aria-labelledby para decirle a la tecnología de asistencia: “Oye, utiliza ese encabezamiento de ahí 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 a los lectores de pantalla. Es útil para textos o elementos visuales que no transmiten un significado importante, como un destello, una marca de verificación o un emoji utilizado únicamente por estilo.

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

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

En general, es mejor utilizar alt="" para imágenes decorativas e iconos que aria-hidden="true". Mientras que el HTML semántico es ampliamente compatible con todos los lectores de pantalla y software de asistencia, la compatibilidad con ARIA varía. Aunque utilices aria-hidden, debes incluir un atributo alt vacío.

role=”presentación”

role="presentation" indica a la tecnología de asistencia que ignore los elementos de diseño, como las tablas de diseño. Por ejemplo, los correos electrónicos suelen utilizar tablas sólo para alinear las cosas. Sin esta función, los lectores de pantalla podrían suponer que tu diseño es una tabla de datos y empezar a leer los números de fila y columna.

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

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

aria-live=”cortés”

aria-live="polite" anuncia las actualizaciones cuando cambia el contenido sin necesidad de interacción por parte del usuario. Utilízalo cuando muestres actualizaciones dinámicas dentro de un mensaje, como aciertos, errores u otras notificaciones.

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

Pruebas automatizadas de accesibilidad

Para ayudarte a identificar y solucionar pronto los problemas de accesibilidad, Braze ofrece pruebas automatizadas de accesibilidad en las siguientes áreas:

• Buzón de entrada Visión para los correos electrónicos
• Escáner de accesibilidad para mensajes creados utilizando nuestro editor HTML (por ejemplo, mensajes HTML dentro de la aplicación, bloques de contenido HTML, pies de página de correo electrónico personalizados, páginas de adhesión voluntaria por correo electrónico y páginas para cancelar suscripción por correo electrónico).

Estas pruebas comprueban si tu mensaje cumple las Pautas de Accesibilidad al Contenido en la Web(WCAG), un conjunto de normas técnicas reconocidas internacionalmente para el contenido accesible. Cualquier problema que pueda detectarse automáticamente se marca y se clasifica por gravedad para ayudarte a priorizar.

Lo que las pruebas de automatización pueden y no pueden detectar

Las pruebas automatizadas de accesibilidad son un buen punto de partida, pero no pueden detectarlo todo. Algunas cuestiones necesitan un toque humano para evaluarse correctamente, sobre todo cuando el contexto o el diseño visual influyen en la forma en que los usuarios experimentan tu correo electrónico.

Puede que veas algunas cuestiones marcadas como Necesita revisión. Estos son casos en los que el verificador no puede decir con seguridad si algo es un problema para la accesibilidad. Cuando eso ocurra, te recomendamos que lo revises manualmente.

Algunos ejemplos de lo que las herramientas de automatización no pueden detectar con fiabilidad son:

• Si el orden de enfoque de los elementos interactivos sigue una secuencia lógica
• Si el contenido es totalmente manejable con un teclado, sin necesidad de un ratón
• Si el texto alternativo describe significativamente una imagen
• Si los encabezamientos se utilizan 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 los requisitos de contraste de color
• Si las instrucciones o etiquetas son claras y útiles para todos los usuarios

Estas limitaciones no son únicas de Braze, sino comunes a todas las herramientas de accesibilidad automatizada. Las comprobaciones automatizadas no pueden imitar todas las tecnologías de apoyo, lectores de pantalla o necesidades de los usuarios. Por eso la accesibilidad no se comprueba una sola vez, sino que es una práctica continua.

Aunque tu mensaje pase todas las comprobaciones de automatización, sigue siendo importante:

• Revisa detenidamente las cuestiones marcadas, especialmente las etiquetadas como Necesita revisión.
• Pruébalo manualmente siempre que sea posible, sobre todo en lo que se refiere a patrones de diseño e interacción.
• Utiliza herramientas como lectores de pantalla, navegación sólo con teclado y zoom del navegador para simular diferentes necesidades de acceso.

Combinando la automatización de las pruebas con una revisión manual concienzuda, detectarás más problemas potenciales y crearás campañas más inclusivas y útiles para todos los destinatarios.