Muitas pessoas usam um teclado ou outro software/hardware que imita a funcionalidade de um teclado, como um dispositivo de interruptor, como o principal meio de navegação. Pessoas com limitações físicas temporárias, como torção no pulso ou deficiências motoras finas, como túnel do carpo, bem como algumas pessoas sem deficiência, podem optar por usar um teclado para navegar em uma página devido a preferências pessoais, eficiência ou hardware quebrado.
Usuários cegos ou com baixa visão podem usar um teclado para navegação combinado com o software de ampliação ou leitor de tela. No entanto, para navegar em uma tela, eles podem usar comandos de atalho de teclado diferentes.
O suporte do teclado a todas essas deficiências e circunstâncias é fundamental. Grande parte da acessibilidade do teclado está focada no foco. Foco se refere a qual elemento na tela recebe entradas do teclado no momento.
Neste módulo, vamos nos concentrar na estrutura HTML e no estilo CSS para elementos de teclado e focalizáveis. O módulo JavaScript inclui mais informações sobre gerenciamento de foco e pressionamento de teclas para elementos interativos.
Ordem de foco
Os elementos que um usuário de teclado pode acessar são chamados de elementos focalizáveis. A ordem de foco, também chamada de ordem da guia ou da navegação, é a ordem em que os elementos recebem foco. A ordem de foco padrão precisa ser lógica, intuitiva e corresponder à ordem visual de uma página.
Na maioria dos idiomas, a ordem de foco começa no topo da página e termina na parte inferior, passando da esquerda para a direita. No entanto, como alguns idiomas são lidos da direita para a esquerda, o idioma principal da página pode exigir uma ordem de foco diferente.
Por padrão, a ordem de foco inclui elementos HTML naturalmente focalizáveis, como links, caixas de seleção e entradas de texto. Os elementos HTML naturalmente focalizáveis incluem suporte integrado à ordem de tabulação e processamento básico de eventos do teclado.
É possível atualizar a ordem de foco para incluir todos os elementos que normalmente não recebem foco, como elementos HTML não interativos, componentes personalizados ou elementos com ARIA que substitui a semântica de foco natural.
Tabindex
A ordem de foco começa com elementos que têm um atributo tabindex positivo (se houver) e passa do menor número positivo para o maior (como 1, 2, 3). Em seguida, ela prossegue pelos elementos com um tabindex de zero de acordo com a ordem no DOM. Todos os elementos com um tabindex negativo são removidos da ordem de foco natural.
Quando um tabindex
de zero (tabindex="0") é aplicado a elementos normalmente não focalizáveis, eles são
adicionados à ordem de foco natural da página de acordo com a forma como aparecem
no DOM. No entanto, diferentemente dos elementos HTML focalizáveis naturalmente, você precisa
fornecer suporte adicional ao teclado
para que eles sejam totalmente acessíveis.
Da mesma forma, se você tiver um elemento que normalmente é focalizável, mas está
inativo, como um botão que fica inoperante até que um campo de entrada seja preenchido,
adicione um tabindex negativo (tabindex="-1") a esse elemento. A adição
de um tabindex negativo indica a tecnologias adaptativas e teclados de que esse
botão precisa ser removido da ordem de foco natural. Não se preocupe: é possível
usar o JavaScript para adicionar o foco de volta ao elemento quando necessário.
Nesse exemplo, um atributo tabindex foi adicionado a elementos que não
recebem foco naturalmente. A ordem dos elementos foi manipulada usando
tabindex para ilustrar o poder que ele pode ter na ordem de foco. Esse é um
exemplo do que não fazer.
Ignorar os links
Atualmente, a maioria dos sites tem uma longa lista de links de menu no cabeçalho principal de uma página para outra. Isso é ótimo para a navegação geral, mas pode dificultar para os usuários que usam apenas o teclado o acesso fácil ao conteúdo principal do site, sem precisar pressionar várias vezes.
Uma maneira de pular grupos de links redundantes ou inúteis é adicionar um link de salto. Links de salto são links fixos que pulam para uma seção diferente da mesma página, usando o ID dessa seção, em vez de enviar o usuário para outra página no site ou em um recurso externo. Os links de salto normalmente são adicionados como o primeiro elemento focalizável que um usuário encontrará ao chegar a um site e podem ficar visíveis ou visualmente ocultos até que o usuário navegue até ele, dependendo do que o design exige.
Quando um usuário pressiona a tecla Tab e um link de salto ativo está ativo, ele envia o foco do teclado para o link de pulo. O usuário pode clicar no link de pular e pular para a seção do cabeçalho e a navegação principal. Se eles optarem por não clicar no link "pular" e continuarem a guiar o DOM, serão enviados para o próximo elemento focalizável.
Como todos os links, é importante que o link de salto inclua o contexto sobre a finalidade do link. Adicionar a frase "Pular para o conteúdo principal" permite que o usuário saiba
para onde o link o leva. Há muitas opções de código para escolher ao
fornecer mais contexto aos seus links, como
aria-labelledby,
aria-label ou adicioná-lo
ao conteúdo de texto do elemento <a>, como demonstrado no exemplo.
Indicador de foco
Como você acabou de aprender, a ordem de foco é um aspecto importante da acessibilidade do teclado. Também é importante decidir como esse foco é estilizado. Porque, mesmo que a ordem de foco seja excelente, como um usuário saber onde está na página sem o estilo adequado?
Um indicador de foco visível é uma ferramenta essencial para informar um usuário sobre onde ele está a todo momento na página. Ela é especialmente importante para usuários que não utilizam o teclado.
Estilo padrão do navegador
Hoje, todos os navegadores da Web modernos têm um estilo visual padrão diferente que se aplica a elementos focalizáveis no seu site ou app, alguns mais facilmente visíveis do que outros. À medida que o usuário percorre a página, esse estilo é aplicado quando o elemento recebe o foco do teclado.
Se você permitir que o navegador processe o estilo de foco, é importante revisar
o código para confirmar que o tema não vai substituir o estilo padrão
do navegador. Uma substituição costuma ser escrita como "outline: 0" ou "outline: none" na sua folha de estilo. Esse pequeno código pode remover o estilo do indicador de foco
padrão do navegador, o que dificulta muito a navegação no
site ou app.
a:focus {
outline: none; /* don't do this! */
}
a:focus {
outline: auto 5px Highlight; /* for non-webkit browsers */
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}
Estilos personalizados
Obviamente, você pode ir além do estilo padrão do navegador e criar um indicador de foco personalizado que complemente seu tema. Ao criar um indicador de foco personalizado, você tem muita liberdade para ser criativo!
Uma forma de indicador de foco pode assumir várias formas, seja um contorno, uma borda, um sublinhado, uma caixa, uma mudança de plano de fundo ou alguma outra mudança estilística óbvia que não dependa apenas da cor para indicar que o foco do teclado está ativo nesse elemento.
Você pode mudar o estilo de um indicador de foco para garantir que ele não seja perdido em segundo plano. Por exemplo, quando uma página tem um fundo branco, é possível definir o indicador de foco do botão como um plano de fundo azul. Quando a página tem um plano de fundo azul, você pode definir esse mesmo estilo de foco de botão como um fundo branco.
É possível mudar o estilo do elemento de foco com base no tipo de elemento. Por exemplo, você pode usar um sublinhado pontilhado para links do corpo, mas escolha uma borda arredondada para um elemento de botão.
Não há regra sobre quantos estilos de indicador de foco você tem em uma página, mas mantenha um número razoável para evitar confusão desnecessária.
Conclusão
Para que um site ou app seja considerado acessível, tudo que pode ser acessado com um mouse também precisa ser acessado com um teclado. Este módulo se concentrou no aspecto visual da acessibilidade do teclado, principalmente na ordem e nos indicadores de foco.
Teste seu conhecimento
Teste seus conhecimentos sobre ARIA e HTML
Qual exemplo de estilo CSS :focus é o mais acessível em um fundo branco?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Qual é a finalidade de um link de salto?