DocumentaçãoMarketo EngageGuia do Marketo

Crie conteúdo acessível accessible-content

Last update: Sat Mar 28 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Iniciante
  • Intermediário
  • Usuário

A Lei Europeia da Acessibilidade é uma diretiva destinada a reforçar o mercado interno de produtos e serviços acessíveis, eliminando os obstáculos causados pelas diferentes regras nacionais entre os Estados-Membros.

Esse regulamento estabelece que todas as comunicações digitais, incluindo emails, boletins informativos, PDFs e conteúdo para download, devem estar acessíveis. Ao criar conteúdo para seus destinatários, você deve seguir diretrizes específicas, como o uso de fontes acessíveis e formatos legíveis e o fornecimento de texto alternativo para imagens.

O Marketo Engage Email Designer permite cumprir facilmente esta diretiva, com base nas Web Content Accessibility Guidelines (WCAG) 2.1, nível AA. As práticas recomendadas para criar conteúdo acessível com o Marketo Engage estão listadas abaixo.

NOTE
Esta página trata de tornar o conteúdo acessível a todos os recipients, para que as pessoas com deficiência possam ler, entender e interagir com seus emails criados no Marketo Engage.

Garantir a legibilidade do texto text-readability

Use a guia Estilos do componente Texto para garantir que o texto seja legível, por exemplo, usando contraste de cores adequado e fontes simples.

Para fontes e texto, siga estas diretrizes:

Seleção de fonte

  • Use fontes sans-serif como Arial, Verdana, Tahoma, Helvetica ou Open Sans.
  • Evite fontes serif, cursivas ou decorativas no conteúdo do corpo.
  • Use um conjunto de fontes limitado para fins de consistência e fallback (por exemplo: font-family: Arial, Helvetica, sans-serif;).

Dimensionamento de fonte

  • Verifique um tamanho de fonte mínimo de 16px para o corpo de texto.
  • Use hierarquia adequada para cabeçalhos.

Contraste de cores

  • Mantenha uma taxa de contraste de pelo menos 4,5:1 entre o texto e o plano de fundo.
  • Para textos grandes (≥ 24px ou bold 18px), verifique se há pelo menos um contraste de 3:1.
  • Evite texto cinza-claro ou pastel em planos de fundo brancos.
  • Não confie apenas na cor para transmitir significado. Use sublinhados, ícones, etc.

Acessibilidade de texto

  • Evite texto em imagens.
  • Não use todas as letras maiúsculas no corpo de texto.
  • Garanta que o texto possa ser ampliado até 200% sem quebrar o layout.

Garantir acessibilidade visual visual-accessibility

  • Evite usar indicadores somente de cores para informações importantes.
  • Use rótulos de texto ou ícones para maior clareza.
  • Otimize seu design para layouts móveis e responsivos, garantindo que os botões sejam grandes e espaçados corretamente.
  • Teste regularmente entre dispositivos e tamanhos de tela para manter a acessibilidade.

No Marketo Engage, o tamanho e o espaçamento dos diferentes elementos no seu conteúdo podem ser refinados usando os parâmetros de estilo e atributos do painel Estilos do Email Designer.

Por exemplo, você pode atualizar o plano de fundo ou alterar as margens, o preenchimento e o alinhamento para melhorar a acessibilidade visual.

O Marketo Engage Email Designer permite pré-visualizar e otimizar o design para diferentes dispositivos e tamanhos de tela. A qualquer momento, você pode Alternar para o modo de exibição ativo para verificar como o conteúdo pode ser renderizado em vários tamanhos de dispositivo.

CAUTION
A visualização em tempo real é uma visualização genérica criada para comparar como o conteúdo pode ser renderizado em vários tamanhos de dispositivo. A renderização final pode variar de acordo com o cliente de email do recipient.

Usar texto alternativo para imagens alt-text

Use o componente Imagem para fornecer texto alternativo para imagens.

  • Descreva a finalidade da imagem de forma concisa e contextual.
  • Evite frases redundantes como "Imagem de…" e use texto alternativo vazio para imagens decorativas.
  • Para ícones com significado, forneça rótulos significativos e para imagens complexas, use um breve texto alternativo mais uma descrição mais longa em outro lugar.

Usar formato legível readable-format

Use a estrutura relevante do Email Designer e os componentes do conteúdo, bem como as opções no painel Estilos, para organizar o conteúdo de forma clara, lógica e concisa, acessível a todos.

  • Use HTML estruturado e semântico com cabeçalhos, parágrafos, listas e tabelas adequados.
  • Garantir que o conteúdo siga um fluxo lógico da esquerda para a direita, de cima para baixo.
  • Use uma linguagem clara e concisa.
  • Fornecer formatos alternativos para PDFs e infográficos.
  • Permita o redimensionamento e o refluxo do texto e verifique se a tipografia é legível com contraste de cor adequado em todos os formatos.

Garantir a legibilidade do conteúdo readability

Para ser legível, seu conteúdo deve ser claro, bem estruturado e utilizável por todos, incluindo pessoas com dificuldades visuais, cognitivas ou de leitura e aquelas que usam tecnologias assistivas. Alguns pontos a serem considerados ao criar conteúdo acessível incluem:

  • Mantenha as sentenças em torno de 20 palavras ou menos.
  • Edite sua cópia para que seja direta e concisa.
  • Use a voz ativa para manter a estrutura da frase mais simples.
  • Evite gírias, jargões ou palavras regionais com as quais algumas pessoas possam não estar familiarizadas.

Para avaliar sua legibilidade de email, você pode usar o popular Teste de Facilidade de Leitura Flesch, que pode ser encontrado no Microsoft Word e calcula como é fácil ler seu conteúdo em uma escala de 0 a 100.

Testar seu conteúdo test

Para verificar a acessibilidade do conteúdo, você pode usar os recursos de teste fornecidos pelo Marketo Engage. Eles não foram projetados especificamente para verificar se o conteúdo está totalmente acessível, mas podem fornecer um primeiro nível de verificação.

  • Pré-visualize o conteúdo usando perfis de teste.

  • Use a opção Renderização de email que usa o Litmus para simular seus designs nos principais clientes de email (Apple Mail, Gmail, Outlook) e ver se o texto, as cores e as imagens tornam seu conteúdo acessível.

  • Envie provas para testar a renderização do seu conteúdo antes de enviá-lo para o seu público real.

Para verificar de maneira mais consistente se o conteúdo está acessível de maneira confiável, procure por ferramentas externas específicas, como:

Usar modo escuro dark-mode

O modo escuro aprimora a acessibilidade visual para usuários com sensibilidade à luz ou deficiências visuais, melhorando a experiência de visualização.

Algumas práticas recomendadas para criar conteúdo no modo escuro incluem:

  • Uso de PNGs ou SVGs transparentes
  • Definição de metatags e CSS apropriados
  • Fornecer estilo de fallback acessível se o modo escuro não for suportado.

Verifique se os emails são renderizados corretamente no modo escuro, testando todo o conteúdo de email e os elementos da interface do usuário nos modos claro e escuro.

Usar atributos específicos para acessibilidade attributes

Atributos de idioma language

Ao criar designs, inclua os atributos lang (idioma) e dir (direção de texto) no corpo do conteúdo. Esses atributos ajudam as tecnologias assistivas (como leitores de tela) a interpretar e apresentar seu conteúdo de maneira apropriada.

  • O atributo lang indica o idioma do email para tecnologias assistivas, garantindo que as palavras sejam pronunciadas corretamente.

    accordion
    Exemplos

    Exemplo para inglês:

    code language-none 
    <body lang="en">

    Exemplo para francês:

    code language-none 
    <body lang="fr">

  • O atributo dir especifica a direção do texto. A maioria dos idiomas, incluindo inglês e francês, são lidos da esquerda para a direita (ltr), enquanto idiomas como árabe e hebraico são lidos da direita para a esquerda (rtl).

    accordion
    Exemplos

    Exemplo para inglês (da esquerda para a direita):

    code language-html 
    <body lang="en" dir="ltr">

    Exemplo para árabe (da direita para a esquerda):

    code language-html 
    <body lang="ar" dir="rtl">

Os leitores de tela dependem do atributo lang para aplicar as regras de pronúncia corretas, enquanto a direção do texto garante o fluxo do conteúdo naturalmente para idiomas da esquerda para a direita ou da direita para a esquerda. Sem esses atributos, os usuários podem enfrentar ordem de leitura confusa ou pronúncia incorreta. Sempre envolva seu corpo de email com os atributos lang e dir apropriados.

TIP
Se o email contiver vários idiomas, atribua os atributos de idioma apropriados a seções específicas (como blocos <table> ou <td>) para garantir que cada parte seja lida corretamente.

Tabelas tables

No conteúdo do HTML, as tabelas são frequentemente usadas para layout. Por padrão, os leitores de tela tratam cada <table> como uma tabela de dados, anunciando linhas, colunas e estrutura. Isso pode ser confuso se a tabela for usada apenas para formatação.

Adicione role="presentation" (ou role="none") às tabelas de layout para garantir que as tecnologias assistivas ignore sua estrutura e se concentre apenas no conteúdo real.

Exemplo - Tabela de layout (com role="presentation")
code language-html 
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <h1>Hello World</h1>
      <p>Welcome to our newsletter</p>
    </td>
  </tr>
</table>

Os leitores de tela leem:
"Olá, Mundo. Bem-vindo ao nosso informativo." (Nenhuma menção de linhas, colunas ou tabela)

Exemplo - Tabela de dados (sem role="presentation")
code language-html 
<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Parker</td>
    <td>62</td>
  </tr>
</table>

Os leitores de tela leem:
"Tabela com 2 colunas e 3 linhas."

"Nome, Peter. Pontuação, 19."

"Nome, Parker. Pontuação, 62."

TIP
Use role="presentation" exclusivamente para tabelas de layout. Para tabelas de dados, mantenha a estrutura semântica <table> para que os leitores de tela possam anunciar corretamente cabeçalhos e relações.

Os leitores de tela leem os links usando o texto. Se um link for rotulado apenas como "Clique aqui" ou "Leia mais", os usuários de tecnologias assistivas não saberão o destino. Para garantir a acessibilidade, eles precisam de um texto descritivo que indique claramente o target ou a ação.

Use o Designer de email para adicionar um link ao seu conteúdo e editar o rótulo para torná-lo visível (visível) e descritivo (claro sobre o propósito). Evite rótulos vagos como "aqui" ou "mais".

Exemplo - bom link (descritivo):
code language-none 
<p>Learn more in the
<a href="https://adobe.com/release-notes">August release notes</a>.
</p>

Os leitores de tela leem:
"Link, notas de versão de agosto."

Exemplo - Link inválido (não descritivo)
code language-none 
<p>Learn more about our new features.
  <a href="https://adobe.com/release-notes">Click here</a>.
</p>

Os leitores de tela leem:
"Link, clique aqui." (Não fornece contexto fora da ordem de leitura)

recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac