Boas práticas de acessibilidade no e-commerce

Planejar uma loja virtual acessível possibilita que não somente pessoas com deficiência consigam acessar seu site adequadamente, mas também faz com que todas as pessoas tenham uma melhor experiência e se tornem consumidoras da marca.

Dessa forma, vamos imaginar o seguinte cenário:

Você entra no site de alguma loja para comprar um item, todos os produtos estão sem imagem, ao entrar na página do produto a descrição do produto não aparece e as informações de preço e parcelamento estão um pouco confusas. Após muita busca você consegue achar o produto que está procurando mas a página não possui botão de compra.

Seria uma experiência frustrante e você apenas fecharia o site e tentaria comprar em outro.

Pois é mais ou menos assim que acontece com pessoas que possuem algum tipo de deficiência ao acessarem 99% dos sites hoje em dia.

Por que investir em acessibilidade no e-commerce?

Cerca de 8,4% da população brasileira têm algum tipo de deficiência. Esse valor representa mais de 17,3 milhões de pessoas que juntas movimentam em torno de R$28,1 bilhões em renda própria por ano.

Implementar acessibilidade em sua loja virtual é estar em cumprimento com a Lei Brasileira de Inclusão (artigo 63º). Além disso, traz inúmeros benefícios para a marca como a melhora da posição no ranking dos buscadores, melhora da usabilidade, demonstra uma ação responsável e gera oportunidade comercial.

Boas práticas de acessibilidade no e-commerce

Após compreender a importância de ter um e-commerce acessível você pode começar implementando o básico de acessibilidade:

• Navegação via teclado;
• Foco visível ao navegar pelas teclas;
• Manter a opção de zoom destravada;
• Texto alternativo nas imagens não decorativas;
• Botões e links com texto descritivo ao invés de um texto genérico como “clique aqui”;
• Alto contraste entre as cores.

Além disso, pensando nos problemas mais recorrentes que encontramos nas lojas virtuais, separamos algumas boas práticas com foco em acessibilidade para e-commerces. Confira a seguir:

1) Modais (pop-ups):

A utilização de modais é uma prática muito comum e útil em e-commerces, seja para lembrar o usuário de assinar a newsletter, avisar de uma promoção ou cupom de desconto.

O problema é que normalmente são abertos mais de um modal ao mesmo tempo e sem o usuário está esperando, o que pode distraí-lo ou deixá-lo ansioso, por isso é importante evitar que modais sejam abertos sem uma ação anterior do usuário.

E para assegurar a acessibilidade através do leitor de telas o modal deve possuir o foco do teclado quando for aberto e deve poder ser fechado através da tecla ESC.

2) Teclas de acesso rápido:

É importante facilitar a navegação do usuário que utiliza leitor de telas e/ou acessa via teclado. Inserir atalhos para as seções mais relevantes do site evita o usuário precisar percorrer vários elementos até chegar no elemento desejado, portanto é imprescindível incluir um componente que esteja invisível no layout porém acessível ao leitor de telas que possua atalhos para o conteúdo principal, menu, busca e rodapé do site.

3) Acesso ao suporte:

O acesso ao suporte (chat, whatsapp, telefone, etc) deve ser posicionado de maneira visualmente clara no site, não se esquecendo de estar acessível pelo teclado, além de que para as opções de atendimento via whatsapp e telefone não basta ter apenas um texto com o número do telefone, é obrigatório que exista um link que leve para os respectivos aplicativos ou link da web no caso do whatsapp.

4) Árvore de categoria:

Garantir que a árvore de categorias seja estruturada de forma simples e clara é fundamental para facilitar a navegação do usuário e evitar que o menu não seja extenso demais e não haja repetição desnecessária de links.

5) Filtro de produtos:

As páginas de departamento, categoria e busca devem prover uma navegação clara e intuitiva com filtros relevantes como preço, cor, voltagem, tamanho e material, por exemplo.

6) Página de produto:

As informações principais do produto como preço, valor de desconto, variação de sku, descrição do produto e opções de pagamento devem ser acessadas facilmente nesta página, principalmente através do leitor de telas.

Também para usuário de leitor de tela, o botão de compra deve possuir texto descritivo com o nome do produto para não ser confundido com o botão de compra de produtos que aparecem nas vitrines.

Possuir cálculo de frete direto na página de produto também é essencial para que o usuário não inclua no carrinho um produto que não pode ser entregue em seu endereço.

7) Formulários:

Formulários devem ser bem estruturados, com rótulos descritivos de cada campo. Os campos com erro devem ser mostrados com texto descritivo do erro e instruções de como corrigir, não se limitando apenas pelo uso de cor mas também com estímulos visuais e textuais de que existe um erro naquele determinado campo.

8) CAPTCHA:

Os CAPTCHAs são mecanismos de segurança para evitar atividades maliciosas de softwares automatizados (bots) através do famoso “não sou um robô”. Em termos de acessibilidade, pessoas com deficiência visual são as mais prejudicadas e por isso é importante assegurar que o CAPTCHA esteja em português e possui opção de áudio (em português também) como alternativa às imagens.

9) Cancelamento de compra:

Todo consumidor tem o direito de se arrepender da compra e a Lei do Comércio Eletrônico (Art. 5º do Decreto 7.962/2013) deixa explícito que deve ser informado ao usuário de maneira clara os meios de realizar o cancelamento da compra.

10) Libras

Muitas pessoas surdas não são fluentes em português e por isso é importante disponibilizar a tradução do conteúdo em LIBRAS através de plugins de acessibilidade como o HandTalk.

É fundamental entender que acessibilidade é um processo contínuo e é essencial ser testada por pessoas com deficiência. Assim podemos garantir que todos os usuários possam navegar, pesquisar e comprar produtos com facilidade.

Se você quer acessar mais conteúdos como este, não deixe de se cadastrar em nossa newsletter.