A acessibilidade com Shopify

Os temas e as apps do Shopify decidem a acessibilidade. O checkout é, em grande parte, imposto pelo Shopify.

Constatações frequentes

Cores do tema com pouco contraste, imagens de produto sem texto alternativo, apps de avaliações e pop-ups sem utilização por teclado, megamenus que só abrem ao passar o rato, carrosséis sem pausa. O núcleo do Shopify geralmente não é o problema — são o tema, as apps e os conteúdos criados no editor de texto formatado.

Verificar e escolher o tema

O tema decide o contraste, o foco visível, a estrutura de títulos e a utilização por teclado do menu e dos filtros. Critérios antes de escolher: percorra a página inicial, uma coleção e uma página de produto com a tecla Tab — o foco está sempre visível? O menu abre sem rato? O contraste do texto e dos botões é de pelo menos 4,5:1? Os temas predefinidos do Online Store 2.0 (Dawn e os derivados dele) são um bom ponto de partida; nos temas pagos ajuda fazer o teste de teclado na demonstração e pedir ao fornecedor uma declaração de acessibilidade.

Imagens de produto, variantes e texto formatado

Dê a cada imagem de produto no admin um texto alternativo que descreva o conteúdo — não o nome do ficheiro. O mesmo vale para as imagens de variantes. O texto gravado como imagem num selo ou banner («Promoção», «Só hoje») é invisível para os leitores de ecrã; use texto real. No editor de texto formatado da descrição do produto, use bem os níveis de título (não basta aumentar o texto) e as listas como listas reais.

Apps e widgets incorporados

As apps de avaliações, pop-ups, venda adicional e banner de cookies injetam muitas vezes os seus próprios widgets que prendem o foco do teclado, não têm rótulos ou mostram sobreposições sem forma de fechar. Teste cada app individualmente com o teclado; as apps de carrossel e contagem decrescente precisam de uma pausa e não podem fazer nada piscar. Uma sobreposição de acessibilidade como app não corrige os problemas estruturais e é criticada pelas associações de pessoas afetadas. Na dúvida: remova a app.

Checkout: o que o Shopify impõe e o que não

O checkout padrão do Shopify é mantido pelo Shopify e está em grande parte construído de forma acessível — aí tem poucas alavancas. O que influencia: as extensões de checkout e os campos personalizados (mensagem de presente, verificação de idade) podem dificultar a utilização com teclado ou leitor de ecrã, e o caminho até ao checkout — carrinho, campo de código de desconto, escolha de envio — está no tema. Teste também esses passos.

Testar e perguntas frequentes

Teste rápido: utilize a página inicial, uma coleção e uma página de produto só com o teclado, amplie para 200% no navegador, execute uma extensão como o WAVE ou o axe DevTools. O scan gratuito da a11yglass verifica ainda o HTML entregue quanto a contraste, textos alternativos, rótulos, idioma e estrutura. A minha loja Shopify precisa de uma declaração de acessibilidade? Regra geral sim — uma loja através da qual os consumidores compram é comércio eletrónico na aceção do BFSG; ver a página sobre a declaração de acessibilidade. O checkout do Shopify já é acessível? Em grande medida responsabilidade do Shopify, mas as extensões podem quebrá-lo. Que tema é acessível? Não há um selo — o decisivo é a implementação no caso concreto.

Como o a11yglass ajuda

A análise gratuita verifica o HTML e o CSS fornecidos à procura de infrações às WCAG detetáveis automaticamente e indica em cada constatação o critério de sucesso e uma medida concreta. Deteta cerca de 20–35 % dos problemas e não substitui uma auditoria completa.

Continuar a ler

Informação geral prestada de boa-fé, sem valor de aconselhamento jurídico. Para o caso concreto, recorrer a um escritório especializado em direito das tecnologias de informação.