Navegar apenas com o teclado é fundamental para a acessibilidade. Ele se torna um componente essencial para alguns usuários.
Os usuários cegos, deficientes visuais (baixa visão) ou com mobilidade reduzida usam as setas tradicionais do teclado e as teclas de tab para navegar na loja virtual.
A diferença entre o teclado e o mouse é que quando o usuário navega pelo teclado, o acesso aos links na tela é sequencial.
O usuário precisa percorrer todos os links que estão disponíveis na loja até encontrar o que deseja.
O mouse por outro lado permite o acesso direto aos links.
Até a loja virtual mais sofisticada se torna inútil para um usuário que não pode acessar seus controles e interagir com ela.
A ordem de leitura é determinada pela ordem DOM
Não importa como você vai estruturar seu HTML. O teclado ou leitor de tela navegará pela loja virtual com base em onde o código aparece no HTML.
Se existe um texto no topo e a posição é alterada via CSS. Nesse caso, os usuários de teclado e leitor de tela encontrarão esse texto na parte superior. A alteração da posição com CSS não será levada em conta.
Cuidado com o Tabindex
Evite usar valores do tabindex maiores que 0. Isso pode fazer com que a ordem de leitura não corresponda à ordem de tabulação.
Ao fazer isso, vai dificultar para os usuários que dependem de tecnologias para navegar pelo conteúdo da página.
Use controles HTML nativos
Usar frameworks e bibliotecas personalizadas na maioria dos casos significa que você terá que fazer um trabalho extra para torná-las acessíveis.
Ao utilizar controles HTML nativos, como um controle de dropdown, os usuários de teclado e leitor de tela não terão problemas para usar o controle porque é um padrão estabelecido.
Tente não usar DIVs clicáveis como botões. Basta usar os botões porque eles já são anunciados automaticamente como botões, aparecem na ordem das guias e funcionam com a tecla Enter.
Os usuários de teclado devem ser capazes de acessar os elementos interativos, não apenas a navegação principal. Dessa forma, os elementos do formulário, menus suspensos, botões, caixas de diálogo e outros widgets devem ser acessíveis.
Um problema é causado por widgets com elementos <div> ou <span>. Eles podem ser atribuídos ao foco do teclado por meio de tabindex. Alternativamente, usar apenas links, botões e campos de formulário HTML garantirá que todos os elementos possam ser tabulados.
Você já navegou na sua loja virtual através do teclado?
Você sabe dizer se ela é acessível?
Conheça mais sobre a Diretriz 2.1 Acessível por Teclado.
Boas vendas!
Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.
Postar um comentário