Foco do teclado

Muitas pessoas usam um teclado ou um software ou hardware que imita a funcionalidade de um teclado, como um interruptor, como principal meio de navegação. Isso pode ser devido a preferência pessoal, eficiência ou hardware quebrado.

Pessoas com limitações físicas temporárias, como torção no pulso ou deficiências motoras finas, como síndrome do túnel do carpo, podem optar por usar um teclado para navegar. Usuários cegos ou com baixa visão podem usar um teclado para navegação combinado com um software de ampliação ou leitor de tela. No entanto, eles podem usar comandos de atalho de teclado diferentes para navegar em uma tela do que um usuário com visão.

Algumas pessoas sem deficiência também podem optar por navegar usando um teclado.

O suporte de teclado para todas essas deficiências e circunstâncias é fundamental. Grande parte da acessibilidade do teclado está centrada no foco. O foco se refere ao elemento na tela que recebe ativamente a entrada do teclado.

Neste módulo, vamos nos concentrar na estrutura HTML e no estilo CSS para teclado e elementos com foco. O módulo JavaScript inclui mais informações sobre gerenciamento de foco e pressionamentos de tecla para elementos interativos.

Ordem de foco

Os elementos para os quais um usuário de teclado pode navegar são chamados de elementos com foco. A ordem de foco, também chamada de ordem de tabulação ou navegação, é a ordem em que os elementos recebem o foco. A ordem de foco padrão precisa ser lógica, intuitiva e corresponder à ordem visual de uma página.

Para a maioria dos idiomas, a ordem de foco começa na parte de cima da página e termina na parte de baixo, indo da esquerda para a direita. No entanto, alguns idiomas são lidos da direita para a esquerda. Portanto, o idioma principal da página pode justificar uma ordem de foco diferente.

Por padrão, a ordem de foco inclui elementos HTML com foco natural, como links, caixas de seleção e entradas de texto. Os elementos HTML com foco natural incluem suporte integrado à ordem de tabulação e tratamento básico de eventos de teclado.

É possível atualizar a ordem de foco para incluir elementos que normalmente não recebem foco, como elementos HTML não interativos, componentes personalizados ou elementos com ARIA, e substituir 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 vai do menor número positivo para o maior (como 1, 2, 3). Em seguida, ele passa por elementos com um tabindex de zero de acordo com a ordem deles 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 sem foco, eles são adicionados à ordem de foco natural da página de acordo com a forma como aparecem no DOM. No entanto, ao contrário dos elementos HTML com foco natural, é necessário fornecer suporte adicional de teclado para que eles sejam totalmente acessíveis.

Da mesma forma, se você tiver um elemento que normalmente pode ser focado, 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 sinaliza para tecnologias assistivas e teclados que esse botão precisa ser removido da ordem de foco natural. Mas não se preocupe, você pode usar JavaScript para adicionar o foco de volta ao elemento quando necessário.

Neste 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 ela pode ter na ordem de foco. Este é um exemplo do que não fazer.

Ignorar os links

A maioria dos sites atuais tem uma longa lista de links de menu no cabeçalho principal da página, consistente de página para página. Isso é ótimo para navegação geral, mas pode dificultar o acesso dos usuários que usam apenas o teclado ao conteúdo principal do site sem precisar usar a tecla Tab várias vezes.

Uma maneira de pular grupos de links redundantes ou inúteis é adicionar um link de salto. Os links de salto são links de âncora 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 do site ou um recurso externo. Os links de salto são normalmente adicionados como o primeiro elemento com foco que um usuário encontra ao acessar um site e podem ficar visíveis ou ocultos visualmente até que um usuário use a tecla Tab, dependendo do que o design exige.

Quando um usuário pressiona a tecla Tab e um link de salto ativo está no lugar, ele envia o foco do teclado para o link de salto. O usuário pode clicar no link de salto e pular a seção do cabeçalho e a navegação principal. Se eles optarem por não clicar no link de salto e continuar usando a tecla Tab no DOM, serão enviados para o próximo elemento com foco.

Como todos os links, é importante que o link de salto inclua contexto sobre a finalidade do link. Adicionar a frase "Pular para o conteúdo principal" informa ao usuário para onde o link está levando. Há muitas opções de código para escolher ao fornecer contexto adicional aos links, como aria-labelledby, aria-label, ou adicioná-lo ao conteúdo de texto do <a> elemento, conforme 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. Mesmo que a ordem de foco seja excelente, como um usuário pode saber onde está na página sem o estilo adequado?

Um indicador de foco visível é fundamental para informar aos usuários onde eles estão o tempo todo na página. Isso é especialmente importante para usuários que usam apenas o teclado. O foco não obscurecido (mínimo) garante que o indicador de foco não esteja oculto abaixo de outros componentes.

Estilo padrão do navegador

Atualmente, todos os navegadores da Web modernos têm um estilo visual padrão diferente que se aplica a elementos com foco no seu site ou app, alguns mais visíveis do que outros. À medida que um usuário usa a tecla Tab na 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 geralmente é escrita como "outline: 0" ou "outline: none" em sua folha de estilo. Esse pequeno trecho de código pode remover o estilo do indicador de foco padrão do navegador, o que dificulta muito a navegação dos usuários no seu site ou app.

Não recomendado: sem contorno

a:focus {
  outline: none; /* don't do this! */
}

Recomendado: contorno estilizado

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Estilos personalizados

É claro que 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 muitas 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 um estilo de indicador de foco para garantir que ele possa ser visto. Por exemplo, quando uma página tem um plano de fundo branco, você pode 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 o mesmo estilo de foco do botão como um plano de fundo branco.

Você pode mudar o estilo do elemento de foco com base no tipo de elemento. Por exemplo, você pode usar um sublinhado pontilhado para links de corpo, mas escolher 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.