Melhore a usabilidade do seu site para pessoas com deficiências.

Você pode personalizar muitos aspectos do seu site para deixar mais acessível e fácil de navegar para todos os visitantes, incluindo aqueles com deficiência ou que usam leitor de tela e outras tecnologias assistivas.

Este guia traz recomendações para você criar e estruturar seu conteúdo.

Experimente também: torne seu site acessível com recursos integrados

Atenção: este guia é um recurso e não serve como aconselhamento jurídico. O Squarespace não dá conselho sobre leis nem normas de acessibilidade específicas ao seu site ou empresa, conforme declarado nos nossos Termos de Serviço.

Layout

Um site com layout e design claros é útil para pessoas com problema visual ou cognitivo. Aliás, um layout direto e padronização também beneficia quem não está familiarizado com o computador ou quem acessa o seu site em uma tela menor, como no celular. Diferentes partes do site, como os menus de navegação, links e seções de texto, devem ser fáceis de identificar.

Navegação pelo teclado

Alguns visitantes usam o teclado (em vez do mouse) para navegar no seu site. A acessibilidade do teclado também é importante em certas tecnologias assistivas, como reconhecimento de voz e leitor de tela. Para testar a acessibilidade do seu site, tente navegar apenas com o teclado.

Personalizar o contorno do foco

Embora os sites do Squarespace na versão 7.1 tenham um recurso de contorno de foco integrado que destaca itens em uma página, como links de navegação e campos de formulário, o contorno de foco é padrão em todos os sites e páginas. 

Não é possível personalizar a cor ou a espessura da linha. O contorno aparece quando os visitantes pressionam Tab no teclado. Na primeira vez que você pressionar Tab, uma mensagem Pular para o conteúdo será exibida. Pressione a barra de espaço para pular o cabeçalho e a navegação do site e ir diretamente para o conteúdo do site, ou continue pressionando Tab para navegar para outro conteúdo.

Atenção: para evitar problemas com o recurso de contorno de foco, use a versão atualizada do seu browser. Siga estes passos para atualizar a versão do browser.

Atalhos de teclado do Squarespace

Saiba mais sobre os atalhos de teclado que você pode usar ao gerenciar e editar seu site.

Editor Intuitivo

Ao editar uma seção do Editor Intuitivo, recomendamos o seguinte:

• Se os blocos ficarem sobrepostos, veja se o conteúdo de todos os blocos estão visíveis aos visitantes.
• Pense em como diferentes elementos podem interagir no bloco. Não é recomendável, por exemplo, colocar um bloco de botões em cima de um bloco de formulário, pois os visitantes podem não saber qual botão usar para enviar o formulário.
• Ao incluir um texto sobre outros tipos de conteúdo, veja se ele fica legível. Talvez você tenha que adicionar um fundo colorido ao bloco e alterar a cor do texto para ele se destacar na imagem; ou transferir o texto para um local em que ele fique legível.

Linguagem clara e concisa

Ao criar o conteúdo do site, é importante considerar a acessibilidade. Ela envolve o idioma, a estrutura do texto e a organização do conteúdo. Um texto bem organizado, breve e claro é útil para todos os visitantes, especialmente aqueles com deficiências.

Ao escrever o texto do site:

• 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 essa página das outras no seu site.
• Coloque primeiro as informações específicas e mais relevantes; por exemplo: “Guia de acessibilidade” em vez de “Um guia sobre acessibilidade”.

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.

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

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.

Links

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:

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.

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

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.

Como exemplo, você pode incluir placeholders com texto nos campos do formulário.Assim, os visitantes têm uma ideia melhor de como preencher o formulário. Lembre-se de que o texto do placeholder não substitui o texto da etiqueta. Saiba mais no nosso fórum.