Skip to content

Crie mensagens acessíveis na Braze

Entenda por que a acessibilidade é importante no seu conteúdo de marketing e como você pode criar mensagens acessíveis na Braze. Para mais orientações, confira nosso curso Fundamentos de Mensagens Acessíveis no Braze Learning.

Conteúdo de marketing que exclui pessoas com deficiência, mesmo sem intenção, pode impedir milhões de pessoas de interagir com a sua marca. Acessibilidade no marketing é sobre permitir que todos experimentem seu marketing, entendam sua comunicação e tenham a oportunidade de investir ou se tornar fã do seu produto, serviço ou marca.

Ao projetar suas mensagens, dedique um tempo extra para considerar como tornar seus designs acessíveis a todos os seus clientes.

Acessibilidade na Braze

Apoiar a comunicação acessível significa manter-se aberto, curioso e disposto a aprender. Na Braze, nos importamos em ajudar as pessoas a se conectarem — e sabemos que abrir espaço para todos faz parte disso. Acessibilidade não é algo que consideramos “concluído”, e agradecemos a oportunidade de continuar aprendendo.

Se tiver algum comentário sobre a acessibilidade do Braze ou sobre as mensagens enviadas pelo Braze, gostaríamos de ouvi-lo. Abra o menu Suporte no cabeçalho global e selecione Compartilhar feedback para nos enviar suas ideias.

Áreas de deficiência a considerar

Esta seção é parcialmente adaptada de W3C: Diverse Abilities and Barriers.

Deficiências visuais podem variar de perda leve ou moderada de visão em um ou ambos os olhos, até perda substancial ou completa de visão em ambos os olhos. Algumas pessoas têm sensibilidade reduzida ou ausente a certas cores, ou sensibilidade aumentada a cores brilhantes.

Para interagir com seu conteúdo, esses usuários precisam da capacidade de:

  • Aumentar ou reduzir o tamanho do texto e das imagens
  • Personalizar configurações de fontes, cores e espaçamento
  • Ouvir a síntese de texto para fala do conteúdo (ou seja, usar um leitor de tela)
  • Ouvir audiodescrições de vídeos
  • Ler texto usando Braille atualizável

Deficiências auditivas podem incluir perda auditiva leve a moderada em um ou ambos os ouvidos. Mesmo a perda parcial de audição pode ser problemática em relação a conteúdo de áudio.

Para entender seu conteúdo, esses usuários dependem de:

  • Transcrições e legendas de conteúdo de áudio
  • Players de mídia que exibem legendas e oferecem opções para ajustar o tamanho e as cores do texto das legendas
  • Opções para parar, pausar e ajustar o volume do conteúdo de áudio (independente do volume do sistema)
  • Áudio em primeiro plano de alta qualidade que seja claramente distinguível de qualquer ruído de fundo

Deficiências físicas podem incluir fraqueza e limitações de controle muscular ou sensação, distúrbios articulares, dor que impede o movimento e membros ausentes.

Esses usuários dependem do suporte a teclado para ativar funcionalidades (mesmo que não estejam usando um teclado padrão). Para interagir com seu conteúdo, esses usuários precisam de:

  • Áreas clicáveis grandes
  • Tempo suficiente para concluir tarefas
  • Indicadores visíveis do foco atual
  • Mecanismos para pular blocos de conteúdo, como cabeçalhos de página ou barras de navegação

Deficiências cognitivas, de aprendizagem e neurológicas envolvem neurodiversidade e distúrbios neurológicos, bem como distúrbios comportamentais e de saúde mental que não são necessariamente neurológicos. Elas podem afetar qualquer parte do sistema nervoso e impactar a capacidade das pessoas de ouvir, se mover, ver, falar e entender informações.

Dependendo das necessidades individuais, esses usuários dependem de:

  • Conteúdo claramente estruturado
  • Rotulagem consistente de formulários, botões e outros conteúdos
  • Destinos de links previsíveis e interação geral
  • Diferentes formas de navegação, como menus e barras de pesquisa
  • Configurações para desativar conteúdo piscante, intermitente ou que cause distração
  • Texto mais simples apoiado por imagens

Boas práticas

Criar conteúdo acessível não precisa ser algo complicado. Pequenas escolhas cuidadosas podem fazer uma grande diferença. Esta seção apresenta dicas práticas que ajudam mais pessoas a ler, navegar e interagir com suas mensagens com sucesso. Seja ajustando seu texto, estilizando seus botões ou adicionando texto alternativo às imagens, cada melhoria contribui para uma experiência mais inclusiva. Vamos lá.

Conteúdo

Estrutura e fluxo

Vamos começar pela base. Quando seu conteúdo tem uma estrutura clara, é mais fácil para todos acompanharem — especialmente pessoas que dependem de leitores de tela ou navegação por teclado.

  • Divida seu conteúdo em seções: Usar títulos, marcadores e listas ajuda as pessoas a entender e escanear rapidamente seu conteúdo — mesmo quando estão com pressa.
  • Não pule níveis de título: Os títulos dão estrutura ao seu conteúdo, ajudando os leitores a entender rapidamente como as seções se relacionam entre si. Quando você pula níveis de título (por exemplo, indo direto de um H2 para um H4), você quebra essa estrutura lógica. Isso dificulta a navegação e compreensão da sua mensagem para os usuários, especialmente aqueles que usam leitores de tela. Sempre siga uma hierarquia lógica e sequencial de títulos (H1 para H2 para H3, e assim por diante) para garantir que seu conteúdo permaneça organizado, acessível e fácil de acompanhar para todos.

Legibilidade

Com a estrutura definida, o próximo passo é garantir que suas palavras sejam realmente fáceis de ler. Isso significa manter as coisas simples, escaneáveis e confortáveis de ler em diferentes dispositivos e necessidades dos usuários.

  • Escreva frases curtas e claras: Frases curtas são fáceis de entender para todos, especialmente pessoas que usam leitores de tela ou que têm dificuldade em processar informações complexas. Escreva para um nível de leitura equivalente ao sétimo ano nos Estados Unidos. Você pode usar recursos como o Hemingway App para verificar o nível de leitura do seu texto.
  • Escolha tamanhos de fonte e espaçamento legíveis: Texto muito pequeno pode ser difícil de ler — especialmente em dispositivos móveis. Use pelo menos 14px para o texto do corpo. Faça os títulos maiores para que os usuários possam ver claramente a diferença. Espaçamento extra entre linhas (cerca de 1,5 de altura de linha) e parágrafos melhora a legibilidade, especialmente para pessoas com necessidades visuais ou cognitivas.
  • Evite texto justificado: Texto justificado cria espaçamento irregular entre palavras, dificultando a leitura para pessoas com dislexia ou deficiências cognitivas. Considere alinhar à esquerda o conteúdo que ocupa mais de duas linhas para idiomas da esquerda para a direita, ou alinhar à direita para idiomas da direita para a esquerda.
  • Use negrito, itálico e texto em maiúsculas com moderação: Enfatizar muito texto dificulta a leitura — especialmente para pessoas com dislexia ou deficiências visuais. Mantenha a simplicidade.

Clareza e usabilidade

Por fim, vamos falar sobre os detalhes mais finos — as coisas que ajudam os usuários não apenas a ver seu conteúdo, mas a entendê-lo e interagir com ele.

  • Rotule links e botões claramente: Certifique-se de que o texto dos seus links e botões explique claramente o que acontece em seguida. Isso ajuda pessoas que usam leitores de tela ou navegam com teclado a saber o que esperar.
  • Pegue leve com símbolos e emojis: Caracteres especiais e emojis podem tornar seu conteúdo divertido, mas podem ser confusos quando lidos por leitores de tela. Use-os com moderação e certifique-se de que não substituam texto claro e descritivo.
  • Teste se há truncamento: Sempre teste seu texto enviando uma mensagem de teste para um dispositivo para garantir que seu texto não seja truncado. Se sua mensagem estiver sendo cortada, isso prejudica tanto você quanto seu público, pois impede que seu conteúdo chegue até eles.

Idioma de acessibilidade

O idioma de acessibilidade informa aos leitores de tela e outras ferramentas assistivas em qual idioma seu conteúdo está. Para canais que enviam uma página HTML completa ou e-mail, a Braze pode adicionar uma tag de idioma (lang) quando você a define no editor ou via Liquid. Isso atende ao Critério de Sucesso 3.1.1 do WCAG 2.1 — Idioma da Página (Nível A).

Se você deixar o idioma de acessibilidade em branco e não houver um padrão seguro disponível, a Braze omite a tag de idioma. Se nenhum idioma for definido, as ferramentas assistivas geralmente recorrem ao idioma do telefone ou computador da pessoa. Se esse idioma for diferente do idioma da mensagem, a pronúncia pode soar incorreta.

Campaigns e Canvas usam os mesmos editores para essas opções, a menos que um recurso não esteja disponível para o seu espaço de trabalho.

Configurar o idioma de acessibilidade

Quando seu editor inclui essa opção, vá até a seção Acessibilidade nas configurações da mensagem. Escolha um idioma no menu suspenso ou use Liquid (por exemplo, {{accessibility_language}} quando mensagens multilíngues estiverem ativadas e as Configurações de localização estiverem definidas).

Mensagens multilíngues

Em Configurações de localização, defina um idioma de acessibilidade para cada localidade para que o Liquid possa preencher {{accessibility_language}} para envios localizados. Se esse valor já está escolhido para novas mensagens depende do canal. Para fluxos de trabalho com CSV e tradução, comece com Configurações de idioma e acessibilidade.

Suporte por canal e editor

Use esta tabela para comparar os canais. Os padrões podem variar, então verifique o que seu público realmente recebe.

Canal O que saber
E-mail (arrastar e soltar, modelo completo) Defina o idioma no editor. Com mensagens multilíngues, um modelo de e-mail completo pode corresponder ao idioma de cada localidade automaticamente. Se você usa apenas Content Blocks (linha única), esses atalhos não funcionam da mesma forma — escolha o idioma você mesmo onde o editor permitir.
E-mail (código HTML) A Braze não adiciona uma tag de idioma para você. Adicione-a no seu HTML se precisar.
Mensagens no app (arrastar e soltar) Quando você escolhe um idioma em Acessibilidade, a Braze adiciona esse idioma ao HTML externo da mensagem para que os leitores de tela tratem toda a mensagem nesse idioma. Com mensagens multilíngues ativadas, novas mensagens podem usar como padrão os idiomas das suas localidades. A pré-visualização pode não mostrar nenhum idioma até que você escolha um em Configurações.
Banners Mesmo comportamento das mensagens no app.
Landing pages Você pode definir o idioma na página publicada. Escolha um idioma ou use Liquid se sua conta permitir Liquid em landing pages. Os padrões também diferem das mensagens no app e Banners — verifique a página publicada.
Content Cards Os cartões usam um campo Idioma para apps em vez de um idioma de acessibilidade explícito.

Quando você escreve HTML por conta própria, ainda pode adicionar uma tag de idioma em parte da mensagem (por exemplo, uma frase em outro idioma). Para mais padrões, veja HTML personalizado.

Referência de padrões

Quando a Braze adiciona uma tag de idioma no nível raiz ao HTML, ela segue a regra do atributo HTML lang. Ferramentas de teste geralmente procuram por html-has-lang. Content Cards usam o campo idioma em vez desse padrão HTML.

Botões

Use botões para indicar uma ação, como enviar um formulário ou reproduzir um carrossel. Se você está navegando para uma nova URL, considere usar um link.

Escreva texto claro e orientado à ação

Assim como o texto de links, os rótulos dos botões devem descrever claramente a ação. Texto de botão eficaz é específico e orientado à ação. Por exemplo, “Enviar pedido” diz claramente aos usuários o que acontecerá quando clicarem, enquanto simplesmente “Enviar” pode ser ambíguo. Cada rótulo deve descrever precisamente a ação pretendida, para que leitores de tela e todos os usuários possam entender e prever facilmente o resultado ao interagir com seus botões.

Mantenha o texto do botão conciso para evitar truncamento. Se o texto de um botão for muito longo, ele pode ser cortado com reticências em vez de quebrar a linha.

Use contraste de cores suficiente

O texto do botão deve ser fácil de ler contra a cor de fundo do botão. Verifique se o texto do seu botão atende aos mínimos de contraste WCAG 2.2 AA:

  • Proporção de contraste de 4.5:1 para texto de tamanho normal (a maioria dos botões)
  • Proporção de contraste de 3:1 para texto grande (geralmente acima de 18pt)

Alto contraste ajuda os botões a permanecerem legíveis e clicáveis para todos, incluindo usuários com deficiências visuais ou aqueles que visualizam sua mensagem em ambientes desafiadores. Para mais orientações, veja a seção Contraste de cores.

Facilite o toque nos botões

Certifique-se de que seus botões (e links) sejam grandes o suficiente e espaçados o bastante para usuários em dispositivos móveis. Alvos de toque pequenos ou aglomerados podem ser frustrantes ou impossíveis de interagir para usuários com deficiências motoras.

Use links para navegação, como direcionar usuários para uma página externa.

Escreva texto de link descritivo

Escreva texto de link que descreva claramente para onde o link levará o usuário. Usuários de leitores de tela frequentemente pulam de link em link como forma de escanear o conteúdo, então certifique-se de que o texto do link faça sentido por si só. Evite frases como “clique aqui”, “mais” e “clique para detalhes”, pois são ambíguas quando lidas fora de contexto.

Por exemplo, considere como você escreveria um link para ver um relatório meteorológico.

Ruim Melhor Ideal
Clique aqui Clique aqui para acessar o clima de hoje Clima de hoje

Como em todo conteúdo, mantenha a objetividade com o mínimo de palavras extras possível.

Os editores de arrastar e soltar da Braze geram HTML semântico por padrão, então os links não são estilizados como botões neles. No entanto, se você estiver trabalhando com HTML personalizado ou fazendo alterações no nível do código, tenha isso em mente:

  • Links (<a>) respondem à tecla Enter.
  • Botões (<button>) respondem às teclas Enter e Space.

Estilizar um link para parecer um botão pode confundir pessoas que navegam com teclado — elas podem tentar pressionar Space e esperar que funcione.

Use o elemento correto para a ação:

  • Use <button> para ações, como enviar um formulário ou abrir um modal.
  • Use <a> para navegação, como vincular a outra página ou arquivo.
1
2
3
4
5

<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

Alvos de toque

Alvos de toque são qualquer parte da sua mensagem que os usuários tocam para realizar uma ação, como botões, links ou ícones. Esses elementos precisam ser grandes o suficiente e espaçados o bastante para que as pessoas possam tocá-los facilmente, especialmente em dispositivos móveis.

Quando os alvos de toque são muito pequenos ou muito próximos, pode ser frustrante ou impossível para usuários com desafios de mobilidade ou destreza interagir com sua mensagem. Melhorar isso pode ajudar a reduzir erros e criar uma experiência mais fluida para todos.

Veja o que ter em mente:

  • Use tamanho adequado para alvos de toque. Mire em um tamanho mínimo de alvo de toque de 44 x 44 pixels. Isso está alinhado com as diretrizes WCAG 2.2 para alvos de toque e padrões comuns de usabilidade móvel.
  • Dê espaço para cada alvo. Se os alvos de toque estiverem muito próximos — como links empilhados ou botões agrupados — pode ser fácil errar ou tocar no errado. Adicione espaçamento ou preenchimento entre os elementos para evitar isso.
  • Não dependa apenas de elementos visuais. Mesmo ícones pequenos podem se tornar mais usáveis com preenchimento extra, permitindo que atendam aos requisitos mínimos de tamanho sem alterar o layout.
  • Visualize no celular. Teste sua mensagem em diferentes tamanhos de tela e certifique-se de que os elementos interativos sejam fáceis de usar.

Melhorar os alvos de toque é uma das formas mais eficazes de tornar sua mensagem mais acessível em dispositivos móveis — e é uma boa experiência de usuário para todos.

Imagens

Forneça texto alternativo

Texto alternativo (alt text) é uma descrição curta do conteúdo ou função de uma imagem que leitores de tela e outras tecnologias assistivas fornecem aos usuários. Para cada imagem significativa, escreva texto alternativo descritivo para que os usuários que não podem ver os elementos visuais ainda entendam sua mensagem ou chamada para ação.

Evite imagens de texto

Sempre que possível, evite colocar texto dentro de imagens — leitores de tela não conseguem ler texto baseado em imagem, e os usuários não podem ajustar facilmente o tamanho da fonte ou a cor para melhor visibilidade. Considere estas dicas:

  • Remova texto quando possível: Mova qualquer texto descritivo ou promocional da imagem para um campo de texto na sua mensagem. Dessa forma, os usuários podem redimensionar ou recolorir conforme necessário usando as preferências do dispositivo ou navegador.
  • Teste legibilidade e contraste: Se você precisar manter texto na imagem, siga as boas práticas de contraste de cores e use uma fonte em escala grande. Isso significa que o texto deve ter pelo menos 18 pontos (cerca de 24 pixels) para texto sem negrito ou 14 pontos (cerca de 18 pixels) se estiver em negrito. Usar esses tamanhos ajuda o texto a permanecer legível sem forçar os usuários a dar zoom, e melhora o contraste geral e a legibilidade do conteúdo. Teste para confirmar que ainda é legível em telas menores.
  • Forneça texto alternativo: Para texto essencial que deve permanecer na imagem, inclua texto alternativo descrevendo as palavras.

Quando imagens contêm texto que não pode ser editado, usuários com deficiências visuais perdem a flexibilidade de fazer ajustes de leitura. Ao separar texto de imagens, você ajuda mais usuários a ler e interagir com sua mensagem confortavelmente.

Dicas para escrever texto alternativo

Descreva o que realmente está na imagem

Usuários de leitores de tela dependem do texto alternativo para entender o conteúdo ou função de uma imagem. Evite “linguagem de marketing” genérica que não corresponde ao que é mostrado visualmente.

Mantenha curto, mas específico

Texto alternativo conciso facilita o processamento pelos usuários. Inclua detalhes suficientes para transmitir o propósito, mas pule qualquer excesso. Como regra geral, mantenha o texto alternativo em 125 caracteres ou menos. Se algo mais do que uma frase breve for necessário, considere usar um dos métodos de descrição longa do W3C.

Evite “imagem de” ou “foto de”

Leitores de tela já anunciam que é uma imagem. Vá direto à descrição do assunto.

Reflita o texto que aparece na imagem

Se uma imagem inclui texto essencial, coloque essa informação no texto alternativo para que os usuários não percam.

Atenha-se ao contexto relevante — sem jargão de marketing extra

Não preencha o texto alternativo com termos de SEO ou chamadas para ação que não estejam diretamente relacionadas à imagem. Forneça valor para quem não pode ver a imagem.

Considere o propósito da imagem

Se uma imagem funciona como um link ou chamada para ação, descreva a ação pretendida (“Comprar”, “Link para”, “Cadastrar”), não apenas o rótulo ou produto mostrado.

Se a imagem não tem um propósito, deixe isso claro também. Imagens decorativas, como logos, devem ter uma tag alt vazia (alt="") para que os leitores de tela saibam que devem ignorá-la. Sem isso, geralmente o nome do arquivo da imagem é lido.

Vídeos

Vídeos são envolventes, mas se não forem acessíveis, você corre o risco de excluir parte do seu público. Use as dicas a seguir para tornar seu conteúdo de vídeo mais inclusivo:

Forneça legendas ocultas

Inclua legendas ocultas nos seus vídeos para que os usuários possam acompanhar os diálogos, efeitos sonoros e outros conteúdos de áudio. As legendas ajudam:

  • Pessoas surdas ou com dificuldade auditiva
  • Espectadores assistindo sem som
  • Falantes não nativos que preferem ler junto

Legendas ocultas podem ser ativadas ou desativadas, permitindo que os usuários escolham o que funciona melhor para eles.

Forneça controles de reprodução

Certifique-se de que seu vídeo incorporado inclua controles de reprodução acessíveis — como reproduzir, pausar, silenciar e avançar — para que os usuários possam interagir da forma que funciona melhor para eles.

Evite reprodução automática

Sempre que possível, evite configurar vídeos para reprodução automática. A reprodução automática pode ser perturbadora ou desorientadora para:

  • Usuários que dependem de leitores de tela ou navegação por teclado
  • Pessoas com sensibilidade a movimento
  • Qualquer pessoa em um ambiente silencioso (como um local de trabalho ou à noite)

Deixe os usuários escolherem quando reproduzir um vídeo incluindo controles claros.

Evite conteúdo com flashes ou efeitos estroboscópicos

Não inclua vídeos com efeitos de flash ou estroboscópicos, especialmente em alta frequência. Eles podem provocar convulsões em usuários com epilepsia fotossensível e causar desconforto em outros.

Contraste de cores

Contraste de cores suficiente ajuda a garantir que suas mensagens sejam fáceis de ler para todos, incluindo pessoas com baixa visão ou aquelas que visualizam seu conteúdo em condições de iluminação brilhante ou desafiadoras. Mire em proporções de contraste que estejam em conformidade com os requisitos de nível AA do WCAG 2.2:

  • Proporção de contraste de 4.5:1 para texto normal (pense em texto do corpo, botões e links)
  • Proporção de contraste de 3:1 para texto grande (pense em títulos e rótulos maiores)

Você pode testar suas escolhas de cores usando a Ferramenta de Verificação de Contraste do WebAim.

HTML personalizado

Se você usa qualquer HTML personalizado nas suas mensagens:

  • Use HTML semântico. Isso significa usar os elementos HTML corretos para o propósito pretendido, em vez de estilizar um elemento para parecer outro. A maioria dos elementos HTML tem seu próprio suporte de acessibilidade integrado.
  • Para o idioma no nível do documento, onde a Braze pode adicionar metadados HTML na exportação, consulte Idioma de acessibilidade; o comportamento varia por canal. Quando você marca o conteúdo por conta própria, defina o atributo lang no seu HTML para identificar o idioma do seu conteúdo. Leitores de tela usam diferentes bibliotecas de som para cada idioma com base na pronúncia e características desse idioma. Se isso não for especificado, o leitor de tela assume que o conteúdo está escrito no idioma padrão que o usuário escolheu ao configurar o leitor de tela. Se a mensagem não estiver realmente no idioma padrão, o leitor de tela pode não pronunciar a mensagem corretamente.
1

<html lang="en-us">
  • Use atributos ARIA para fornecer contexto extra. Esses atributos fornecem informações adicionais para tecnologias assistivas, ajudando a esclarecer o papel, estado ou propriedades de elementos de interface que podem não ser claros de outra forma.

Atributos ARIA

Quando você está usando código personalizado nos editores da Braze, pode usar Accessible Rich Internet Applications (ARIA) para fornecer suporte extra de acessibilidade para usuários que dependem de tecnologia assistiva. Papéis e atributos ARIA ajudam leitores de tela a interpretar seu conteúdo com mais clareza, especialmente quando você está usando elementos que não transmitem significado por si só (como <div> ou <span>).

Aqui estão alguns exemplos especialmente úteis em contextos de envio de mensagens:

aria-label

aria-label adiciona um nome acessível a elementos que não têm texto visível. Se você está usando um ícone sem texto (como uma lixeira ou “X” para fechar), alguém usando um leitor de tela não saberá o que ele faz — a menos que você o rotule. aria-label dá voz a esse ícone.

1
2
3

<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledby conecta um elemento a algo que já tem um rótulo visível. Então, se você tem um banner ou região que deve ser lido em voz alta com um título, pode usar aria-labelledby para dizer à tecnologia assistiva: “Use aquele título ali para nomear esta parte.”

1
2

<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true" oculta elementos dos leitores de tela. É útil para texto ou elementos visuais que não transmitem significado importante — como um brilho, marca de verificação ou emoji usado puramente para estilo.

Isso mantém a experiência mais limpa para usuários de leitores de tela, que de outra forma poderiam ouvir conteúdo redundante ou confuso. Também é útil para ocultar coisas como conteúdo de acordeão fora da tela que ainda não foi expandido.

1

<span aria-hidden="true">✔️</span>

Em geral, é melhor usar alt="" para imagens decorativas e ícones em vez de aria-hidden="true". Embora o HTML semântico seja amplamente suportado por todos os leitores de tela e softwares assistivos, o suporte ao ARIA varia. Mesmo se você usar aria-hidden, ainda deve incluir um atributo alt vazio.

role=”presentation”

role="presentation" diz à tecnologia assistiva para ignorar elementos que servem apenas para layout, como tabelas de design. Por exemplo, e-mails frequentemente usam tabelas apenas para alinhar elementos. Sem esse papel, leitores de tela podem assumir que seu layout é uma tabela de dados e começar a ler números de linhas e colunas.

1

<table role="presentation">...</table>

E-mails criados no editor de arrastar e soltar de e-mail têm elementos de apresentação automaticamente marcados com o atributo ARIA role="presentation".

aria-live=”polite”

aria-live="polite" anuncia atualizações quando o conteúdo muda sem necessidade de interação do usuário. Use quando você exibir atualizações dinâmicas dentro de uma mensagem, como sucessos, erros ou outras notificações.

1

<div aria-live="polite">Your preferences have been saved.</div>

Testes automatizados de acessibilidade

Para ajudar você a identificar e corrigir problemas de acessibilidade cedo, a Braze oferece testes automatizados de acessibilidade nas seguintes áreas:

Esses testes verificam sua mensagem em relação ao padrão Web Content Accessibility Guidelines (WCAG) — um conjunto de padrões técnicos internacionalmente reconhecidos para conteúdo acessível. Quaisquer problemas que possam ser detectados automaticamente são sinalizados e categorizados por gravidade para ajudar você a priorizar.

O que os testes automatizados podem e não podem detectar

Testes automatizados de acessibilidade são um ótimo ponto de partida — mas não conseguem detectar tudo. Alguns problemas precisam de um olhar humano para serem avaliados adequadamente, especialmente quando o contexto ou o design visual desempenha um papel na forma como os usuários experimentam seu e-mail.

Você pode ver alguns problemas marcados como Precisa de revisão. Esses são casos em que o verificador não consegue determinar com certeza se algo é um problema de acessibilidade. Quando isso acontecer, recomendamos revisá-lo manualmente.

Alguns exemplos do que ferramentas automatizadas não conseguem detectar de forma confiável incluem:

  • Se a ordem de foco dos elementos interativos segue uma sequência lógica
  • Se o conteúdo é totalmente operável com teclado, sem necessidade de mouse
  • Se o texto alternativo descreve significativamente uma imagem
  • Se os títulos são usados adequadamente para organizar o conteúdo
  • Se links e botões estão claramente rotulados e são fáceis de entender
  • Se os alvos de toque são grandes o suficiente e espaçados adequadamente
  • Se o texto sobre imagens de fundo atende aos requisitos de contraste de cores
  • Se as instruções ou rótulos são claros e úteis para todos os usuários

Essas limitações não são exclusivas da Braze — são comuns a todas as ferramentas automatizadas de acessibilidade. Verificações automatizadas não conseguem simular cada tecnologia assistiva, leitor de tela ou necessidade do usuário. É por isso que acessibilidade não é uma verificação única — é uma prática contínua.

Mesmo que sua mensagem passe em todas as verificações automatizadas, ainda é importante:

  • Revisar cuidadosamente os problemas sinalizados, especialmente aqueles rotulados como Precisa de revisão.
  • Testar manualmente quando possível, especialmente para padrões de layout e interação.
  • Usar ferramentas como leitores de tela, navegação apenas por teclado e zoom do navegador para simular diferentes necessidades de acesso.

Ao combinar testes automatizados com uma revisão manual cuidadosa, você detectará mais problemas potenciais e criará campanhas mais inclusivas e utilizáveis para cada destinatário.
New Stuff!