Acessibilidade e desempenho

O Tenora foi criado para ser usado por todas as pessoas e carregar rápido no celular. Esta página explica o que o tema faz por você e o que você pode fazer para manter sua loja acessível e rápida.

O que o tema faz pela acessibilidade

O Tenora foi testado com base nas Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2, nível AA, com verificações automatizadas e testes de teclado em todos os modelos.

Uso do teclado

• Todos os links, botões, menus, painéis laterais e formulários podem ser usados só com o teclado.
• Os painéis laterais (menu, carrinho, filtros, locais de retirada, país e idioma) mantêm o foco do teclado dentro deles enquanto estão abertos. A tecla Esc fecha os painéis, e o foco volta para onde estava.
• Os pontos do Compre o ambiente, o formulário "Será que cabe?", o zoom da imagem e a opção cm/pol funcionam com o teclado.
• Depois que o cliente remove um item do carrinho, o foco vai para o próximo item ou para o título do carrinho.

Foco visível

Quando o cliente navega pela página com a tecla Tab, o elemento em foco tem um contorno bem visível. A ordem do foco segue a ordem da página.

Link para pular

Na primeira vez que o cliente pressiona Tab, aparece o link Pular para o conteúdo. Ele pula o cabeçalho e vai direto para o conteúdo principal da página.

Movimento reduzido

Algumas pessoas ativam a configuração "reduzir movimento" no dispositivo. Para esses clientes, o tema:

• desativa animações e transições, como o surgimento gradual das seções
• interrompe a rotação automática da barra de avisos
• desativa a rolagem suave

Contraste de cores

• Todas as cores de texto e de fundo dos presets Tenora, Terrace e Lantern atingem uma taxa de contraste de pelo menos 4,5:1 (WCAG AA). Bordas e ícones atingem pelo menos 3:1.
• As mensagens de erro e de sucesso usam a cor do texto do esquema de cores com um ícone colorido. Elas continuam legíveis em qualquer esquema de cores.
• Se você mudar as cores, mantenha uma taxa de contraste de pelo menos 4,5:1 entre o texto e o fundo. Você pode verificar um par de cores em qualquer verificador de contraste online.

Leitores de tela

• As páginas usam títulos e regiões (landmarks) corretos, como o cabeçalho, o conteúdo principal e o rodapé.
• Preços, preços unitários, preços promocionais e status de estoque têm rótulos claros para leitores de tela.
• Os resultados do "Será que cabe?" e o número de países encontrados na pesquisa de países são anunciados.
• Botões e campos de formulário têm rótulos, inclusive nos 30 idiomas traduzidos.
• As áreas de toque têm pelo menos 24 x 24 pixels.

Direção do texto e idioma

O idioma da página e a direção do texto vêm do idioma da loja. Os idiomas da direita para a esquerda são espelhados automaticamente. Consulte Vendas internacionais.

O que você pode fazer: texto alternativo

O texto alternativo (alt text) descreve uma imagem para quem não consegue vê-la. Os leitores de tela o leem em voz alta, e os mecanismos de busca o utilizam.

Onde adicionar o texto alternativo

• Imagens de produto: abra um produto no admin da Shopify, selecione uma imagem e selecione Adicionar texto alternativo (Add alt text).
• Imagens em seções e arquivos: acesse Conteúdo (Content) → Arquivos (Files), selecione a imagem e edite o texto alternativo.
• Imagens de coleção: abra a coleção no admin da Shopify e edite a imagem.

Como escrever um bom texto alternativo

• Descreva o que a imagem mostra e por que isso importa. Por exemplo: "Mesa de jantar de carvalho com seis cadeiras de linho em um ambiente claro".
• Seja breve, normalmente uma frase.
• Não comece com "Imagem de" ou "Foto de".
• Inclua detalhes que ajudem o cliente a escolher, como cor, material ou tamanho.
• Não repita o título do produto se a imagem não acrescentar nada novo. Descreva a vista, por exemplo "Vista lateral mostrando os pés finos de carvalho".

O que o tema faz automaticamente

• Na galeria do produto, as imagens de produto sem texto alternativo usam o título do produto.
• Algumas imagens são decorativas, como as imagens dos materiais nos cartões de Materiais e cuidados e a imagem da amostra ao lado do título dela. O tema oculta essas imagens dos leitores de tela, porque o texto ao lado já as identifica.
• O logo usa o nome da loja quando a imagem do logo não tem texto alternativo.

O que o tema faz pela velocidade

• As páginas são geradas no servidor. O tema usa pouco JavaScript, e cada seção carrega o próprio script só quando a seção está na página. Por exemplo, o script do "Será que cabe?" carrega apenas em produtos com dimensões.
• Os estilos específicos de cada página, como os da página de produto e dos filtros, carregam apenas nas páginas que os usam.
• As imagens carregam em vários tamanhos, para que cada dispositivo baixe o tamanho de que precisa. As imagens abaixo da primeira tela só carregam quando o cliente rola até perto delas.
• A primeira imagem grande da página (por exemplo, o banner de imagem) carrega primeiro, para que a página pareça pronta mais cedo.
• Os vídeos do YouTube e do Vimeo carregam apenas quando o cliente os reproduz.
• Os produtos relacionados carregam quando o cliente rola até perto deles.
• As fontes vêm da biblioteca de fontes da Shopify e mostram o texto na hora, enquanto a fonte carrega.

O que você pode fazer: manter sua loja rápida

Use os tamanhos de imagem certos

A Shopify redimensiona as imagens para cada dispositivo, mas uma boa imagem original ajuda. Use estes tamanhos:

Onde	Tamanho recomendado
Banner de imagem	.jpg de 2400 x 1350px
Banner de imagem, imagem para celular (opcional)	.jpg de 1080 x 1350px
Imagem com texto	.jpg de 1500 x 1875px
Compre o ambiente	Formato 3:2, por exemplo .jpg de 2400 x 1600px
Promoção no megamenu	Formato 4:3
Imagem de capa do vídeo	Formato 16:9
Imagens de produto	Pelo menos 2000px no lado mais longo, todas no mesmo formato
Lista de logos	.png transparente ou .svg
Favicon	.png de 32 x 32px

Dicas

• Use .jpg para fotos e .png ou .svg para logos.
• Comprima as fotos antes de enviá-las. Procure manter cada foto abaixo de 500 KB.
• Defina um ponto focal nas imagens importantes. No editor de temas, selecione a imagem e escolha o ponto focal. O Tenora usa esse ponto ao cortar a imagem.

Instale menos apps

Muitos apps adicionam seus próprios scripts e estilos a todas as páginas, mesmo quando você não os vê. Isso pode deixar sua loja mais lenta.

• O Tenora já inclui dimensões, "Será que cabe?", materiais, amostras, detalhes de entrega e Compre o ambiente. Você não precisa de um app para esses recursos.
• Remova os apps que você não usa. Depois de desinstalar um app, confira se ele não deixou código no seu tema. Se deixou, entre em contato com o desenvolvedor do app.
• Antes de instalar um app, verifique a velocidade da sua loja. Verifique de novo depois da instalação.

Use vídeos com cuidado

• Adicione uma Imagem de capa à seção Vídeo. A imagem de capa aparece até o cliente reproduzir o vídeo, e o player só carrega nesse momento.
• Mantenha os vídeos hospedados na Shopify curtos e com um tamanho de arquivo razoável.
• Não use um vídeo como primeiro elemento da página inicial se uma imagem puder cumprir a mesma função. Imagens carregam mais rápido.

Mantenha a página inicial objetiva

Cada seção adiciona conteúdo a ser baixado. Use as seções que mais ajudam os clientes e remova as que você não precisa.

Verifique sua velocidade

No admin da Shopify, acesse Loja virtual (Online Store) → Temas (Themes) e confira o relatório de velocidade da sua loja. Verifique de novo depois de mudanças grandes, como novos apps ou novas seções na página inicial.