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 na 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

Aviso

Não coloque informações importantes em mensagens no app do tipo slide up, pois elas não são acessíveis para leitores de tela.

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.