(11) 99538-6596
Notícias
terça-feira, 26 de abril de 2022
![Faça Você Mesmo - DICA #8 Acessível por Teclado - Acessibilidade]( "Faça Você Mesmo - DICA #8 Acessível por Teclado - Acessibilidade")
Aqui você encontra as últimas notícias e press releases relacionados à Fastcommerce - Lojas Virtuais.
terça-feira, 26 de abril de 2022
Faça Você Mesmo - DICA #8 Acessível por Teclado - Acessibilidade
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
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
ou . 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.
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.