Iniciar sessão
Iniciar a avaliação gratuita

Acessibilidade a temas

Ao personalizar o seu tema, é boa ideia fazer escolhas de design e conteúdo que ajudem a manter a sua loja online acessível. Um website acessível é concebível para que possa ser utilizado por todos, incluindo pessoas portadoras de deficiências. A acessibilidade à sua loja online é essencial para proporcionar uma experiência inclusiva aos seus clientes.

As diretrizes abaixo foram criadas com as Diretrizes de acessibilidade de conteúdo da Web (WCAG) em mente. Como existem muitos fatores a serem considerados ao criar um website acessível, cumprir apenas as diretrizes abaixo não garante que a sua loja online seja totalmente acessível. Pode saber mais sobre acessibilidade na web, visitando o website da WCAG ou vendo as funcionalidades listadas abaixo.

Nesta página

Acessibilidade de texto

É importante que o texto na sua loja online seja legível para clientes com deficiência visual ou que tenham dificuldade em ler blocos densos de texto.

Contraste de cor

Ao editar as cores da sua loja online, verifique se todo o seu texto está acessível a clientes daltónicos ou com alguma deficiência visual. Esses clientes contam com um contraste de cor adequado para diferenciar visualmente uma coisa da outra. Pode utilizar uma ferramenta de relação de contraste online para verificar o contraste das partes diferentes da sua loja.

No exemplo abaixo, o texto tem uma relação de contraste de 2.4:1 face ao segundo fundo e é difícil de ler por alguns clientes.

Um bloco de texto cinzento claro e um fundo branco sólido.

No próximo exemplo, o texto tem uma relação de contraste de 4.8:1 e é fácil de ler para muitos clientes.

Um bloco de texto cinzento escuro num fundo branco sólido.

Teste o contraste de todo o texto, incluindo o corpo do texto, títulos, ligações e campos de formulário. Utilize as seguintes diretrizes:

  • A cor do texto do corpo e do texto do botão tem uma relação de contraste de pelo menos 4.5:1 face ao plano de fundo.
  • A cor dos títulos e outros textos grandes (tamanho do tipo de letra de 24 px e mais) têm uma relação de contraste de pelo menos 3:1 face ao plano de fundo.
  • A cor de todo o texto sobre as imagens, incluindo apresentações de diapositivos, faixas e vídeos, tem relações de contraste suficientes face ao plano de fundo. Para texto grande (tamanho do tipo de letra de 24 px ou mais), o contraste é de pelo menos 3:1. Para texto mais pequeno, o contraste é de pelo menos 4.5:1.
  • A cor dos elementos não texto, incluindo limites e ícones de entrada, tem uma relação de contraste de pelo menos 3:1 face ao plano de fundo.

Títulos de texto

Quando adiciona títulos à sua página com o editor de rich text, é importante mantê-los em ordem sequencial (1 - 6). Os títulos são utilizados por tecnologias de apoio para comunicar como o conteúdo da página é organizado. Ignorar níveis, como um nível de título 2 seguido por um nível de título 4, pode ser confuso para os utilizadores. Utilize a seguinte diretriz:

  • Os títulos são utilizados em ordem sequencial e não ignoram níveis.

Tamanho e alinhamento do texto

Ao editar as definições de tipografia do tema, verifique se o texto é grande o suficiente para que os clientes possam ler confortavelmente.

O texto também deve ter um espaçamento consistente entre palavras e letras para facilitar a leitura. No exemplo abaixo, o alinhamento do texto é justificado, o que cria espaçamento inconsistente entre as palavras.

Um bloco de texto justificado e alinhado. Cada linha de texto preenche o espaço entre cada margem, forçando um espaçamento variado entre as palavras para que estas se ajustem à página.

No próximo exemplo, o alinhamento do texto é alinhado à esquerda, o que cria um espaçamento consistente entre as palavras.

Um bloco de texto alinhado à esquerda. Existe um espaçamento consistente entre cada palavra.

Ao personalizar o tamanho e o alinhamento do texto, utilize as seguintes diretrizes:

  • O tamanho mínimo do tipo de letra para o texto do corpo é equivalente a 16 px.
  • O alinhamento do texto não é justificado. O texto justificado cria espaçamento inconsistente entre palavras.

Ligações do texto

Ao adicionar ligações ao seu texto, verifique se podem ser identificadas por todos os seus clientes. Como alguns clientes têm problemas para ver cores, não é possível confiar apenas numa alteração de cor para diferenciar uma ligação do texto normal. No exemplo abaixo, o texto Descobrir a nossa história está sublinhado para que não dependa da mudança de cor para comunicar que o texto é uma ligação:

Uma mensagem de boas-vindas declarando

Se editar a folha de estilo do seu tema, não remova os estilos de ligação do texto. Utilize a seguinte diretriz:

  • As ligações do texto estão sublinhadas ou têm outro diferenciador visual do texto normal.

Texto alternativo para imagens

Quando adiciona imagens à sua loja online, é importante torná-las acessíveis a clientes cegos ou com visão reduzida. Pode tal, adicione texto alternativo que descreva com precisão cada imagem. Os clientes que utilizam leitores de ecrã confiam no texto alternativo para comunicar o conteúdo das imagens na sua loja online.

Pode adicionar texto alternativo às imagens do seu produto no admin Shopify. Pode adicionar texto alternativo às outras imagens no seu tema no editor de temas.

Quando adiciona texto alternativo a uma imagem, uma boa prática é fingir que está a descrever a imagem para alguém com os olhos fechados. Ajude-os a criar uma imagem na sua mente. O modo como descreve uma imagem também depende do contexto da sua página web. Por exemplo, pode descrever uma imagem de maneira diferente se o seu negócio for uma agência de viagens ou se for uma loja de equipamentos para atividades ao ar livre. Considere a seguinte imagem:

Dois amigos de mochila às costas com os braços à volta um do outro, observando o oceano

Para uma agência de viagens, pode fazer referência ao país e à região para onde os dois amigos estão a viajar e ao nome do oceano ou ao mar para o qual estão a olhar. Por outro lado, para uma loja de equipamentos para atividades ao ar livre, pode concentrar-se nas marcas e características das mochilas dos dois amigos.

Se o seu negócio for uma agência de viagens, um exemplo de texto alternativo mau pode ser: "Duas pessoas em frente ao oceano." Para a mesma agência, um exemplo de texto alternativo bom pode ser: " Dois amigos a viajar em Lagos, Portugal, a olharem para a enseada da Praia do Camilo num dia de sol."

Apresentação de diapositivos e acessibilidade de vídeo

Quando adiciona vídeos à sua loja online, certifique-se de que considera as necessidades dos clientes com visão reduzida, os clientes surdos ou com deficiência auditiva ou clientes suscetíveis a distúrbios vestibulares.

Alguns destes clientes dependem da capacidade conversão de texto em voz dos leitores de ecrã, que lê em voz alta os conteúdos de uma página web. O áudio adicional de vídeos e músicas, especialmente quando é inesperado, pode dificultar esta experiência. Para clientes surdos ou com deficiência auditiva, é uma boa ideia adicionar legendagem de áudio aos seus vídeos para que esses clientes possam aceder ao conteúdo.

Os clientes com distúrbios vestibulares podem sentir tonturas com conteúdo móvel. Por este motivo, é importante que as apresentações de diapositivos e vídeos não sejam reproduzidos automaticamente.

apresentações de diapositivos

Ao adicionar uma apresentação de diapositivos à sua loja online, utilize as seguintes diretrizes:

  • As apresentações de diapositivos não são reproduzidas automaticamente.
  • Se as apresentações de diapositivos forem reproduzidas automaticamente, incluem uma definição que os clientes podem utilizar para pausar ou interromper a apresentação de diapositivos.

Vídeos

Ao adicionar um vídeo à sua loja online, utilize as seguintes diretrizes:

  • Os vídeos não são reproduzidos automaticamente.
  • Se os vídeos forem reproduzidos automaticamente, o áudio será silenciado.
  • Para vídeos que incluem áudio, o vídeo é totalmente visível e não é obstruído por outros elementos da página. Isto permite que a legendagem de áudio permaneça visível.
  • Para vídeos que incluem diálogos, estão disponíveis transcrições de texto. Estas são incluídas na página ou numa ligação para uma página separada.

Estas diretrizes também se aplicam a vídeos que estão numa apresentação de diapositivos.

Assistência de teclado

Os clientes com deficiência visual ou motora podem utilizar um teclado para navegar e concluir tarefas online. Estes clientes contam com um indicador visual para comunicar onde o foco do teclado está numa página web. No exemplo abaixo, o campo E-mail possui um indicador de foco visual:

O ecrã de início de sessão de um cliente numa loja online que mostra campos de formulário para o e-mail e palavra-passe. O campo e-mail está contornado a azul.

Se editar a folha de estilos do tema, certifique-se de que não remove o estilo de foco do teclado de nenhum elemento da página. Utilize a seguinte diretriz:

  • Todos os elementos da página interativa têm um indicador visual claro quando têm foco do teclado. Estes elementos incluem ligações, botões e campos de formulário.

Recursos

Para saber mais sobre acessibilidade na web para os tópicos discutidos neste artigo, consulte os seguintes recursos.

Recursos de contraste de cores

Recursos de texto

Recursos de texto alternativo

Recursos de vídeo e apresentação de diapositivos

Recursos de assistência de teclado

Não consegue encontrar as respostas que procura? Estamos aqui para ajudar.