Acessibilidade no Shopify: os erros comuns e onde corrigir
Todos os sites Shopify que varremos compartilham o mesmo punhado de falhas. Aqui vai cada uma: o que é, quem deixa de fora e onde é corrigida no Shopify. Onde diz "tema", é código, e o HTML corrigido é o que o seu desenvolvedor precisa.
1. Imagens sem descrição
Corrige-se no editor, sem códigoO leitor de tela de uma pessoa cega diz "imagem" e nada mais. Se a imagem é um produto, uma promoção ou um botão, ela simplesmente não sabe o que é.
pessoas cegas (leitor de tela)
Onde no Shopify
Sem desenvolvedor: Produtos → produto → clique na imagem → "Adicionar texto alternativo". Para imagens do tema: Loja virtual → Temas → Personalizar → clique na seção da imagem → Texto alternativo.2. Texto difícil de ler
Corrige-se no editor, sem códigoHá textos claros demais sobre o fundo. Pessoas com baixa visão, clientes mais velhos e qualquer um com o celular no sol não conseguem ler. É a descoberta mais comum em processos de acessibilidade.
pessoas com baixa visão · quem entra pelo celular
Onde no Shopify
Loja virtual → Temas → Personalizar → Configurações do tema → Cores: escolha uma cor de texto mais escura para essa seção.3. Links que não dizem aonde levam
Corrige-se no editor, sem códigoLinks como "clique aqui" ou uma imagem sem texto são lidos como "link". Quem usa leitor de tela navega pulando entre links, então esses são becos sem saída.
pessoas cegas (leitor de tela)
Onde no Shopify
Loja virtual → Navegação → edite o texto do item do menu. Para links de ícone, o tema precisa de um rótulo (código abaixo).4. Campos de formulário sem rótulo
Corrige-se no editor, sem códigoNos seus formulários (compra, contato, cadastro) há campos que não dizem o que vai ali. Um cliente cego ouve "caixa de texto" e não consegue terminar a compra.
pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
Onde no Shopify
Os rótulos do formulário de contato vêm do tema: Personalizar → seção Formulário de contato, ou código abaixo.5. A página não declara seu idioma
Corrige-se no editor, sem códigoO leitor de tela adivinha o idioma e lê português com voz em inglês (ou o contrário): não se entende nada.
pessoas cegas (leitor de tela)
Onde no Shopify
Configurações → Idiomas → confira se o idioma padrão coincide com o conteúdo da sua loja.6. A página não tem título
Corrige-se no editor, sem códigoA aba do navegador fica vazia e o leitor de tela não consegue dizer em que página está. Também prejudica no Google.
pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
Onde no Shopify
Loja virtual → Preferências → Título da página inicial; por produto/página: desça até "Listagem em mecanismos de busca" → Editar → Título da página.7. Títulos fora de ordem
Corrige-se no editor, sem códigoOs títulos pulam níveis (como um documento que vai do capítulo 1 à seção 1.1.1). A estrutura da página deixa de fazer sentido para o leitor de tela.
pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
Onde no Shopify
Loja virtual → Temas → Personalizar → cada seção tem uma opção de "tamanho/nível do título" na maioria dos temas.8. Botões pequenos demais para tocar
Precisa do tema (código)Alguns botões ou links são menores que a ponta de um dedo. Clientes mais velhos e pessoas com tremor não acertam.
pessoas que não conseguem usar o mouse · quem entra pelo celular
Onde no Shopify
No Shopify isso está no código do tema: Loja virtual → Temas → ⋯ → Editar código. Envie o código abaixo para quem fez o tema, ou use o Editor de temas se a configuração existir.9. Vídeos sem legendas
Corrige-se no editor, sem códigoClientes surdos não recebem nada dos seus vídeos.
pessoas surdas
Onde no Shopify
Envie o vídeo com legendas para o YouTube/Vimeo e incorpore, ou adicione um arquivo .vtt em Conteúdo → Arquivos e referencie no tema.10. O zoom está bloqueado no celular
Precisa do tema (código)Seu site proíbe ampliar com os dedos. Quem precisa ver maior não consegue.
pessoas com baixa visão · quem entra pelo celular
Onde no Shopify
No Shopify isso está no código do tema: Loja virtual → Temas → ⋯ → Editar código. Envie o código abaixo para quem fez o tema, ou use o Editor de temas se a configuração existir.11. Botões sem nome
Precisa do tema (código)Botões que são só um ícone (menu, carrinho, fechar) são lidos apenas como "botão". Um cliente cego não distingue o carrinho do botão de fechar.
pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
Onde no Shopify
No Shopify isso está no código do tema: Loja virtual → Temas → ⋯ → Editar código. Envie o código abaixo para quem fez o tema, ou use o Editor de temas se a configuração existir.12. A página não tem um título principal
Precisa do tema (código)Pessoas cegas navegam por títulos; sem um principal a página não tem ponto de partida.
pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
Onde no Shopify
No Shopify isso está no código do tema: Loja virtual → Temas → ⋯ → Editar código. Envie o código abaixo para quem fez o tema, ou use o Editor de temas se a configuração existir.
Perguntas que as pessoas fazem
- O Shopify é acessível de fábrica?
- A plataforma em si segue as diretrizes razoavelmente bem; as falhas vêm do tema, dos apps ou plugins e do conteúdo (fotos enviadas sem descrição). Uma varredura do seu próprio site diz quais.
- Preciso de um desenvolvedor para corrigir a acessibilidade no Shopify?
- Para a maioria não: texto alternativo, títulos de página, cabeçalhos, texto de links, cores e rótulos de formulário são configurações. Menus que ignoram o teclado, pop-ups que prendem o foco e ícones-link sem nome vivem no tema; para isso é preciso o código corrigido.
- Um app ou widget de acessibilidade corrige o Shopify?
- Não. Um widget muda o que o visitante vê no navegador; o tema e as fotos continuam como estavam, e os processos citam o código.