Criando um conteúdo acessível para o site

Dicas para criar conteúdo claro e conciso para o site.

Ultima atualização 17 de Julho de 2024

Ao criar o conteúdo do site, é importante manter a acessibilidade em mente. Isso inclui a linguagem que você usa, a estrutura do seu texto e a forma como você organiza o seu conteúdo.

Este guia dá dicas sobre como criar conteúdo e organizar o site tendo em vista a acessibilidade.

Anotação

este guia é um recurso introdutório, mas não deve ser interpretado nem considerado aconselhamento jurídico. O Squarespace não pode dar conselhos sobre o cumprimento de nenhuma lei, regulação ou padrão relativa à acessibilidade.

Linguagem clara e concisa

Um texto bem organizado, breve e claro é útil para todos os visitantes, especialmente aqueles com deficiências. Ao escrever o texto do seu site, considere as seguintes dicas:

  • Use linguagem e formatação claras.
  • Escreva frases e parágrafos concisos.
  • Evite jargões e expressões frases desnecessariamente complexas.
  • Descreva as siglas na primeira vez que elas aparecerem; por exemplo: "domínio de topo (TLD)".
  • Use marcadores nas listas quando apropriado.
  • Para esclarecer o texto, considere usar imagens, vídeos e áudios.

Títulos

A primeira coisa que o leitor de tela comunica quando um visitante acessa uma nova página da web é o título. Se a página tiver título de SEO, o leitor de tela lê esse título e ignora o título da página. Se a página não tiver título de SEO, o leitor de tela lerá o título da página.

Fornecer um título de página curto, específico e exclusivo ajuda os usuários que navegam por meio de tecnologia assistiva a entender rapidamente o conteúdo e a finalidade de uma página da web.

Recomendações para o título

Ao escrever o título:

  • Apresente o tópico e o objetivo da página.
  • O título de cada página deve ser exclusivo e diferenciar a página de outras páginas do seu site.
  • Coloque primeiro as informações específicas e mais relevantes; por exemplo: “Guia de acessibilidade” em vez de “Um guia sobre acessibilidade”.
  • Nas páginas que fazem parte de um processo com vários passos, inclua o número do passo no título. Por exemplo: “Escolha a cor do seu produto (Passo 2 de 3) - empresa ABC”.

Texto

Títulos

Para entender a estrutura de uma página, o leitor de tela usa código HTML em vez de elementos visuais. Com o leitor de tela, os visitantes navegam melhor quando cada seção da página tem um título. Os buscadores também usam os títulos para entender melhor o conteúdo; portanto, os títulos melhoram muito a SEO do site.

É bom
  • Usar os títulos com base na importância do texto; por exemplo: use o Título 1 (H1) para os títulos mais importantes.
  • Crie um título/Título 1 por página.
  • Use títulos curtos para agrupar parágrafos relacionados; e descreva claramente as seções.
  • Use a barra de ferramentas de texto para formatar o texto como título.
Não é bom
  • Use títulos fora de sequência. Suas opções de títulos variam de H1 a H6, e os leitores de tela as leem em ordem.
  • Usar o texto incorporado nas imagens para passar algum significado, exceto se também adicionar um texto alternativo.
  • Use negrito, itálico e outras formatações de design para criar a estrutura.
  • Use títulos sem conteúdo associado apenas para estilizar o texto. Isso torna a estrutura da página pouco clara e mais difícil de entender. 
  • Estilize o texto para que se pareça com um título se você não quiser que ele seja um título. Isso pode confundir os visitantes e impedir que aqueles que usam tecnologia assistiva naveguem rapidamente em seu site. 

Saiba mais sobre a estrutura e os títulos da página na Iniciativa de Acessibilidade da Web.

Descreva com clareza a finalidade de cada link no texto do link, de forma que a tecnologia assistiva passe entre os links sem perder o contexto. A formatação adequada dos links também melhora a SEO. Você não precisa incluir a palavra "link" no texto do link; a maioria dos leitores de tela diz "link" antes de cada link.

Por exemplo:

É bom “Para entrar em contato, acesse nossa página de contato.”
Não é bom “Para entrar em contato, clique aqui.”

Listas

Para organizar o layout do texto, use listas e títulos. As listas mostram trechos relacionados dentro do texto, como um grupo de links ou de exemplos. A formatação do texto como lista:

  • Facilita a navegação pelo conteúdo.
  • Ajuda os visitantes com deficiência cognitiva a entenderem o conteúdo.
É bom
  • Usar uma lista numerada quando a ordem for importante.
Não é bom
  • Usar a lista para conteúdos que não exijam uma lista (como tabela de dados ou apenas para fins de estilo).

Espaçamento

O texto precisa ter um espaçamento adequado entre as linhas. Assim, os visitantes podem ajudar o espaçamento de acordo com as deles e melhorar a leitura, se necessário. Você pode controlar o espaçamento entre as letras e a altura das linhas em Estilos do Site.

Cores

Você pode personalizar as cores do seu site usando os estilos do site. No entanto, evite depender apenas da cor para transmitir informações aos seus visitantes. As diferenças de cores podem passar despercebidas por pessoas com baixa visão ou deficiências de cores. Além disso, a cor por si só não transmite significado aos visitantes cegos que usam leitores de tela.

Você pode usar as Ferramentas do desenvolvedor do Google Chrome ou o Inspetor de acessibilidade do Firefox para simular como suas páginas podem ser vistas por pessoas com problemas comuns de visão de cores.

Anotação

essas são ferramentas de terceiros que estão fora do escopo do suporte do Squarespace.

É bom Agrupar cores com alto contraste.
Não é bom Emparelhe cores que são difíceis de diferenciar, como azul e roxo.

Formulários

Os visitantes podem achar os formulários complicados. É importante que cada campo esteja claramente identificado e que o formulário seja fácil de navegar. Use um bloco de texto para incluir instruções breves para preencher o adequadamente formulário.

Você pode incluir placeholders com texto que aparecem nos campos do formulário como um exemplo para os visitantes. Dessa forma, os visitantes têm uma ideia melhor de como devem preencher o formulário. Lembre-se de que o texto do placeholder não deve substituir o texto do rótulo. Você pode ler mais sobre texto de placeholder em nosso fórum.

Anotação

nosso suporte não cobre modificações no código personalizado; ou seja, não ajudamos na configuração nem na solução de problemas. Além disso, não garantimos a funcionalidade ou compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente como ele aparece na versão móvel, e se ele funciona em todos os templates. O código personalizado também pode causar problemas de exibição nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos para auxiliar você:

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.