Ajuda
Fazer login

Acessibilidade para temas

Ao personalizar o tema, tome decisões de design e conteúdo que ajudem a manter a acessibilidade da loja virtual. Um site acessível é projetado para que possa ser usado por todos, inclusive por pessoas com deficiência. Fazer escolhas para a loja virtual com a acessibilidade em mente ajuda a proporcionar uma experiência inclusiva a todos os clientes.

As diretrizes abaixo foram criadas com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) em mente. Como há muitos fatores a serem considerados na criação de um site acessível, apenas seguir as diretrizes abaixo não garante que a loja virtual seja totalmente acessível. Para saber mais sobre acessibilidade na web, acesse o site da WCAG ou consulte os recursos listados abaixo.

Nesta página

Acessibilidade do texto

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

Contraste de cor

Ao editar as cores da loja virtual, garanta que todo o texto esteja acessível para clientes daltônicos ou com outras deficiências visuais. Esses clientes dependem do contraste de cor adequado para diferenciar visualmente os elementos. Use uma ferramenta online de taxa de contraste para verificar o contraste das diferentes partes da loja.

No exemplo abaixo, o texto tem uma taxa de contraste de 2,4:1 em relação ao plano de fundo e é de difícil leitura para alguns clientes.

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

No exemplo a seguir, o texto tem uma taxa de contraste de 4,8:1 e é mais fácil de ler para muitos clientes.

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

Teste o contraste de todos os textos, incluindo corpo do texto, títulos, links e campos de formulário. Siga estas diretrizes:

  • A cor do corpo do texto e do texto do botão tem uma taxa de contraste de, no mínimo, 4,5:1 em relação ao plano de fundo.
  • A cor dos títulos e de outros textos grandes (tamanho de fonte de 24 px ou mais) tem uma taxa de contraste de, no mínimo, 3:1 em relação ao plano de fundo.
  • A cor de todo o texto sobre imagens, incluindo em apresentações de slides, banners e vídeos, tem taxas de contraste suficientes em relação ao plano de fundo. Para textos grandes (tamanho de fonte de 24 px ou mais), o contraste deve ser de, no mínimo, 3:1. Para textos menores, o contraste deve ser de, no mínimo, 4,5:1.
  • A cor de elementos que não são de texto, como bordas de campo de inserção e ícones, tem uma taxa de contraste de, no mínimo, 3:1 em relação ao plano de fundo.

Títulos

Ao adicionar títulos à página com o editor de rich text, é importante mantê-los em ordem sequencial (1 a 6). Os títulos são usados por tecnologias assistivas para comunicar a organização do conteúdo da página. Pular níveis, como um título de nível 2 seguido por um de nível 4, pode ser confuso para os usuários. Siga esta diretriz:

  • Os títulos são usados em ordem sequencial, sem pular níveis.

Tamanho e alinhamento do texto

Ao editar as configurações de tipografia do tema, confirme que o texto seja grande o suficiente para que os clientes leiam com conforto.

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 com alinhamento justificado. Cada linha de texto preenche o espaço de ponta a ponta, forçando um espaçamento variado entre as palavras para se ajustar.

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

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

Ao personalizar o tamanho e o alinhamento do texto, siga estas diretrizes:

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

Links de texto

Os links de texto devem ser sublinhados ou ter outro estilo visualmente distinto em comparação com o texto normal. Como alguns clientes têm dificuldade em ver as cores, não é possível confiar apenas na mudança de cor para diferenciar um link do texto normal.

Os links de texto devem abrir na mesma aba. Links que abrem em uma nova aba ou janela podem causar confusão, especialmente em dispositivos móveis, onde a janela antiga não fica visível, e não são inclusivos para os clientes, principalmente para aqueles que usam ampliação de tela ou têm menos conhecimento técnico.

Se você editar a folha de estilo do tema, não remova os estilos de link de texto. Siga estas diretrizes:

  • Os links de texto são sublinhados ou têm outro diferenciador visual que não seja apenas a cor, para que os clientes possam diferenciá-los do texto normal.
  • Os links de texto abrem na mesma aba quando clicados.

Texto alternativo para imagens

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

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

Ao adicionar um texto alternativo a uma imagem, uma boa prática é fingir que você está descrevendo a imagem para alguém de olhos fechados. Ajude essa pessoa a criar uma imagem na mente dela. A maneira como você descreve uma imagem também depende do contexto da sua página da web. Por exemplo, você pode descrever uma imagem de forma diferente se sua empresa for uma agência de viagens do que se for uma loja de equipamentos para atividades ao ar livre. Considere a seguinte imagem:

Dois amigos usando mochilas, abraçados, olhando para o oceano

Para uma agência de viagens, você pode mencionar o país e a região em que os dois amigos estão viajando e o nome do oceano ou mar que eles estão vendo. Por outro lado, para uma loja de equipamentos para atividades ao ar livre, você pode focar nas marcas e nos recursos das mochilas dos dois amigos.

Se sua empresa for uma agência de viagens, um exemplo de texto alternativo ruim seria: “Duas pessoas em frente ao oceano”. Para a mesma agência, um exemplo de um bom texto alternativo poderia ser: “Dois amigos viajando em Lagos, Portugal, observando a enseada de areia da Praia do Camilo em um dia de sol”.

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

Ao adicionar vídeos à sua loja virtual, considere as necessidades dos clientes com baixa visão, surdos ou com deficiência auditiva, ou de clientes que possam ser suscetíveis a distúrbios vestibulares.

Alguns desses clientes dependem do recurso de conversão de texto em fala dos leitores de tela, que leem 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 surdos ou com deficiência auditiva, é uma boa ideia adicionar legendas ocultas aos vídeos para que esses clientes possam acessar o conteúdo.

Clientes com distúrbios vestibulares podem sentir tontura com conteúdo em movimento. Por isso, é importante que as apresentações de slides e os vídeos não sejam reproduzidos automaticamente e que o cliente possa controlar a apresentação de slides com botões de controle.

Apresentações de slides

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

  • As apresentações de slides não são reproduzidas automaticamente.
  • Se as apresentações de slides forem reproduzidas automaticamente, elas incluirão controles que os clientes podem usar para pausar, avançar ou parar a apresentação.

Vídeos

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

  • Os vídeos não são reproduzidos automaticamente.
  • Se os vídeos forem reproduzidos automaticamente, o áudio deles ficará sem som.
  • Para vídeos que incluem áudio, o vídeo fica totalmente visível e não é obstruído por outros elementos da página. Isso permite que as legendas ocultas permaneçam visíveis.
  • Para vídeos que incluem diálogo, as transcrições de texto estão disponíveis. Elas são incluídas na página ou em um link para uma página separada.

Essas diretrizes também se aplicam a vídeos que estão em uma apresentação de slides.

Compatibilidade com teclado

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

Uma tela de login de cliente em uma loja virtual que mostra os campos de formulário para e-mail e senha. O campo “E-mail” está contornado em azul.

Se você editar a folha de estilo do 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 têm um indicador visual claro quando estão em foco no teclado. Esses elementos incluem links, botões e campos de formulário.

Recursos

Para saber mais sobre acessibilidade na web em relação aos tópicos abordados neste artigo, consulte os seguintes recursos.

Recursos sobre contraste de cores

Recursos sobre texto

Recursos sobre texto alternativo

Recursos sobre apresentação de slides e vídeo

Recursos de compatibilidade com o teclado

Nesta seção