Acessibilidade no e-commerce: desafios encontrados por pessoas com deficiência

No Brasil, 74,18% das pessoas com deficiência (PcD) afirmam realizar compras através de comércio eletrônico. Esse dado é fruto de uma pesquisa realizada pela Sociedade Brasileira de Varejo e Consumo (SBVC) em conjunto com a Toluna. Esse estudo foi realizado em 2019 e já mostra o quanto essa parcela da população é adepta ao ecommerce. Infelizmente, pesquisas envolvendo acessibilidade digital revelam vários desafios encontrados por PcDs durante sua navegação dentre os websites.

Segundo o Paypal Brasil e a BigDataCorp, em 2021, considerando as lojas já existentes, no Brasil, já somam-se mais de 1,5 milhão de lojas. Desde o início da pandemia de Civid-19, o número de lojas físicas que abriram seu e-commerce aumentou em cerca de 400% em relação ao período pré-pandemia, de acordo com a ABComm (Associação Brasileira de Comércio Eletrônico). Tudo parece se encaixar: mais serviços disponíveis online, as pessoas podendo comprar sem precisar sair de casa, tudo podendo ser feito com poucos cliques… O crescimento das vendas online soou como rumo óbvio para que as pessoas tivessem suas necessidades de consumo atendidas.

Para pessoas com deficiência, não deveria ser uma situação diferente. Considerando o levantamento do IBGE, a renda disponível é superior a US$ 5 bilhões. Apesar de todos os números já mostrados e de como essa parcela da população movimenta a economia brasileira, um levantamento da Big Data Corp, que analisou 17 milhões de páginas da Internet, apontou que apenas 0,8% poderiam ser consideradas uma página acessível.

Mesmo com todo o crescimento do comércio digital e o aumento da disponibilidade de serviços online, o resultado é uma parcela da população se vendo forçada a comprar em um determinado site, não porque tem os melhores preços ou os melhores produtos, mas por ser o único que consegue utilizar.

Barreiras de entrada

As barreiras encontradas são as mais variadas: desde a falta de contexto para navegação até a impossibilidade de fechar uma compra, de processos mais simples como a escolha do produto até gerar um boleto. O movimento Web Para Todos no estudo As Principais Barreiras de Acesso em Sites do E-commerce Brasileiro – 2º Estudo de Acessibilidade em Sites aponta que 76% dos usuários que utilizavam Leitores de Tela declararam terem tido dificuldade de navegação desde a página inicial.

O estudo trouxe 12 principais barreiras identificadas dentre as lojas analisadas:

Descrição de imagens era incompreensível ou, por vezes, inexistente;
Dificuldade de identificar o foco ao navegar por teclado;
Uso das Heading Tags para hierarquia de cabeçalhos não é feita de maneira correta;
Falta de opção de conteúdo em Libras ou avatar de tradução automática;
Acesso ao suporte (link, chat ou telefone) não foi encontrado de forma simples;
Os dados da empresa (nome, CNPJ e endereço) não estão destacados;
Com zoom de 200%, os sites se desconfiguram;
Menu do site não preparado para leitores de tela, simulador de dificuldade motora e navegação por teclado;
Campo de busca e filtros dos sites não funcionam normalmente com leitores de tela e navegação por teclado;
As opções de compra e desconto, valor e informações de pagamento não estão claras;
Dificuldade de alterar itens que já estão no carrinho;
Falhas em botões ou nos textos dificultam o preenchimento de todos os dados do formulário.

É possível perceber que os empecilhos encontrados não remetem a uma fase específica da jornada do consumidor. Em vários estágios, é possível identificar prejuízos à experiência do cliente. Esses fatores são muito importantes e têm total impacto na conversão de pedidos. Tendo em vista, por exemplo, o checkout: em 28% dos testes, os usuários não conseguiram concluir o processo de compra devido a problemas antes ou durante o processo de finalização do pagamento.

Analisando o pós-venda, os números também são alarmantes: 67% dos usuários não tiveram a chance de se arrepender de uma compra e cancelar o pedido. Aqui as causas são duas: 30% não conseguiram sequer identificar a página em que poderiam solicitar o cancelamento e, junto a isso, a dificuldade no preenchimento de formulários, que muitas vezes não são claros o suficiente. Esse ponto em específico traz também um peso Legal, já que o Decreto do Comércio Eletrônico é bem claro em relação ao direito de arrependimento no art. 5º do Decreto 7.962/2013. É papel dos fornecedores e lojistas deixarem de maneira clara quais os canais e meios para que esse direito possa ser exercido pelos consumidores.

45,6 milhões de pessoas no Brasil vivem com algum tipo de deficiência. Esse número corresponde a cerca de 25% dos brasileiros. Ignorar a acessibilidade digital significa impossibilitar, ou minimamente dificultar, a jornada de compra de 1 ⁄ 4 dos brasileiros. Além de que, com o passar dos anos, cada vez mais pessoas precisam de soluções acessíveis. À medida que as pessoas envelhecem, gradativamente elas vão necessitando de maior acessibilidade. A acessibilidade da sua loja/ecommerce e marketplace deve ser prioridade. Caso uma pessoa com deficiência não possa acessar o conteúdo, é muito provável que compre em outro lugar que seja mais adequado para ela.

O que é acessibilidade digital?

É comum pensarmos em acessibilidade na loja física, no transporte público, nas vias públicas. Mas e a acessibilidade digital? Ela se aplica apenas à construção de páginas que podem ser acessadas por PcDs? O que eu preciso fazer para que o meu e-commerce seja acessível?

Acessibilidade é aquilo que é intuitivo, prático e fácil para todo mundo. Nesse guarda-chuva, precisamos ter em mente não só PcDs, mas pessoas idosas, residentes de áreas com pouco acesso à Internet ou países subdesenvolvidos. Condições financeiras, educacionais, contextuais, territoriais devem ser consideradas para evitar barreiras entre pessoas e seu negócio. Por exemplo, pessoas idosas, com Internet limitada, com braço imobilizado, utilizando o celular ao sol ou até mesmo em pé em um ônibus. Pensar na acessibilidade apenas para pessoas com deficiência acaba sendo uma ideia reducionista. Ela abrange a todos nós enquanto população. Um produto acessível é aquele que todos conseguem usar.

Outro ponto importante, e que acabamos esquecendo muitas vezes, é que em algum momento nós podemos apresentar uma condição de falta de acessibilidade. Por exemplo, quando você está passeando com um carrinho de bebê na rua, você está precisando de acessibilidade. Não é que você seja uma pessoa com deficiência. É uma necessidade momentânea, mas você percebe que a sua rua não é projetada, não tem rampa, e que as portas dos estabelecimentos não são largas suficientes para um carrinho. Esse tipo de coisa pode acontecer com todo mundo.

Em outra situação, você está com um braço engessado e não consegue utilizar perfeitamente o mouse do seu computador. A navegação utilizando o teclado poderia ser uma boa solução, mas se o site não está preparado para isso, pode ser uma dor de cabeça…

Como posso tornar o meu e-commerce mais acessível?

As mudanças necessárias para a acessibilidade no e-commerce também precisam levar em consideração todos os tipos de deficiência ou dificuldade motora e intelectual. Globalmente, o WACG (Web Content Accessibility Guidelines) é considerado referência quando o assunto é Acessibilidade Digital. Produzido pela World Wide Web Consortium (W3C), o material traz diretrizes sobre acessibilidade voltada a conteúdos da Internet, além de trazer orientações sobre como tornar acessíveis os conteúdos já existentes.

De acordo com o WACG, para que o conteúdo possa ser considerado acessível, ele precisa atender quatro critérios: ser perceptível, compreensível, operável e robusto. Cada um desses critérios avalia uma perspectiva diferente do conteúdo.

Perceptível: o conteúdo precisa ser facilmente percebido pelo usuário.

Tem algum conteúdo no site que uma pessoa com deficiência não conseguiria perceber? Considerando tecnologias assistivas, o conteúdo está adaptado para atender às mais variadas deficiências?

Quando falamos da percepção, estamos falando dos sentidos. Por isso, é sempre importante se utilizar de mais de um dos sentidos no momento de sinalizar algo ou de apresentar um conteúdo.

Para imagens: é importante sempre lembrar de incluir texto alternativo para imagens que não são apenas decorativas. Já para vídeos, é importante incluir legendas, transcrições e até traduções para Libras – importante lembrar das pessoas surdas não oralizadas! Se você quer sinalizar um erro no preenchimento de um campo ou alguma outra mensagem de alerta, não utilize apenas um marcador de cor vermelho (o mais comum para erros). É importante dar contexto, explicar de outra maneira o que está acontecendo.

Operável: como o nome já diz, seu site precisa ser facilmente operado pelos usuários.

Eles precisam conseguir usá-lo. Então você deve pensar na navegação não só utilizando o mouse, mas também o teclado e tela sensível ao toque. O usuário não pode ter prejuízos de navegação independentemente da forma como está acessando o seu site.

Aqui se enquadra também a questão de controle sobre a página: o usuário precisa conseguir controlar os elementos apresentados, principalmente os dinâmicos. Por exemplo, um banner apresentado na tela inicial da sua loja. O usuário deve conseguir controlar os slides exibidos, conseguir movimentá-los ou até mesmo interromper a rolagem automática para que consiga ler o conteúdo inteiro.

Compreensível: as informações e o uso do site devem ser claros para o usuário.

Sendo assim, tanto os textos quanto as interações precisam ser de fácil entendimento. Isso inclui até a ordem e a organização dos conteúdos dentro de cada página. Por isso, utilize uma linguagem fácil e clara. Principalmente para mensagens de erro: os usuários precisam entender como proceder para resolvê-los. Seja um produto que não está mais disponível, um CEP que não é atendido pela entrega ou algo errado no pagamento via cartão de crédito. É importante garantir que o usuário está entendendo a mensagem que você deseja passar. Forneça outros meios para o entendimento do seu conteúdo. Dar explicações mais longas pode ser essencial para o usuário entender seu produto.

Robusto: o site precisa sempre estar atualizado em relação a novas tecnologias.

Atualizações de navegadores, avanço de tecnologias assistivas, entre outros não devem ser um problema para a acessibilidade do site. Para esse ponto, o segredo é testar (e testar de novo…). E não só utilizando testes automatizados, mas também fazendo testes qualitativos com vários tipos de usuários para que possíveis barreiras possam ser retiradas do fluxo.

Acessibilidade no Comércio Digital

Segundo o Alexa Ranking, que faz análises de usabilidade dos e-commerces, existem grandes barreiras de acesso nas lojas brasileiras: falta de descrição/texto alternativo das imagens, hierarquia do cabeçalho feita de maneira incorreta, desalinhamento do site ao realizar o zoom na tela e falta de botões. São coisas pequenas que, se forem implementadas, contribuem para o seu ranqueamento em SEO e, ao mesmo tempo, melhoram a experiência de usuários que utilizam um leitor de telas, ou que precisam de uma linha de raciocínio para seguir com a navegação.

Em termos mais práticos:

Represente a mesma ideia de várias maneiras. Exemplo: em um botão, inclua um ícone, rótulo e cor;
Aplique contrastes fortes, mas evitando os extremos de luz (fundo totalmente branco com texto preto), para englobar pessoas com sensibilidade sensorial na visão;
Evite o uso de funcionalidades que exigem habilidades motoras. Exemplo: chacoalhar, virar o dispositivo;
Utilize uma linguagem simples. Evite usar muitos jargões, metáforas, abreviações e acrônimos. E se for muito necessário, é interessante deixar também uma explicação para que todos possam entender.

É fácil tornar minha loja mais acessível?

Hoje já temos uma série de ferramentas que podem auxiliar os desenvolvedores, designers e até mesmo os lojistas na avaliação de acessibilidade da sua loja.

Leitores de tela

Podem ser usados pelo time de desenvolvimento para entender se o código construído também faz sentido se lido para uma pessoa com deficiência visual. Além disso, há também ferramentas que simulam daltonismo e podem auxiliar na melhor escolha das paletas de cores da loja.

É muito importante que todas as pessoas que trabalham com acessibilidade saibam como funciona o leitor de telas e como PcD interpreta aquelas informações.

Ferramentas de comunicação dentro da loja

Algumas ferramentas, além de auxiliarem na construção da página, podem ser incluídas na loja para serem usadas pelos seus clientes no momento do acesso. AVA e HandTalk são exemplos de aplicativos que podem ser utilizados para otimizar a comunicação através de transcrições de textos e Libras.

Esses aplicativos podem ser disponibilizados não só no momento da compra, mas também em atendimentos de SAC, pós-venda, visando não só a uma boa experiência no momento da compra, mas também em todo suporte que o cliente necessitar durante ou após finalizar o seu pedido.

Boas práticas de programação

Além das ferramentas citadas, existe uma série de boas práticas no momento de criar a loja:

Formulários

Ao criar formulários, é importante ter em mente não só o nome dos campos, mas se possível uma descrição do que deve ser preenchido. A marcação dos campos deve ser feita através de uma tag <label> no HTML. Trazer o nome dos campos através dessa tag garante que elas serão lidas pelos softwares de leitura de tela.

Também, ainda sobre formulários, é interessante que durante o preenchimento os usuários não percam o contexto. Ou seja, tanto o nome do campo como qualquer orientação sobre o seu preenchimento não deve sumir da página a partir do momento que o campo é clicado ou tem o preenchimento iniciado. O objetivo é garantir que o usuário tenha todas as informações necessárias à disposição para completar a tarefa sem nenhuma fricção.

Menu

Menus muito longos podem se tornar cansativos para pessoas com mobilidade reduzida. Ao criar o menu da loja, tenha em mente que algumas pessoas utilizam a navegação via teclado, através da tecla Tab.

A ordem em que as informações estão dispostas também é um ponto de atenção. É importante que os elementos sejam organizados para seguir o fluxo visual natural de leitura (da esquerda para a direita) e também devem seguir uma ordem que faça sentido na navegação.

Imagens

Para inclusão de imagens na loja, é importante não esquecer do atributo <alt>. Essa tag possibilita a inclusão de um texto alternativo para o conteúdo visual. Essas alternativas serão utilizadas não somente por PcDs (no caso dos leitores de tela), mas também quando um usuário não estiver com conexão estável o suficiente para exibir uma imagem ou caso utilize o navegador apenas em modo de texto, entre outras situações.

Mais uma vez: o objetivo é que o usuário não perca o contexto. Ele precisa entender tudo que está sendo apresentado na página.

HMTL e CSS

Um ponto de atenção é que a maioria das tecnologias assistivas ignoram tudo que vem do arquivo de customização CSS. Então é preciso que, na semântica (HTML) da sua página, o conteúdo faça sentido.

Uma ferramenta interessante também é o Checklist do A11Y Project. A11Y é um acrônimo usado especificamente no contexto de acessibilidade web. A explicação vem da grafia da palavra acessibilidade em inglês (acessibility), que possui 11 letras entre o “a” e o “y”. O checklist montado aborda os principais pontos trazidos pelas diretrizes do WACG e já leva em consideração os três níveis de criticidade do guia. Além de servir como um material para checagem do seu conteúdo, o projeto traz vários materiais de apoio que são muito úteis no entendimento mais aprofundado de temas de acessibilidade.

A acessibilidade não pode ser vista como uma ferramenta adicional. Não é uma coisa que você considera depois de já ter criado algo. É bem mais complicado transformar o seu produto em algo acessível depois de pronto do que configurá-lo corretamente desde o início. Nesse processo, é muito importante o comprometimento do time em criar algo que gere valor para os usuários. Por isso é tão importante incluir vários testes durante esse processo.

E por que devo tornar a minha loja mais acessível?

Empresas que integram acessibilidade aos seus produtos têm uma maior tendência a serem inovadoras, conseguem impactar um público maior (estamos falando de aproximadamente um bilhão de pessoas ao redor do mundo com poder aquisitivo superior a US$ 6 trilhões no total) e associam a marca a uma boa mensagem. Um estudo das empresas que compõem a lista Fortune 100 aponta que companhias que abraçam a causa da acessibilidade tendem a ter também uma melhor performance no geral.

Outro fator importante são as questões legais relacionadas à acessibilidade. No Brasil, temos a LBI (Lei Brasileira de Inclusão) que determina que “É obrigatório que páginas web mantidas por empresas com sede ou representação comercial no Brasil sejam acessíveis, conforme as melhores práticas e diretrizes de acessibilidades adotadas internacionalmente”. O Código de Defesa do Consumidor (CDC) protege a pessoa com deficiência e deixa claro que é obrigação do lojista oferecer uma experiência de compra acessível a esse público – tanto no meio físico quanto no virtual.

Além de todos esses pontos, um dos fatores mais importantes está na experiência do usuário. Como bem disse Mary Patts, da IBM, “para as pessoas sem deficiência, a tecnologia torna as coisas mais fáceis, para as pessoas com deficiência, a tecnologia torna as coisas possíveis”.

Imagine que uma pessoa surda viva apenas com sua companheira em casa e queira comprar um presente-surpresa de aniversário de casamento pela Internet, mas não consegue entender as especificações do produto porque o site não está acessível. Essa pessoa tem algumas opções: ou ela terá que abrir o jogo e contar a ideia para a companheira e estragar toda a surpresa que tinha em mente, ou precisará contar com o auxílio de outra pessoa para realizar a compra.