Acessibilidade para temas

Uma ótima ideia de como personalizar temas é fazer escolhas de design e conteúdo que ajudem a manter sua loja virtual acessível. O projeto de sites acessíveis é elaborado de tal forma que todos possam usar o site, até mesmo pessoas com deficiências físicas. Para proporcionar aos seus clientes uma experiência inclusiva, é imprescindível garantir a acessibilidade da sua loja virtual.

As diretrizes abaixo foram criadas com foco nas Web Content Accessibility Guidelines (WCAG). Como há muitos fatores a serem considerados ao criar um site acessível, somente as diretrizes abaixo não garantem que sua loja virtual esteja totalmente acessível. Aprenda mais sobre acessibilidade na web visitando o site da WCAG, ou vendo os recursos listados abaixo.

Acessibilidade de textos

É importante que o texto em sua loja virtual seja legível pelos clientes com deficiências visuais ou que tenham dificuldade em ler blocos de texto muito densos.

Contraste de cores

Ao editar as cores da sua loja virtual, certifique-se de que todo o texto seja acessível a clientes daltônicos ou com deficiências visuais. Esses clientes confiam em um contraste de cores adequado para fazer a distinção visual entre uma coisa e a outra. Você pode utilizar uma ferramenta de taxa de contraste online para verificar o contraste das diferentes partes da sua loja.

No exemplo abaixo, o texto tem uma taxa de contraste de 2,4: 1 em relação ao plano de fundo, dificultando a leitura para alguns clientes.

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

No próximo exemplo, o texto tem uma taxa de contraste de 4,8:1, facilitando a leitura para muitos clientes.

Um bloco de texto cinza escuro em um fundo branco sólido.

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

  • A cor do corpo do texto e o texto dos botões apresentam um índice de contraste de pelo menos 4.5:1 em relação ao fundo.
  • A cor dos cabeçalhos e de outros textos grandes (fontes com tamanho de 24 px e acima) apresenta um índice de contraste de pelo menos 3:1 em relação ao fundo.
  • A cor de todo o texto sobre imagens, incluindo apresentações de slides, banners e vídeos, tem taxas de contraste suficientes em relação ao plano de fundo. Para textos grandes (tamanho da fonte de 24 px e maior), o contraste é de pelo menos 3:1. Para textos menores, o contraste é de pelo menos 4,5:1.
  • A cor dos elementos considerados não texto, incluindo ícones e bordas de entrada, apresentam um índice de contraste de pelo menos 3:1 em relação ao fundo.

Títulos de texto

Ao adicionar 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 assistivas para comunicar como o conteúdo da página é organizado. Pular níveis, como um nível de título 2 seguido por um nível de título 4, pode ser confuso para os usuários. Siga esta diretriz:

  • Os títulos são usados em ordem sequencial e não pulam níveis.

Tamanho e alinhamento do texto

Ao editar as configurações de tipografia do seu tema, certifique-se de que o texto seja grande o suficiente para que os clientes possam ler confortavelmente.

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

Um bloco de texto justificado alinhado. Cada linha do texto preenche o espaço de ponta a ponta, forçando um espaçamento variado entre as palavras para torná-lo adequado.

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

Um bloco de texto alinhado à esquerda. Há espaçamento consistente entre cada palavra.

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

  • A fonte do corpo do texto deve ter um tamanho mínimo de 16 px.
  • O alinhamento de texto não é justificado. Texto justificado cria espaçamento inconsistente entre as palavras.

Ao adicionar links ao seu texto, verifique se eles possam ser identificados por todos os seus clientes. Como alguns clientes têm dificuldade em ver cores, você não pode depender apenas de uma alteração de cor para diferenciar um link do texto normal. No exemplo abaixo, o texto Descubra a nossa história está sublinhado para não depender da alteração de cor para comunicar que o texto é um link:

Uma mensagem de boas-vindas dizendo

Se você editar a folha de estilo do seu tema, certifique-se de não remover os estilos de link do texto. Siga esta diretriz:

  • Os links de texto podem ser sublinhados ou apresentar um diferenciador visual diferente do texto normal.

Texto alternativo para imagens

Ao adicionar imagens à sua loja virtual, é importante torná-las acessíveis a clientes cegos ou com pouca visão. Para fazer isso, adicione um texto alternativo que descreva cada imagem com precisão. Os clientes que utilizam leitores de tela dependem de texto alternativo para divulgar o conteúdo das imagens na sua loja virtual.

É possível adicionar texto alternativo às imagens de seus produtos no admin da Shopify. É possível adicionar texto alternativo às outras imagens do seu tema no editor de temas.

Ao adicionar texto alternativo a uma imagem, uma boa ideia é fingir que você está descrevendo a imagem a alguém com os olhos fechados. Ajude a pessoa a criar uma imagem na mente. A forma de descrever a imagem depende também do contexto da sua página Web. Supondo que sua empresa fosse uma agência de viagens, a descrição da imagem poderia ser diferente da descrição que você faria se a empresa fosse uma loja de equipamentos de lazer. Observe esta imagem:

Dois amigos abraçados carregando mochilas nas costas e olhando para o oceano

Em uma agência de viagens, você poderia mencionar o país e a região pelos quais os dois amigos estão viajando e o oceano para o qual estão olhando. Por outro lado, em uma loja de equipamentos de lazer, você poderia se concentrar nas marcas e características das mochilas dos dois amigos.

Se sua empresa fosse uma agência de viagens, teríamos como exemplo de texto alternativo inadequado o seguinte: "Duas pessoas em frente ao oceano". Com relação à mesma agência, um exemplo de texto alternativo bem elaborado seria: "Dois amigos viajando em Lagos, Portugal, olhando para a angra arenosa da Praia do Camilo em um dia de sol".

Acessibilidade de vídeos e apresentações de slides

Ao adicionar vídeos à sua loja virtual, certifique-se de considerar as necessidades dos clientes com pouca visão, clientes com deficiências auditivas ou clientes possivelmente suscetíveis a doenças vestibulares.

Alguns desses clientes dependem do recurso de texto para fala dos leitores de tela, que lê em voz alta o conteúdo de uma página da web. Áudio adicional de vídeos e músicas, especialmente quando é inesperado, pode dificultar essa experiência. Para clientes com deficiência auditiva, é uma boa ideia adicionar legendas aos seus vídeos para que esses clientes possam acessar o conteúdo.

Clientes com doenças vestibulares podem sentir tontura com o conteúdo em movimento. Consequentemente, é importante que apresentações de slides e vídeos não sejam reproduzidos automaticamente.

Apresentação de slides

Ao adicionar uma apresentação de slides à sua loja virtual, siga estas diretrizes:

  • A reprodução da apresentação de slides não acontece automaticamente.
  • As apresentações de slides automáticas incluem uma configuração que os clientes podem usar para pausar ou parar a apresentação de slides.

Vídeos

Ao adicionar um vídeo à sua loja virtual, siga estas diretrizes:

  • A reprodução de vídeos não acontece automaticamente.
  • Vídeos com reprodução automática não incluem áudio.
  • Vídeos com áudio são totalmente visíveis e não sofrem obstruções por outros elementos da página. Dessa forma, as legendas podem ser vistas o tempo todo.
  • Para vídeos que incluem diálogos, transcrições de texto estão disponíveis. Elas estão incluídas na página ou em um link para uma página separada.

Essas diretrizes são válidas também para vídeos em apresentações de slides.

Compatibilidade do teclado

Clientes com deficiência visual ou motora podem usar um teclado para navegar e realizar tarefas online. Esses clientes contam com um indicador visual para indicar onde o foco do seu teclado está em uma página da web. No exemplo abaixo, o campo E-mail tem um indicador de foco visual:

Uma tela de login de clientes nas lojas online que exibe campos de formulário para E-mail e Senha. O campo E-mail é contornado em azul.

Ao editar a folha de estilo do seu tema, não remova o estilo de foco do teclado de nenhum elemento da página. Siga esta diretriz:

  • Todos os elementos interativos da página apresentam um indicador visual claro quando equipados com foco do teclado. Esses elementos incluem links, botões e campos de formulário.

Recursos

Para saber mais sobre acessibilidade Web referente aos tópicos discutidos neste artigo, consulte os recursos a seguir.

Recursos de contraste de cores

Recursos de texto

Recursos de textos alternativos

Recursos de vídeo e de apresentações de slides

Recursos de compatibilidade do teclado

Pronto para começar a vender com a Shopify?

Experimente de graça