Criando um site Commerce acessível

Dicas sobre como deixar sua loja on-line fácil de navegar para todos os visitantes.

Ultima atualização 19 de fevereiro de 2025

Para que os visitantes naveguem melhor na sua loja on-line, é importante incorporar recursos de acessibilidade no design do seu site comercial. Isso não só promove inclusão como amplia o público. Use este guia para conferir os elementos de design a considerar e os recursos para deixar seu site Commerce mais acessível.

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.

Imagens de produtos

Espaçamento e tamanho

Todas as imagens em destaque do item do produto são dispostas em uma grade na página da sua loja. Para deixar sua loja mais acessível para visitantes com deficiência visual, considere um espaçamento nas imagens. Você pode aumentar o espaçamento e, alterando o número de colunas, o tamanho das imagens na seção de estilos da loja.

Adicione um texto alternativo às imagens dos produtos

Se você vende produtos físicos, é importante deixar um texto descritivo (texto alternativo) nas imagens dos produtos. O texto alternativo ajuda os visitantes que usam leitor de tela a navegarem no seu site e visitantes que não conseguem acessar as imagens por vários motivos, como rede lenta. Ao escanear a página, o leitor de tela identifica as imagens e lê o texto alternativo para o visitante. Use termos curtos que descrevam a imagem específica e o produto. Considere incluir as seguintes informações no texto alternativo:

  • Cor do produto - esse texto pode ser a única forma de um visitante determinar a cor do item que está comprando.
  • Palavras e descrições de imagens e onde elas estão localizadas no produto - se houver palavras ou imagens impressas no produto, um leitor de tela não as lerá nem descreverá para o visitante.

Ativando o zoom da imagem

Considere ativar o zoom da imagem para ajudar visitantes com problemas de visão. Com esse recurso ativado, os visitantes podem ampliar as imagens do produto para ver mais de perto o material, a textura e os detalhes mais finos. Saiba mais sobre esse recurso em Recursos especiais da página da loja.

Informações adicionais sobre o produto

Para adicionar conteúdo personalizado a uma página de produto, adicione blocos na seção Outras informações do editor do produto. Você pode considerar adicionar coisas como:

  • Dimensões e peso da embalagem, para que os clientes planejem melhor a entrega.
  • Vídeos com legendas do seu produto.
  • Uma tabela de tamanhos (se você vende roupas). Geralmente não são lidas por leitores de tela. Saiba mais sobre como criar uma tabela de tamanho em texto legível), consulte serviços externos como o Kiwi Sizing.

Anotação

para todas as perguntas sobre serviços externos, fale diretamente com o provedor terceirizado.

O processo de checkout

Botão de chamada para ação

É vital que seus clientes possam acessar os elementos interativos do Commerce, como os botões Adicionar ao carrinho e Continuar comprando. Para ajudar, você pode ajustar o estilo dos botões e deixá-los mais destacados. Para isso, altere a forma, a espessura do contorno e outras opções de formatação.

Ícone do Carrinho de Compras

Embora não seja possível ajustar o tamanho do ícone do carrinho de compras, você pode deixá-lo mais acessível: adicione uma margem e use um contraste adequado nas cores.

Se você vende um produto e quer ignorar o processo do carrinho de compras, pode ativar a compra expressa. Com esse recurso, você pode criar um botão Comprar perceptível e mais acessível.

Considerações sobre o áudio

Se o seu site tiver conteúdo de áudio, você pode adicionar transcrições. Isso deixa seu conteúdo mais acessível para visitantes com deficiência auditiva e também é bom para SEO. Para manter as páginas organizadas, você pode incluir as transcrições nas Páginas não vinculadas.

Idioma

Ao descrever e divulgar um produto ou serviço, é importante usar linguagem acessível.Saiba mais sobre como escrever de forma eficaz ficando a acessibilidade em "Criando um conteúdo acessível para o site".

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.