A navegação eficiente é vital para um site funcional, mas nem todo mundo usa a Internet da mesma maneira. Enquanto a maioria dos visitantes rola no celular ou clica com um mouse, muitas pessoas usam apenas seus teclados. Até 10 milhões de adultos americanos Tenha síndrome do túnel do carpo, que pode causar dor ao segurar um mouse, e os problemas de visão podem dificultar o acompanhamento de um cursor. Consequentemente, você deve manter seu site teclado navegável Para alcançar apelo universal e acessibilidade.
Entendendo a navegação do teclado
A navegação no teclado permite que os usuários se envolvam com seu site apenas através da entrada do teclado. Isso inclui o uso de atalhos e a seleção de elementos com o Guia e Digitar chaves.
Há Mais de 500 atalhos de teclado Entre os sistemas operacionais e aplicativos específicos que seu público pode usar. Os padrão para navegação na web incluem Ctrl + F Para encontrar palavras ou recursos, Mudança + Seta para selecionar o texto e Ctrl + Guia Para se mover entre as guias do navegador. Embora essas sejam em grande parte as responsabilidades das empresas de software por trás do navegador específico ou do sistema operacional, você ainda deve considerá -las.
Navegação de um único botão é outra peça vital de navegação no teclado. Os usuários podem se mover entre itens clicáveis com o Guia e Mudança chaves, use o Seta Chaves para rolar, pressione Digitar ou Espaço para “clicar” em um link e sair pop-ups com Esc.
O Página inicial do Washington Post vai mais longe. Pressionando Guia destaca os elementos clicáveis como deveriam, mas o primeiro botão pressiona um link para a declaração de acessibilidade do site primeiro. Os usuários podem navegar além disso, mas incluindo ele destaca como o design entende como Navegabilidade do teclado é uma questão de acessibilidade.
Você deve entender como as pessoas podem usar esses controles para que você possa criar um site que as facilite. Essas opções de navegação são geralmente padrão, portanto, qualquer desvio ou falta de funcionalidade se destacará. Garantir a navegação do teclado, especialmente em termos de permitir esses atalhos e controles específicos, ajudará você a atender a essas expectativas e evitar afastar os usuários.
Por que a navegação do teclado é importante no web design
A navegação no teclado é crucial por alguns motivos. Mais notavelmente, torna seu site mais acessível. Somente nos EUA, mais de uma em cada quatro pessoas Tenha uma deficiência, e muitas dessas condições afetam o uso da tecnologia. Por exemplo, as deficiências motoras o tornam desafiador para alguém usar um mouse padrão, e os usuários com problemas de visão normalmente exigem o uso do teclado e do leitor de tela.
Além da contabilização de várias necessidades de uso, permitir uma gama mais ampla de métodos de controle torna um site conveniente. Usar um teclado em vez de um mouse é mais rápido quando funciona como deveria e pode se sentir mais confortável. Considerando como os trabalhadores gastam Quase um terço da semana de trabalho deles Procurando informações, quaisquer obstáculos à eficiência podem ser altamente perturbadores.
Ficar aquém dessas áreas pode levar a complicações legais. Regulamentos como o Lei dos Americanos com Deficiência necessidade de acessibilidade técnica. Enquanto o ADA não tem regras vinculativas Para o que constitui um site acessível, ele menciona especificamente a navegação no teclado em suas orientações de não vinculação. Deixar de apoiar essa funcionalidade não significa necessariamente que você enfrentará penalidades legais, mas os tribunais podem usar esses padrões para informar sua decisão sobre se o seu site é razoavelmente acessível.
Em 2023, KitchenAid enfrentou um processo de ação coletiva por não cumprir esses padrões. Os demandantes alegaram que o site da empresa não suportou o texto ALT ou a navegação do teclado, tornando -o inacessível para os usuários com deficiências visuais. Enquanto o caso acabou por resolver fora do tribunal, é um lembrete do potenciais repercussões legais e financeiras de inclusão de inclusão.
Fora da lei, um site inacessível apresenta preocupações éticaspois mostra tratamento preferencial para aqueles que podem usar um mouse, mesmo que isso não seja intencional. Mesmo sem ação legal, o reconhecimento público desse viés pode levar a uma queda nos visitantes e a uma imagem pública contaminada.
Elementos de um site Navigable
Felizmente, garantindo Navegabilidade do teclado é uma prática direta de design de experiência do usuário. Como a navegação é padrão entre os sistemas operacionais e navegadores, os sites acessíveis ao teclado empregam alguns elementos consistentes.
Indicadores de foco
Acessibilidade na Web em mente estados que sites deve fornecer um indicador visual de elementos atualmente em foco quando os usuários pressionam Guia. Os indicadores de foco são normalmente uma caixa simples em torno do ícone destacado.
Isso é padrão no CSS, mas alguns designers os escondem, então evite usar outline:0 ou outline:none para limitar sua visibilidade. Você também pode aumentar o contraste ou alterar a cor do indicador no CSS.
O Página inicial da CNN Buck News é um bom exemplo de um forte indicador de foco. Pressionando Guia Imediatamente levanta a caixa, que é ousada o suficiente para ver com facilidade e até uma borda branca quando necessário para se destacar contra os elementos do site preto ou de cor escura.
Pedido de guia lógica
A ordem em que o indicador de foco se move entre os elementos também é importante. De um modo geral, pressionando o Guia A chave deve movê -la da esquerda para a direita e de cima para baixo – da mesma maneira que as pessoas leem em inglês.
Alguns erros podem atrapalhar. Botões desativados Desrucia o fluxo de navegação do teclado pulando um elemento sem explicação ou destacando -o sem torná -lo clicável. Da mesma forma, uma interface em que os ícones não caem em um pedido previsível da esquerda para a direita e de cima para baixo, dificulta o movimento da guia lógica.
O Aluguel de veículos Sutton Maddock O site é um bom exemplo do que não fazer. Quando você pressiona Guiao indicador de foco salta de “contato” para o link do Facebook antes de voltar ao link do Twitter. Começa à direita e se move à esquerda quando vai para a próxima linha – a ordem oposta do que parece natural.
Pule links de navegação
Os links de pular também são essenciais. Esses elementos interativos permitem que os usuários do teclado pulam para conteúdo específico sem pressionamentos de teclas repetidas. Lembre -se, esses pulos devem ser uma das primeiras áreas destacadas quando você pressionar Guia Então eles funcionam como pretendido.
O Página inicial do grupo HSBC Tem alguns links de navegação por pular. Pressionando Guia Puxa três opções, permitindo que os usuários saltem rapidamente para qualquer parte do site os interessar.
Elementos interativos acessíveis ao teclado
Finalmente, todos os elementos interativos em um site Navigable Navigable devem estar acessíveis via teclas. Qualquer coisa que as pessoas possam clicar ou arrastar com um cursor também devem suportar navegação e interação. Habilitar isso é tão simples quanto permitir que os usuários selecionem todos os itens com o Guia ou Seta chaves e pressione -as com Espaço ou Digitar.
Apropriadamente, isso Página da Universidade Estadual do Arizona na acessibilidade do teclado mostra bem esse conceito. Todos os menus suspensos são possíveis para abrir navegando para eles via Guia e pressionando Digitarpara que os usuários não precisem de um mouse para interagir com eles.
Como testar a navegação do teclado
Depois de projetar um UX acessível ao teclado, você deve testá-lo para garantir que ele funcione corretamente. A maneira mais fácil de fazer isso é explorar o site apenas com o teclado. O gráfico abaixo descreve os critérios a serem procurados ao determinar se o seu site é legitimamente navegável no teclado.
| Teclado navegável | Não é navegável no teclado | |
|---|---|---|
| Elementos clicáveis | Todos os elementos são acessíveis através do teclado e abrem quando você pressiona Digitar. | Somente alguns elementos são possíveis para alcançar o teclado. Alguns links podem ser quebrados ou não abertos quando você pressiona Digitar. |
| Indicadores de foco | Pressionando GuiaAssim, Espaçoou Digitar traz um indicador de foco que é fácil de ver em todos os navegadores. | Os indicadores de foco podem não aparecer ao pressionar todos os botões. A caixa pode ser difícil de ver ou apenas aparecer em alguns navegadores. |
| Pule links de navegação | Pressionando Guia Pela primeira vez, levanta pelo menos um link para levar os usuários a conteúdo ou menus muito visitados. Continuando a pressionar Guia Move o indicador de foco além desses links para destacar elementos na página normalmente. | Nenhum link de salto aparece ao pressionar Guia pela primeira vez. Como alternativa, eles aparecem depois de passar por todos os outros elementos. Os links de pular podem não ser funcionais. |
| Suporte ao leitor de tela | Os leitores de tela podem ler cada elemento quando destacados com o indicador de foco. | Alguns elementos podem não incentivar nenhuma ação dos leitores de tela quando destacados. |
O Diretrizes de acessibilidade de conteúdo da Web Descreva duas regras de teste Para verificar a navegação do teclado:
- O primeiro garante que todos os elementos interativos sejam acessíveis através do Guia chave,
- O segundo verifica a funcionalidade de rolagem do teclado.
Empregue os dois padrões para revisar seu UX antes de fazer um site ao vivo.
Os problemas típicos incluem a incapacidade de destacar elementos com o Guia chave ou coisas que não caem em uma ordem natural. Você pode descobrir os dois problemas tentando acessar tudo com o teclado. No entanto, você pode preferir conduzir uma auditoria de navegação por meio de terceiros. Muitas empresas privadas oferecem esses serviços, mas você também pode Use o Departamento de Acessibilidade à Internet Para uma auditoria básica do WCAG.
Torne o teclado do seu site navegável hoje
A navegação no teclado garante que você atenda a todas as necessidades e preferências de um design de site inclusivo e acessível. Embora seja simples de implementar, também é fácil perder, lembre -se desses princípios ao projetar seu UX e testar seu site.
O WCAG fornece várias técnicas que você pode empregar para atender aos padrões de acessibilidade do teclado e aprimorar a experiência de seus usuários:
Siga estas diretrizes e use as regras de teste da WCAG para criar um site acessível. Lembre-se de verificar novamente toda vez que adicionar elementos ou alterar seu UX.
Além disso, considere as seguintes leituras recomendadas para saber mais sobre os teclados e seu papel na acessibilidade:
A facilidade de uso é uma melhor prática do setor que demonstra seu compromisso com a inclusão para todos. Até usuários sem deficiência apreciarão a navegação intuitiva e eficiente do teclado.
(YK)
