Acessibilidade

Este artigo fornece uma visão geral de como a Braze suporta acessibilidade na sua integração.

O SDK Web da Braze suporta os padrões fornecidos pelas Diretrizes de Acessibilidade para Conteúdo da Web (WCAG 2.1). Mantemos uma pontuação de 100/100 no Lighthouse para Content Cards e mensagens no app em todas as nossas novas versões para manter nosso padrão de acessibilidade.

Pré-requisitos

A versão mínima do SDK que atende à WCAG 2.1 é próxima da v3.4.0. No entanto, recomendamos a atualização para pelo menos a v6.0.0 para correções importantes de tags de imagem.

Correções notáveis de acessibilidade

Recursos de acessibilidade suportados

Suportamos esses recursos para Content Cards e mensagens no app:

• Funções e rótulos ARIA
• Suporte à navegação por teclado
• Gerenciamento de foco
• Anúncios para leitores de tela
• Suporte a texto alternativo para imagens

Diretrizes de acessibilidade para integrações de SDK

Consulte Crie mensagens acessíveis no Braze para diretrizes gerais de acessibilidade. Este guia fornece dicas e boas práticas para máxima acessibilidade ao integrar o SDK Web da Braze em sua aplicação web.

Content Cards

Definindo uma altura máxima

Para evitar que os Content Cards ocupem muito espaço vertical e melhorar a acessibilidade, você pode definir uma altura máxima no contêiner do feed, como neste exemplo:

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;
}

Considerações sobre a viewport

Para Content Cards exibidos em linha, considere as restrições da viewport, como neste exemplo.

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 */
  }
}

Mensagens no app

Considerações para dispositivos móveis

Design responsivo

O SDK inclui pontos de interrupção responsivos. Confirme que suas personalizações funcionam em diferentes tamanhos de tela, como neste exemplo:

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 */
  }
}

Testando acessibilidade

Lista de verificação de teste manual

Teste manualmente a acessibilidade completando estas tarefas:

• Navegue pelos Content Cards e mensagens no app apenas com o teclado (Tab, Enter, Espaço)
• Teste com leitor de tela (NVDA, JAWS, VoiceOver)
• Verifique se todas as imagens têm texto alternativo
• Verifique as proporções de contraste de cores (use ferramentas como o WebAIM Contrast Checker)
• Teste em dispositivos móveis com toque
• Verifique se os indicadores de foco estão visíveis
• Teste a captura de foco de mensagens modais
• Verifique se todos os elementos interativos são acessíveis pelo teclado

Problemas comuns de acessibilidade

Para evitar problemas comuns de acessibilidade, faça o seguinte:

1. Mantenha os estilos de foco: Os indicadores de foco do SDK são essenciais para usuários de teclado.
2. Use display: none apenas em elementos não interativos: Use visibility: hidden ou opacity: 0 para ocultar elementos interativos.
3. Não substitua atributos ARIA: O SDK define funções e rótulos ARIA apropriados.
4. Use atributos tabindex: Eles controlam a ordem de navegação pelo teclado.
5. Forneça rolagem se você definir overflow: hidden: Confirme que o conteúdo rolável permanece acessível.
6. Não interfira nos manipuladores de teclado integrados: Confirme que a navegação existente pelo teclado funciona.