Construir mensajes accesibles en Braze

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.

Por qué es importante la accesibilidad

• Mejor usabilidad: La accesibilidad te anima a pensar en la usabilidad de tu aplicación o sitio web porque estás pensando en cómo interactúa el usuario con tu contenido. Esto significa que la accesibilidad suele mejorar la experiencia en línea de todos los usuarios, no sólo de los que tienen una discapacidad.
• Ampliar el alcance del mercado: El mercado mundial de personas con discapacidad es de más de 1000 millones de personas con un poder adquisitivo de casi 7 billones de dólares.

  “El mercado de las personas con discapacidad es amplio y crece a medida que envejece la población mundial. En el Reino Unido, donde el gran mercado de la discapacidad se conoce como la Libra Púrpura, las personas con discapacidad y sus familias gastan al menos 249.000 millones de libras al año. En EE. UU., el gasto discrecional anual de las personas con discapacidad supera los 200 000 millones de dólares. La estimación global del mercado de la discapacidad es de casi 7 billones de dólares”.
  Fuente: W3C

• Minimiza el riesgo legal: Muchos países tienen leyes que exigen la accesibilidad digital.

Áreas de discapacidad a considerar

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

Visuales

Las discapacidades visuales pueden ir desde la pérdida de visión leve o moderada en uno o ambos ojos hasta la pérdida sustancial o completa de visión en ambos ojos. Algunas personas tienen una sensibilidad reducida o nula a determinados colores o una sensibilidad aumentada a los colores brillantes.

Para interactuar con tu contenido, estos usuarios necesitan tener la capacidad de:

• Ampliar o reducir el tamaño del texto y las imágenes
• Personaliza la configuración de fuentes, colores y espaciado
• Escuchar la síntesis de texto a voz del contenido (es decir, utilizar un lector de pantalla)
• Escucha las descripciones de audio del video
• Leer texto utilizando Braille actualizable

Auditivas

Las discapacidades auditivas pueden incluir deficiencias auditivas de leves a moderadas en uno o ambos oídos. Incluso una pérdida parcial de audición puede ser problemática en relación con el contenido de audio.

Para comprender tu contenido, estos usuarios se basan en:

• Transcripciones y subtítulos de contenidos de audio
• Reproductores multimedia que muestran subtítulos y ofrecen opciones para ajustar el tamaño del texto y los colores de los subtítulos
• Opciones para detener, pausar y ajustar el volumen del contenido de audio (independientes del volumen del sistema)
• Audio de primer plano de alta calidad que se distingue claramente de cualquier ruido de fondo

Físicas

Las discapacidades físicas pueden incluir debilidad y limitaciones del control muscular o de la sensibilidad, trastornos articulares, dolor que impide el movimiento y falta de miembros.

Estos usuarios confían en la ayuda del teclado para activar la funcionalidad (aunque no utilicen un teclado estándar). Para interactuar con tu contenido, estos usuarios necesitan:

• Grandes áreas clicables
• Tiempo suficiente para completar las tareas
• Indicadores visibles del enfoque actual
• Mecanismos para saltar bloques de contenido, como cabeceras de página o barras de navegación

Cognitivo

Las discapacidades cognitivas, de aprendizaje y neurológicas implican neurodiversidad y trastornos neurológicos, así como trastornos del comportamiento y de la salud mental que no son necesariamente neurológicos. Pueden afectar a cualquier parte del sistema nervioso y repercutir en la forma en que las personas oyen, se mueven, ven, hablan y comprenden la información.

En función de las necesidades individuales, estos usuarios se basan en:

• Contenidos claramente estructurados
• Etiquetado coherente de formularios, botones y otros contenidos
• Objetivos de enlace predecibles e interacción global
• Diferentes formas de navegar, como menús y barras de búsqueda
• Configuración para desactivar el contenido parpadeante, intermitente o que distraiga de alguna otra forma
• Texto más sencillo que se apoya en imágenes

Buenas prácticas

Contenido

• Mantén tu contenido alineado con la marca, pero utiliza un lenguaje sencillo. 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.
• Estructura tu contenido de forma lógica, y asegúrate de que los encabezamientos siguen la jerarquía correcta. No te saltes los niveles de encabezamiento.
• Evita alinear el texto en el centro para trozos largos de contenido. Esto puede ser difícil de leer para los usuarios con discapacidades cognitivas o de aprendizaje. El contenido que ocupa más de dos líneas debe alinearse a la izquierda.
• Utiliza fuentes sans-serif, que son más fáciles de leer en los dispositivos digitales.
• 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 al usuario, ya que impide que tu contenido llegue a tus usuarios.

Enlaces

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

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.

Botones de acción

Utiliza botones para acciones en las que se pueda hacer clic, como enviar un formulario o reproducir un carrusel.

De forma similar al texto del enlace, escribe un texto de botón que describa claramente la acción que se producirá cuando el usuario lo pulse (por ejemplo, “Leer la historia completa” en lugar de “Leer más”). Comprueba que el texto del botón no sea demasiado largo. Si el botón no puede mostrar todo el texto, lo truncará con una elipsis en lugar de que el texto se envuelva en una nueva línea.

Imágenes

Algunos usuarios no pueden ver las imágenes de tu contenido de marketing. Si no se tiene en cuenta la accesibilidad, las imágenes pueden convertirse en una barrera para que todos los usuarios reciban el mismo contenido.

Texto alternativo

El texto alternativo es una breve descripción del contenido de la imagen que los lectores de pantalla y otras tecnologías de asistencia proporcionan a sus usuarios.

• Para cada imagen, escribe un texto alternativo que proporcione la información o función de la imagen.
• Si la imagen es decorativa (no aporta nada al contenido), utiliza un atributo alt vacío (alt="").
• No utilices la palabra “foto” o “imagen” en el texto alternativo.

Imágenes de texto

Evita utilizar imágenes de texto, ya que los lectores de pantalla no pueden leer el texto contenido dentro de una imagen. Las imágenes de texto tampoco cambian bien de tamaño y no se pueden personalizar según las necesidades y preferencias del usuario. Con el texto real, los usuarios pueden personalizar aspectos como el color y el contraste, y cambiar el tamaño del texto sin perder calidad. Cuando las imágenes de texto se amplían, se pixelan y pierden calidad, lo que dificulta su lectura.

Videos

Proporciona subtítulos para los videos. Ayudan a las personas con pérdida de visión, a las que miran en un lugar ruidoso y a las que hablan una lengua distinta a la del video.

Contraste de color

Tener suficiente contraste de color puede ser una victoria rápida para la accesibilidad. La relación de contraste entre los colores de primer plano (texto) y de fondo debe cumplir los requisitos del nivel AA de las WCAG 2.1:

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

Puedes utilizar la herramienta de comprobación de contraste de WebAim para ver si tu texto es legible frente a los colores de fondo.

Formularios

Trocea las formas más largas en secciones más pequeñas
Para reducir la carga cognitiva, divide los formularios largos en secciones más pequeñas. Esto se conoce como fragmentación, un modelo de divulgación progresiva utilizado para que la información sea más fácil de consumir. Esto beneficia a todos los usuarios, pero es especialmente útil para las personas con discapacidades cognitivas.

No ocultes contenido importante en tooltips u otros estados hover
El contenido contenido en los estados hover es menos descubrible y amigable para los móviles, y los usuarios con amplificador de pantalla tendrán dificultades para ver el contenido que sólo está disponible al pasar el ratón por encima.

Evitar el bloqueo de caracteres no válidos en los campos
No impidas que se introduzcan determinados tipos de caracteres en los campos de formulario. Es mejor permitir que los usuarios introduzcan lo que quieran y luego proporcionar un mensaje de error sobre lo que está mal. Bloquear la entrada del teclado supone un problema especial para los usuarios de tecnología de asistencia, ya que dependen en gran medida de la validación en línea para determinar si han rellenado el formulario correctamente.

Escribir mensajes de error claros
Un buen mensaje de error consta de tres partes: qué ha pasado, qué ha ido mal y cómo pueden solucionarlo. Los mensajes de error deben ser claros y fáciles de entender. Intenta hablar en un lenguaje sencillo. No hace falta jerga rebuscada.

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 atributo de idioma 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 se especifica el idioma, los lectores de pantalla pueden cambiar automáticamente entre las bibliotecas de idiomas según sea necesario. Por ejemplo:

1
<html lang="en-us">