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 de fazer isso bem. Acessibilidade não é algo que consideramos “concluído”, e recebemos com satisfação 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.

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

Para interagir com o 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 em fala do conteúdo (ou seja, usar um leitor de tela)
  • Ouvir audiodescrições de vídeo
  • Ler texto usando Braille atualizável

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

Para entender o 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 (independentemente do volume do sistema)
  • Áudio em primeiro plano de alta qualidade, claramente distinguível de qualquer ruído de fundo

As deficiências físicas podem incluir fraqueza e limitações no controle muscular ou na sensibilidade, distúrbios articulares, dor que impede o movimento e membros amputados.

Esses usuários dependem do suporte a teclado para ativar funcionalidades (mesmo que não estejam usando um teclado padrão). Para interagir com o 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

As 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 compreender 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 previsível
  • 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, fica 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 seu conteúdo rapidamente — 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 a 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 em 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 de forma clara: Certifique-se de que o texto dos seus links e botões explique claramente o que acontecerá 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 a truncagem: 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 da 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 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ê usar 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.
In-App Messages (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évia 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, consulte 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 HTML lang. Ferramentas de teste geralmente procuram por html-has-lang. Content Cards usam seu campo de 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 em vez disso.

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 truncagem. Se o texto de um botão for muito longo, ele pode ser cortado com reticências em vez de quebrar 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 da 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 (tipicamente 18pt ou maior)

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, consulte 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 a 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 simplicidade 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 nesses editores. 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 Espaço.

Estilizar um link para parecer um botão pode confundir pessoas que navegam com teclado — elas podem tentar pressionar Espaço 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 da 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 utilizá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 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 para a 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”, “Inscrever-se”), 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 pular o anúncio. Sem isso, geralmente o nome do arquivo da imagem é lido.

Como os clientes de e-mail exibem texto alternativo

A exibição e renderização do texto alternativo em mensagens de e-mail é controlada pelo cliente de e-mail do destinatário (como Gmail, Outlook ou Apple Mail), não pela Braze. Se você notar diferenças em como o texto alternativo aparece em diferentes clientes de e-mail ou plataformas — por exemplo, texto alternativo sendo exibido de forma diferente no Gmail no desktop versus no app móvel do Gmail — isso se deve à forma como cada cliente escolhe renderizar o mesmo HTML.

Embora você possa incluir texto alternativo de qualquer tamanho no HTML do seu e-mail, alguns clientes de e-mail podem truncar ou ocultar texto alternativo que seja muito longo para caber nas dimensões da imagem. Se você tiver dúvidas sobre o comportamento do texto alternativo em um cliente de e-mail específico, entre em contato com o Suporte.

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

Inclua legendas 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 deficiência auditiva
  • Espectadores assistindo em um ambiente sem som
  • Falantes não nativos que preferem ler junto

As legendas 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 movimentos
  • 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. Esses efeitos podem provocar convulsões em usuários com epilepsia fotossensível e causar desconforto em outras pessoas.

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 intensa ou desafiadoras. Mire em proporções de contraste que estejam em conformidade com os requisitos de nível AA da WCAG 2.2:

  • Proporção de contraste de 4.5:1 para texto normal (como texto do corpo, botões e links)
  • Proporção de contraste de 3:1 para texto grande (como 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 no seu envio de 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 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 bibliotecas de som diferentes para cada idioma com base na pronúncia e características desse idioma. Se isso não for especificado, um 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 às tecnologias assistivas, ajudando a esclarecer o papel, estado ou propriedades de elementos da interface que, de outra forma, poderiam ser pouco claros.

Atributos ARIA

Quando você usa 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ê usa 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 textos 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 são apenas de 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 e-mail de arrastar e soltar 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 desde cedo, a Braze oferece testes automatizados de acessibilidade nas seguintes áreas:

Esses testes verificam sua mensagem em relação ao padrão das Diretrizes de Acessibilidade para Conteúdo da Web (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

Os 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 corretamente, especialmente quando o contexto ou o design visual influencia a experiência do usuário com 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 revisar manualmente.

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

  • Se a ordem do foco dos elementos interativos segue uma sequência lógica
  • Se o conteúdo é totalmente operável com um teclado, sem exigir o uso de mouse
  • Se o texto alternativo descreve a imagem de forma significativa
  • Se os títulos são usados corretamente para organizar o conteúdo
  • Se os links e botões estão claramente identificados 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 todas as tecnologias assistivas, leitores de tela ou necessidades dos usuários. Por isso, 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 os problemas sinalizados com atenção, especialmente aqueles marcados como Precisa de revisão.
  • Testar manualmente sempre que 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á Campaigns mais inclusivas e utilizáveis para cada destinatário.
New Stuff!