Crie mensagens acessíveis no Braze

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

O conteúdo de marketing que exclui pessoas com deficiência, mesmo que não intencionalmente, pode impedir que milhões de pessoas interajam com sua marca. A acessibilidade no marketing consiste em capacitar todos a experimentar seu marketing, entender sua comunicação e ter a oportunidade de investir em seu produto, serviço ou marca ou de se tornar um fã deles.

Ao criar o envio de mensagens, reserve um tempo extra para considerar como tornar seus designs acessíveis a todos os clientes.

Acessibilidade no Braze

Apoiar a comunicação acessível significa manter-se aberto, curioso e disposto a aprender. No Braze, nos preocupamos em ajudar as pessoas a se conectarem - e sabemos que abrir espaço para todos faz parte de fazer isso bem. A acessibilidade não é algo que consideramos “pronto”, e agradecemos a chance de continuar aprendendo.

If you have feedback about the accessibility of Braze or messages sent from Braze, we’d love to hear from you. Open the Support menu in the global header and select Share feedback to send us your thoughts.

Áreas de deficiência a serem consideradas

Esta seção foi parcialmente adaptada de W3C: Habilidades e barreiras diversas.

• visual
• hearing
• physical
• cognitive

Melhores práticas

A criação de conteúdo acessível não precisa ser uma tarefa árdua. Escolhas pequenas e bem pensadas podem fazer uma grande diferença. Esta seção apresenta dicas práticas que ajudam mais pessoas a ler, navegar e interagir com sucesso com suas mensagens. Seja ajustando seu texto, estilizando seus botões ou adicionando texto alternativo às imagens, cada ajuste contribui para uma experiência mais inclusiva. Vamos nos aprofundar.

Conteúdo

Estrutura e fluxo

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

• Divida seu conteúdo em seções: O uso de títulos, marcadores e listas ajuda as pessoas a entenderem e examinarem rapidamente seu conteúdo, mesmo quando estão com pressa.
• Não pule os níveis de cabeçalho: Os títulos estruturam o conteúdo, ajudando os leitores a entender rapidamente como as seções se relacionam entre si. Quando você pula os níveis de cabeçalho (por exemplo, pular diretamente de um H2 para um H4), você quebra essa estrutura lógica. Isso torna mais difícil para os usuários, especialmente os que usam leitores de tela, navegar e entender claramente a sua mensagem. Siga sempre uma hierarquia lógica e sequencial de títulos (H1 a H2 a H3 e assim por diante) para garantir que seu conteúdo permaneça organizado, acessível e fácil de ser seguido por todos.

Legibilidade

Uma vez que sua estrutura esteja pronta, a próxima etapa é garantir que suas palavras sejam realmente fáceis de ler. Isso significa manter as coisas simples, digitalizáveis e confortáveis para leitura em todos os dispositivos e necessidades do usuário.

• Escreva frases curtas e claras: Frases curtas são fáceis de serem entendidas por todos, especialmente por pessoas que usam leitores de tela ou que têm dificuldade para processar informações complexas. Escreva para um nível de leitura da sétima série dos 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: O texto muito pequeno pode ser difícil de ler, especialmente em celulares. Use pelo menos 14px para o texto do corpo. Faça títulos maiores para que os usuários possam ver claramente a diferença. O 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: O texto justificado cria um espaçamento desigual entre as palavras, dificultando a leitura para pessoas com dislexia ou deficiências cognitivas. Considere a possibilidade de alinhar à esquerda o conteúdo que se estende por mais de duas linhas nos idiomas da esquerda para a direita ou à direita nos idiomas da direita para a esquerda.
• Use texto em negrito, itálico e caixa alta com moderação: Enfatizar muito o 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 - os aspectos que ajudam os usuários não apenas a ver seu conteúdo, mas a entender e interagir com ele.

• Identifique claramente os links e botões: Certifique-se de que o texto do link e do botão explique claramente o que acontecerá em seguida. Isso ajuda as pessoas que usam leitores de tela ou que navegam com um teclado a saber o que esperar.
• Acesse com calma os 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-as com moderação e certifique-se de que elas não substituam um texto claro e descritivo.
• Teste de truncamento: Sempre teste sua cópia enviando uma mensagem de teste para um dispositivo para garantir que o texto não esteja truncado. Se sua mensagem estiver sendo cortada, isso prejudica você e seu público, pois impede que seu conteúdo chegue até eles.

Botões

Use botões para indicar uma ação, como o envio de um formulário ou a reprodução de um carrossel. Se estiver navegando para um novo URL, considere usar um link.

Escreva textos claros e orientados para a ação

Assim como o texto do link, os rótulos dos botões devem descrever claramente a ação. O texto eficaz do botão é específico e orientado para a ação. Por exemplo, “Submit Order” informa claramente aos usuários o que acontecerá quando eles clicarem, enquanto simplesmente “Submit” pode ser ambíguo. Cada rótulo deve descrever com precisão a ação pretendida, para que os leitores de tela e todos os usuários possam entender e prever facilmente o resultado ao interagir com os botões.

Mantenha o texto do botão conciso para evitar o truncamento. Se o texto de um botão for muito longo, ele poderá ser cortado com reticências em vez de ser envolvido.

Use contraste de cores suficiente

O texto do botão deve ser fácil de ler em relação à cor de fundo do botão. Verifique se o texto do botão atende aos requisitos mínimos de contraste AA das WCAG 2.2:

• Taxa de contraste de 4,5:1 para texto de tamanho normal (a maioria dos botões)
• Taxa de contraste de 3:1 para textos grandes (normalmente acima de 18pt)

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

Torne os botões fáceis de tocar

Certifique-se de que seus botões (e links) sejam grandes o suficiente e tenham espaçamento suficiente para usuários de dispositivos móveis. Alvos de toque pequenos ou lotados podem ser frustrantes ou impossíveis de serem interagidos por usuários com deficiências motoras.

Links

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

Escreva um texto descritivo para o link

Escreva um texto de link que descreva claramente para onde o link levará o usuário. Os usuários de leitores de tela costumam pular de um link para outro como forma de folhear o conteúdo, portanto, certifique-se de que o texto do link seja independente. Evite frases como “clique aqui”, “mais” e “clique para obter detalhes”, pois elas são ambíguas quando lidas fora do contexto.

Por exemplo, considere como você pode escrever um link para visualizar um boletim meteorológico.

Como em todo conteúdo, seja direto e use o mínimo possível de palavras adicionais.

Evite estilizar links como botões

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

• Os links (<a> ) respondem à tecla Enter.
• Os botões (<button> ) respondem às teclas Enter e Espaço.

A estilização de um link para que se pareça com um botão pode confundir as pessoas que navegam com um teclado - elas podem tentar pressionar Espaço e esperar que funcione.

Use o elemento certo para a ação:

• Use <button> para ações, como o envio de um formulário ou a abertura de um modal.
• Use o endereço <a> para navegação, como um link para 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

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

Quando os direcionamentos de toque são muito pequenos ou muito próximos uns dos outros, pode ser frustrante ou impossível para os usuários com dificuldades de mobilidade ou destreza interagirem com a mensagem. Melhorar isso pode ajudar a reduzir erros e criar uma experiência mais tranquila para todos.

Veja a seguir o que você deve ter em mente:

• Use o tamanho adequado do direcionamento de toque. Procure obter um tamanho mínimo de alvo de toque de 44 x 44 pixels. Isso se alinha com as diretrizes WCAG 2.2 para direcionamentos de toque e padrões comuns de usabilidade móvel.
• Dê espaço para cada direcionamento. Se os alvos de toque estiverem muito próximos uns dos outros - como links empilhados ou botões bem agrupados - pode ser fácil perder ou tocar no alvo errado. Adicione espaçamento ou preenchimento entre os elementos para evitar isso.
• Não dependa apenas de recursos visuais. Até mesmo ícones pequenos podem se tornar mais úteis com preenchimento extra, permitindo que eles atendam aos requisitos de tamanho mínimo sem alterar o layout.
• Pré-visualização 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 direcionamentos de toque é uma das maneiras mais eficazes de tornar sua mensagem mais acessível no celular - e é uma boa experiência do usuário para todos.

Imagens

Fornecer texto alternativo

O texto alternativo (alt text) é uma breve descrição do conteúdo ou da função de uma imagem que os leitores de tela e outras tecnologias de assistência fornecem aos usuários. Para cada imagem significativa, escreva um texto alternativo descritivo para que os usuários que não puderem ver os recursos visuais ainda entendam sua mensagem ou chamada para ação.

Evite imagens de texto

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

• Remova o texto onde for possível: Em vez disso, mova qualquer texto descritivo ou promocional da imagem para um campo de texto em sua mensagem. Dessa forma, os usuários podem redimensioná-lo ou recolori-lo conforme necessário, usando as preferências do dispositivo ou do navegador.
• Teste a legibilidade e o contraste: Se você precisar manter o texto na imagem, siga as práticas recomendadas de contraste de cores e use uma fonte de grande escala. 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. O uso desses tamanhos ajuda o texto a permanecer legível sem forçar os usuários a aumentar o zoom, além de melhorar o contraste geral e a legibilidade do conteúdo. Teste para confirmar se ainda é legível em telas menores.
• Forneça texto alternativo: Para o texto essencial que deve permanecer na imagem, inclua um texto alternativo que descreva as palavras.

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

Dicas para escrever texto alternativo

• Descreva o que está de fato na imagem
• Seja breve, mas específico
• Evite “imagem de” ou “foto de”
• Refletir o texto que aparece na imagem
• Atenha-se ao contexto relevante - sem jargões extras de marketing
• Considere o objetivo da imagem

Descreva o que está de fato na imagem

Os usuários de leitores de tela dependem do texto alternativo para entender o conteúdo ou a função de uma imagem. Evite “discurso de marketing” genérico que não corresponda ao que está sendo mostrado visualmente.

Seja breve, mas específico

O texto alternativo conciso facilita o processamento pelos usuários. Inclua detalhes suficientes para transmitir o objetivo, mas não inclua nada de mais. Como regra geral, mantenha o texto alternativo com 125 caracteres ou menos. Se for necessário algo mais do que uma breve frase ou sentença, considere usar um dos métodos de descrição longa do W3C.

Evite “imagem de” ou “foto de”

Os leitores de tela já anunciam uma imagem. Vá direto para a descrição do assunto.

Refletir o texto que aparece na imagem

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

Atenha-se ao contexto relevante - sem jargões extras de marketing

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

Considere o objetivo da imagem

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

Se a imagem não tiver uma finalidade, informe isso também. Imagens decorativas, como logotipos, devem ter uma tag alt vazia (alt="") para que os leitores de tela saibam que não devem anunciá-las. Sem ele, geralmente o nome do arquivo de imagem é lido.

Vídeos

Os vídeos são engajadores, 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:

• Fornecer legendas ocultas
• Fornecer controles de reprodução
• Evite a reprodução automática
• Evite conteúdo piscante ou estroboscópico

Fornecer legendas ocultas

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

• Pessoas surdas ou com deficiência auditiva
• Telespectadores assistindo em um ambiente sem som
• Falantes não nativos que preferem ler junto

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

Fornecer controles de reprodução

Certifique-se de que o vídeo incorporado inclua controles de reprodução acessíveis, como reproduzir, pausar, silenciar e buscar, para que os usuários possam interagir com ele da maneira que for melhor para eles.

Evite a reprodução automática

Sempre que possível, evite configurar os vídeos para serem reproduzidos automaticamente. A reprodução automática pode ser chocante ou desorientadora para os usuários:

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

Permita que os usuários escolham quando reproduzir um vídeo, incluindo controles claros.

Evite conteúdo piscante ou estroboscópico

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

Contraste de cores

Um contraste de cores suficiente ajuda a garantir que suas mensagens sejam fáceis de ler para todos, inclusive para as pessoas com baixa visão ou para aquelas que visualizam seu conteúdo em condições de luminosidade ou desafiadoras. Procure obter taxas de contraste que atendam aos requisitos de nível AA das WCAG 2.2:

• Taxa de contraste de 4,5:1 para texto normal (pense no corpo do texto, botões e links)
• Taxa de contraste de 3:1 para textos grandes (como cabeçalhos 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ê usar algum HTML personalizado em seu envio de mensagens:

• Use HTML semântico. Isso significa usar os elementos HTML corretos para a finalidade pretendida, em vez de estilizar um elemento para que se pareça com outro. A maioria dos elementos HTML tem seu próprio suporte de acessibilidade incorporado.
• Defina a atribuiçãolang em seu HTML para identificar o idioma em que seu conteúdo está. Os leitores de tela usam diferentes bibliotecas de sons para cada idioma com base na pronúncia e nas características desse idioma. Se isso não for especificado, um leitor de tela assumirá 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 poderá não pronunciá-la corretamente.

1
<html lang="en-us">

• Use atribuições ARIA para fornecer contexto extra. Essas atribuições fornecem informações adicionais às tecnologias assistivas, ajudando a esclarecer a função, o estado ou as propriedades dos elementos da interface do usuário que, de outra forma, poderiam não estar claros.

Atribuições ARIA

Ao usar código personalizado nos editores do Braze, você pode usar oARIA (Accessible Rich Internet Applications) para fornecer suporte extra de acessibilidade para usuários que dependem de tecnologia assistiva. As funções e atribuições ARIA ajudam os leitores de tela a interpretar seu conteúdo com mais clareza, especialmente quando se usa elementos que não transmitem significado por si só (como <div> ou <span>).

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

• rótulo aria
• aria-labelledby
• aria-hidden=”true”
• role=”presentation”
• aria-live=”polite” (educado)

rótulo aria

aria-label adiciona um nome acessível a elementos que não têm texto visível. Se você estiver usando um ícone sem texto (como uma lixeira ou um “X” para fechar), alguém que usa 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. Portanto, se você tiver um banner ou uma região que deva ser lida em voz alta com um título, poderá usar o site aria-labelledby para informar à tecnologia assistiva: “Ei, 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 coisas dos leitores de tela. É útil para textos ou recursos visuais que não transmitem um significado importante, como um brilho, uma marca de seleção ou um emoji usado apenas por estilo.

Isso mantém a experiência mais limpa para os 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 e ícones decorativos em vez de aria-hidden="true". Embora o HTML semântico seja amplamente suportado por todos os leitores de tela e softwares de assistência, o suporte ao ARIA varia. Mesmo se você usar aria-hidden, deverá incluir uma atribuição alt vazia.

role=”presentation”

role="presentation" diz à tecnologia assistiva para ignorar elementos somente de layout, como tabelas de design. Por exemplo, os e-mails geralmente usam tabelas apenas para alinhar as coisas. Sem essa função, os leitores de tela podem presumir que o layout é uma tabela de dados e começar a ler os números das linhas e colunas.

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

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

aria-live=”polite” (educado)

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

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

Teste automatizado de acessibilidade

Para ajudá-lo a identificar e corrigir problemas de acessibilidade com antecedência, o Braze oferece testes automatizados de acessibilidade nas seguintes áreas:

• Visão da caixa de entrada para e-mails
• Verificador de acessibilidade para mensagens criadas usando nosso editor de HTML (por exemplo, mensagens no app em HTML, blocos de conteúdo em HTML, rodapés de e-mail personalizados, páginas de aceitação de e-mail e páginas de cancelamento de inscrição de e-mail).

Esses testes verificam sua mensagem em relação ao padrãoWCAG (Web Content Accessibility Guidelines) - um conjunto de padrões técnicos internacionalmente reconhecidos para conteúdo acessível. Todos os problemas que podem ser detectados automaticamente são sinalizados e categorizados por gravidade para ajudá-lo 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 toque 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ê poderá ver alguns problemas marcados como Precisa de revisão. Esses são casos em que o verificador não pode dizer com certeza se algo é um problema de acessibilidade. Quando isso acontecer, recomendamos revisá-lo manualmente.

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

• Se a ordem de foco dos elementos interativos seguir uma sequência lógica
• Se o conteúdo for totalmente operável com um teclado, sem a necessidade de um mouse
• Se o texto alternativo descrever uma imagem de forma significativa
• Se os títulos forem usados adequadamente para organizar o conteúdo
• Se os links e botões estiverem claramente identificados e forem fáceis de entender
• Se os alvos de toque forem grandes o suficiente e espaçados adequadamente
• Se o texto em imagens de fundo atender 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 do Braze - elas são comuns a todas as ferramentas de acessibilidade automatizadas. As verificações automatizadas não podem imitar todas as tecnologias assistivas, leitores de tela ou necessidades do usuário. É por isso que a acessibilidade não é uma verificação única - é uma prática contínua.

Mesmo que sua mensagem seja aprovada em todas as verificações automáticas, ainda assim é importante:

• Analise cuidadosamente os problemas sinalizados, especialmente aqueles marcados como Precisa de revisão.
• Faça testes manuais sempre que possível, especialmente para padrões de layout e interação.
• Use ferramentas como leitores de tela, navegação somente com 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 em potencial e criará campanhas mais inclusivas e úteis para todos os destinatários.