DocumentaciónEdición B2B de Journey OptimizerDocumentación de la edición B2B de Journey Optimizer

Diseñar contenido accesible accessible-content

Last update: Tue Dec 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Principiante
  • Intermedio
  • Usuario

La Ley Europea de Accesibilidad es una directiva diseñada para mejorar el mercado interno de productos y servicios accesibles al eliminar las barreras causadas por las diferentes reglas nacionales en los Estados Miembros.

Esta regulación establece que todas las comunicaciones digitales, incluidos correos electrónicos, boletines informativos, PDF y contenido descargable, deben ser accesibles. Por lo tanto, al crear contenido para los destinatarios, se le exige que siga directrices específicas como el uso de fuentes accesibles, formatos legibles y proporcionar texto alternativo para las imágenes.

Las herramientas de diseño de Journey Optimizer B2B Edition permiten a los especialistas en marketing crear contenido para correos electrónicos y páginas de aterrizaje. Utilice estas herramientas para cumplir con esta directiva, basada en las Directrices de accesibilidad del contenido web (WCAG) 2.1, nivel AA.

En las secciones siguientes se describen las prácticas recomendadas para diseñar contenido accesible con Journey Optimizer B2B Edition. Esta información se centra en diseñar contenido accesible para todos los destinatarios, de modo que las personas con discapacidad puedan leer, comprender e interactuar con los correos electrónicos y las páginas de aterrizaje.

Garantizar la legibilidad del texto text-readability

Use la ficha Estilos del componente Texto para asegurarse de que el texto sea legible, por ejemplo, usando un contraste de color adecuado y fuentes simples. Para obtener más información acerca del estilo de los componentes de texto, vea Componentes de contenido

Pestaña Estilos del componente Texto que muestra las opciones de fuente, tamaño y color {width="700" modal="regular"}

Para las fuentes y el texto, asegúrese de seguir las directrices siguientes:

Selección de fuente

  • Utilice fuentes sans-serif, como Arial, Verdana, Tahoma, Helvetica o Open Sans.
  • Evite las fuentes seriadas, cursivas o decorativas en el contenido del cuerpo.
  • Utilice un conjunto de fuentes limitado para mantener la coherencia y la reserva (por ejemplo: font-family: Arial, Helvetica, sans-serif;).

Tamaño de fuente

  • Asegúrese de que el tamaño mínimo de la fuente sea de 16 píxeles para el texto del cuerpo.
  • Utilice una jerarquía adecuada para los encabezados.

Contraste de color

  • Mantenga una relación de contraste de al menos 4,5:1 entre el texto y el fondo.
  • Para texto grande (≥24 px o negrita 18 px), asegúrese de que haya al menos un contraste de 3:1.
  • Evite el texto gris claro o pastel sobre fondos blancos.
  • No confíe solo en el color para transmitir significado, sino que utilice subrayados, iconos, etc.

Accesibilidad de texto

  • Evite el texto en las imágenes.
  • No utilice mayúsculas en el texto del cuerpo.
  • Asegúrese de que el texto se pueda ampliar hasta un 200 % sin romper el diseño.

Garantizar la accesibilidad visual visual-accessibility

Para asegurarse de que el contenido es accesible visualmente, siga las prácticas recomendadas a continuación:

  • Evite utilizar indicadores de solo color para la información importante.
  • Utilice etiquetas de texto o iconos para garantizar la claridad.
  • Optimice su diseño para diseños móviles y adaptables, asegurándose de que los botones sean grandes y estén correctamente espaciados.
  • Realice pruebas con regularidad en todos los dispositivos y tamaños de pantalla para mantener la accesibilidad.

En Journey Optimizer B2B Edition, el tamaño y el espaciado de los diferentes elementos del contenido se pueden refinar aún más mediante los parámetros y atributos de estilo del panel Estilos de Designer de correo electrónico.

Por ejemplo, puede actualizar el fondo o cambiar los márgenes, el relleno y la alineación para mejorar la accesibilidad visual del contenido.

Panel de estilos con configuración de fondo, márgenes, relleno y alineación {width="700" modal="regular"}

Además, Journey Optimizer B2B Edition Email Designer permite obtener una vista previa y optimizar el diseño para diferentes dispositivos y tamaños de pantalla. En cualquier momento, puedes Cambiar a la vista en vivo para comprobar cómo puede representarse tu contenido en varios tamaños de dispositivo.

Opción de vista en vivo que muestra las opciones de escritorio, tableta y vista previa para móviles {width="700" modal="regular"}

CAUTION
La vista en directo es una previsualización genérica diseñada para comparar el aspecto que podría tener la renderización en varios tamaños de dispositivo. La renderización final puede variar según el cliente de correo electrónico del destinatario.

Usar texto alternativo para imágenes alt-text

Utilice el componente Image para proporcionar texto alternativo para las imágenes. Para obtener más información acerca de la configuración de componentes de imagen, vea Componentes de contenido

Panel de configuración de componente de imagen con campo de texto alternativo resaltado {width="700" modal="regular"}

Para obtener texto alternativo efectivo en productos digitales, siga las directrices siguientes:

  • Describa el propósito de la imagen de forma concisa y contextual.
  • Evite frases redundantes como "Imagen de…" y utilice texto alternativo vacío para imágenes decorativas.
  • Para los iconos con significado, proporcione etiquetas significativas y, para las imágenes complejas, utilice un texto alternativo breve más una descripción más larga en otra parte.

Usar formato legible readable-format

Use la estructura relevante de Designer de correo electrónico y componentes de contenido, así como las opciones del panel Estilos, para organizar el contenido de una manera clara, lógica y concisa, accesible para todos.

Designer de correo electrónico que muestra la estructura y los componentes de contenido para los diseños organizados {width="800" modal="regular"}

  • Utilice una HTML semántica estructurada con encabezados, párrafos, listas y tablas adecuados.
  • Asegúrese de que el contenido sigue un flujo lógico de izquierda a derecha, de arriba a abajo.
  • Utilice un lenguaje claro y conciso.
  • Proporcionar formatos alternativos para PDF e infografías.
  • Permita cambiar el tamaño y el reflujo del texto y asegúrese de que la tipografía sea legible con un contraste de color adecuado en todos los formatos.

Garantizar la legibilidad del contenido readability

Para ser legible, el contenido debe ser claro, bien estructurado y utilizable por todos, incluidas las personas con dificultades visuales, cognitivas o de lectura y las que utilizan tecnologías de asistencia. Algunos puntos a tener en cuenta al crear contenido accesible son:

  • Mantener las frases en unas 20 palabras o menos.
  • Edite la copia para que sea directa y directa.
  • Utilice la voz activa para simplificar la estructura de la oración.
  • Evite utilizar jergas, jergas o palabras regionales con las que algunas personas no estén familiarizadas.

Para evaluar la legibilidad de tu correo electrónico, usa la popular prueba Flesch Reading Ease en Microsoft Word. Calcula lo fácil que es leer el contenido en una escala de 0 a 100.

Prueba del contenido test

Para comprobar la accesibilidad del contenido, puede utilizar las funciones de prueba proporcionadas por Journey Optimizer B2B Edition. No están diseñadas específicamente para comprobar si el contenido es totalmente accesible, pero pueden proporcionar un primer nivel de verificación.

  • Vista previa del contenido mediante perfiles de prueba.

  • Utilice la opción Procesamiento de correo electrónico que aprovecha Litmus para simular los diseños en los principales clientes de correo electrónico (Apple Mail, Gmail, Outlook) y ver si el texto, los colores y las imágenes hacen que el contenido sea accesible.

  • Envíe pruebas para probar la renderización del contenido antes de enviarlo a su audiencia real.

Interfaz de simulación de contenido con opciones de vista previa de perfil de prueba {width="800" modal="regular"}

Para comprobar de forma más coherente si el contenido es accesible de forma fiable, vaya a por herramientas externas específicas como:

Usar modo oscuro dark-mode

El modo oscuro mejora la accesibilidad visual para los usuarios con sensibilidad a la luz o deficiencias visuales, para una experiencia de visualización mejorada.

Vista previa del correo electrónico que compara el modo claro y el modo oscuro {width="800" modal="regular"}

Al diseñar para el modo oscuro, utilice imágenes PNG o SVG transparentes y establezca las metaetiquetas y CSS adecuadas. Proporcionar un estilo de reserva accesible si no se admite el modo oscuro. Finalmente, pruebe todo el contenido del correo electrónico y los elementos de la interfaz de usuario en los modos claro y oscuro.

Utilizar atributos específicos para la accesibilidad attributes

Atributos de idioma language

Al crear diseños, incluya los atributos lang (idioma) y dir (dirección del texto) en el cuerpo del contenido. Estos atributos ayudan a las tecnologías de asistencia, como los lectores de pantalla, a interpretar y presentar el contenido de una manera adecuada.

  • El atributo lang indica el idioma del correo electrónico para las tecnologías de asistencia, lo que garantiza que las palabras se pronuncien correctamente.

    accordion
    Ejemplos

    Ejemplo para inglés:

    code language-none 
    <body lang="en">

    Ejemplo para francés:

    code language-none 
    <body lang="fr">

  • El atributo dir especifica la dirección del texto. La mayoría de los idiomas, incluidos el inglés y el francés, se leen de izquierda a derecha (ltr), mientras que idiomas como el árabe y el hebreo se leen de derecha a izquierda (rtl).

    accordion
    Ejemplos

    Ejemplo para inglés (de izquierda a derecha):

    code language-html 
    <body lang="en" dir="ltr">

    Ejemplo para árabe (de derecha a izquierda):

    code language-html 
    <body lang="ar" dir="rtl">

Los lectores de pantalla dependen del atributo lang para aplicar las reglas de pronunciación correctas. La dirección del texto garantiza que el contenido fluya de forma natural en los idiomas de izquierda a derecha o de derecha a izquierda. Sin estos atributos, los usuarios pueden experimentar un orden de lectura confuso o una pronunciación incorrecta. En consecuencia, ajuste siempre el cuerpo del correo electrónico con los atributos adecuados de lang y dir.

TIP
Si el correo electrónico contiene varios idiomas, asigne los atributos de idioma adecuados a secciones específicas (como bloques de <table> o <td>) para garantizar que cada parte se lea correctamente.

Tablas tables

En el contenido de HTML, las tablas suelen utilizarse para el diseño. De manera predeterminada, los lectores de pantalla tratan cada <table> como una tabla de datos, y anuncian filas, columnas y estructura. Esta estructura puede resultar confusa si la tabla solo se utiliza para dar formato.

Agregue role="presentation" (o role="none") a las tablas de diseño para garantizar que las tecnologías de asistencia omitan su estructura y se centren únicamente en el contenido real.

Ejemplo: Tabla de diseño (con role="presentation")
code language-html 
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <h1>Hello World</h1>
      <p>Welcome to our newsletter</p>
    </td>
  </tr>
</table>

Los lectores de pantalla dicen:
"Hola Mundo. Bienvenido a este boletín informativo". (sin mención de filas, columnas ni tablas)

Ejemplo: tabla de datos (sin role="presentation")
code language-html 
<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>88</td>
  </tr>
</table>

Los lectores de pantalla dicen:
"Tabla con 2 columnas y 3 filas."

"Nombre, Alice. Puntuación: 95".

"Nombre, Bob. Puntuación: 88".

TIP
Usar role="presentation" exclusivamente para tablas de diseño. Para las tablas de datos, conserve la estructura semántica <table> de modo que los lectores de pantalla puedan anunciar correctamente los encabezados y las relaciones.

Los lectores de pantalla leen los vínculos usando su texto. Si un vínculo está etiquetado solamente Haga clic aquí o Más información, los usuarios de tecnologías de asistencia no conocen el destino. Para garantizar la accesibilidad, necesitan un texto descriptivo que indique claramente el destinatario o la acción.

Utilice el Designer de correo electrónico para añadir un vínculo al contenido y editar la etiqueta para que sea discernible (visible) y descriptivo (claro sobre el propósito). Evite etiquetas vagas como aquí o más.

Panel de configuración de vínculos que muestra el campo URL y las opciones de etiquetas descriptivas {width="600" modal="regular"}

Ejemplo: buen vínculo (descriptivo):
code language-none 
<p>Learn more in the
<a href="https://adobe.com/release-notes">August release notes</a>.
</p>

Los lectores de pantalla dicen:
"Vínculo, notas de la versión de agosto".

Ejemplo: vínculo incorrecto (no descriptivo)
code language-none 
<p>Learn more about our new features.
  <a href="https://adobe.com/release-notes">Click here</a>.
</p>

Los lectores de pantalla dicen:
"Link, haga clic aquí." (no proporciona contexto fuera del orden de lectura)

Proporcionar compatibilidad de enfoque y navegación mediante el teclado keyboard

Proporcionar compatibilidad con la navegación mediante el teclado y el enfoque permite a las personas que no pueden utilizar un ratón acceder al contenido e interactuar con él. También mejora la capacidad de uso general al proporcionar a todos los usuarios una forma clara y coherente de desplazarse por la información.

  • Enfoque mediante el teclado

    • Asegúrese de que todos los elementos interactivos (como botones, casillas de verificación y vínculos) tengan tabindex="0" para que se incluyan en el orden de tabulación natural.
    • Permita la navegación utilizando las teclas de tabulación y flecha (↑ ↓ ← →), que deben resaltar visiblemente el elemento centrado.

  • Estilo de enfoque personalizado

    • Aplique estilos claros y distinguibles para centrarse en elementos procesables:

      accordion
      Ejemplo (CSS)
      code language-none 
      [tabindex="0"] : focus {
outline: 2px solid #00AEEF;  /* Cyan border */
background-color: #20CEFF;   /* Optional background */
}

    • Asegúrese de que los indicadores de enfoque cumplen los estándares de apariencia de enfoque WCAG 2.2, que incluyen:

      • Área mínima: contorno de grosor de 2 píxeles CSS.
      • Proporción de contraste: ≥ 3:1 entre el estado centrado y no centrado.

  • Compatibilidad con activación de teclado

    • Asegúrese de que las casillas de verificación y los botones responden a las teclas Intro y Espacio.

    • Valide la interacción utilizando solo el teclado:

      • Intro o Espacio deben alternar las casillas de verificación.
      • Intro o Espacio deben almacenar en déclencheur los botones.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0