Accesibilidad

Este artículo ofrece un resumen de cómo Braze favorece la accesibilidad dentro de tu integración.

Braze Web SDK es compatible con los estándares establecidos por las Pautas de Accesibilidad al Contenido en la Web (WCAG 2.1). Mantenemos una puntuación de 100/100 en Lighthouse para las tarjetas de contenido y los mensajes dentro de la aplicación en todas nuestras nuevas versiones, con el fin de mantener nuestro estándar de accesibilidad.

Requisitos previos

La versión mínima del SDK que cumple con WCAG 2.1 es cercana a la v3.4.0. Sin embargo, recomendamos actualizar al menos a la versión 6.0.0 para obtener correcciones importantes en las etiquetas de imagen.

Correcciones notables en materia de accesibilidad

Características de accesibilidad compatibles

Admitimos estas características para tarjetas de contenido y mensajes dentro de la aplicación:

• Funciones y etiquetas ARIA
• Compatibilidad con la navegación mediante teclado
• Gestión del enfoque
• Anuncios del lector de pantalla
• Compatibilidad con texto alternativo para imágenes

Directrices de accesibilidad para integraciones de SDK

Consulta Creación de mensajes accesibles en Braze para obtener directrices generales sobre accesibilidad. Esta guía proporciona consejos y prácticas recomendadas para lograr la máxima accesibilidad al integrar el SDK web de Braze en tu aplicación web.

Tarjetas de contenido

Establecer una altura máxima

Para evitar que las tarjetas de contenido ocupen demasiado espacio vertical y mejorar la accesibilidad, puedes establecer una altura máxima en el contenedor de la fuente, como en este ejemplo:

1
2
3
4
5
6
7
8
9
10
11
/* Limit the height of the Content Cards feed */
.ab-feed {
  max-height: 600px; /* Adjust to your needs */
  overflow-y: auto;
}

/* For inline feeds (non-sidebar), you may want to limit individual cards */
.ab-card {
  max-height: 400px; /* Optional: limit individual card height */
  overflow: hidden;
}

Consideraciones sobre la ventana gráfica

Para las tarjetas de contenido que se muestran en línea, ten en cuenta las restricciones del área de visualización, como en este ejemplo.

1
2
3
4
5
6
/* Limit feed height on mobile to prevent covering too much screen */
@media (max-width: 768px) {
  body > .ab-feed {
    max-height: 80vh; /* Leave space for other content */
  }
}

Mensajes dentro de la aplicación

Consideraciones sobre los dispositivos móviles

Diseño receptivo

El SDK incluye puntos de interrupción receptivos. Confirma que tus personalizaciones funcionan en todos los tamaños de pantalla, como en este ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
/* Mobile-specific accessibility considerations */
@media (max-width: 768px) {
  /* Ensure readable font sizes */
  .ab-feed {
    font-size: 14px; /* Minimum 14px for mobile readability */
  }
  
  /* Ensure sufficient touch targets */
  .ab-card {
    padding: 16px; /* Adequate padding for touch */
  }
}

Prueba de accesibilidad

Lista de verificación de pruebas manuales

Comprueba manualmente tu accesibilidad completando estas tareas:

• Navega por las tarjetas de contenido y los mensajes dentro de la aplicación solo con el teclado (Tab, Intro, Espacio).
• Prueba con lector de pantalla (NVDA, JAWS, VoiceOver)
• Verifica que todas las imágenes tengan texto alternativo.
• Comprueba los ratios de contraste de color (utiliza herramientas como WebAIM Contrast Checker).
• Prueba en dispositivos móviles con pantalla táctil.
• Comprueba que los indicadores de enfoque sean visibles.
• Prueba de captura de enfoque de mensajes modales
• Verifica que se pueda acceder a todos los elementos interactivos mediante el teclado.

Problemas comunes de accesibilidad

Para evitar problemas comunes de accesibilidad, haz lo siguiente:

1. Mantén los estilos de enfoque: Los indicadores de enfoque del SDK son esenciales para los usuarios de teclado.
2. Úsalo solodisplay: none en elementos no interactivos: Usavisibility: hidden oopacity: 0 para ocultar elementos interactivos.
3. No anules los atributos ARIA: El SDK establece las funciones y etiquetas ARIA adecuadas.
4. Utilizatabindexlos atributos: Estos controlan el orden de navegación del teclado.
5. Proporciona un desplazamiento si realizas la configuraciónoverflow: hidden: Confirma que el contenido desplazable sigue siendo accesible.
6. No interfieras con los controladores de teclado integrados: Confirma que la navegación con el teclado existente funciona correctamente.