Foco do teclado

Muitas pessoas usam um teclado, ou outro software/hardware que imita o funcionalidade de um teclado, como um interruptor, como o meio principal navegação. Pessoas com limitações físicas temporárias, como torção no pulso ou deficiência motora fina, como túnel do carpo, e algumas pessoas sem deficiências, podem optar por usar um teclado para navegar em uma página devido a questões pessoais preferência, eficiência ou hardware quebrado.

Usuários cegos ou com baixa visão podem usar um teclado para navegação combinado com com um software de ampliação ou leitor de tela. No entanto, eles podem usar diferentes atalhos de teclado para navegar em uma tela do que um usuário com visão normal faria.

O suporte ao teclado para todas essas deficiências e circunstâncias é fundamental. Um grande parte da acessibilidade do teclado é centralizada no foco. O foco se refere a qual elemento na tela recebe entrada do teclado no momento.

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

Ordem no foco

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

Na maioria dos idiomas, a ordem do foco começa na parte superior da página e termina na parte inferior, indo da esquerda para a direita. No entanto, como alguns idiomas são lidos da direita para a esquerda, é possível que o idioma principal da página precise de 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. Elementos HTML naturalmente focalizáveis incluem suporte integrado à ordem de tabulação e tratamento básico de eventos do 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 com ARIA que substituem semântica de foco natural.

Índice de tabulações

A ordem de foco começa com elementos que têm um tabindex (em inglês) (se houver algum) e passa do menor número positivo para o maiores (como 1, 2, 3). Em seguida, ele prossegue pelos elementos com um tabindex de zero de acordo com a ordem no DOM. Qualquer elemento com um tabindex negativo são removidos da ordem de foco natural.

Quando um tabindex de zero (tabindex="0") for aplicado a elementos que normalmente não sã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, ao contrário dos elementos HTML focalizáveis naturalmente, é necessário oferecer suporte extra ao teclado para que sejam totalmente acessíveis.

Da mesma forma, se você tiver um elemento que normalmente é focalizável, mas é inativo, como um botão que fica inoperante até que um campo de entrada seja preenchido você precisa adicionar um tabindex negativo (tabindex="-1") a esse elemento. Adicionando um tabindex negativo indica para tecnologias assistivas e teclados que isso deve 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 aos elementos que não receber foco naturalmente. A ordem dos elementos foi manipulada usando tabindex para ilustrar a capacidade que ela pode ter na ordem de foco. Esta é uma exemplo do que não fazer.

.
A nova ordem de foco reflete o HTML.
Assista como um teclado guia do usuário no HTML do CodePen.

Atualmente, a maioria dos sites tem uma longa lista de links de menu no cabeçalho principal da página consistentes de uma página para outra. Isso é ótimo para a navegação geral, mas pode fazer os usuários que usam apenas o teclado têm dificuldade para acessar facilmente a página principal conteúdo sem ter que navegar várias vezes.

Uma forma de pular grupos de links redundantes ou inúteis é adicionar um skip link. Os links de salto são âncora que levam a uma seção diferente da mesma página, usando o respectivo link em vez de direcionar o usuário para outra página do site ou para um link externo recurso. Os links de salto geralmente são adicionados como o primeiro elemento focalizável que um usuário que você encontrará ao chegar a um site e pode ficar visível ou oculto visualmente. até que um usuário a abra, dependendo do que o design exige.

Quando um usuário pressiona a tecla Tab e há um link para ignorar ativo, ele envia o foco do teclado para o link de salto. O usuário pode clicar no link para ignorar e pular além da seção do cabeçalho e da navegação principal. Se eles escolherem não clicar ignore o link e continue a navegar pelo DOM, eles serão enviados para o próximo focalizável.

Como todos os links, é importante que o link de salto inclua contexto sobre a do propósito do link. Adicionar a frase "Ir para o conteúdo principal" informa ao usuário para onde o link os direciona. Há muitas opções de código para escolher fornecer mais contexto aos seus links, como aria-labelledby, aria-label ou adicionando-a ao conteúdo de texto do elemento <a>, como demonstrado no exemplo.

.
Prévia do CodePen com foco do teclado.
Assista um usuário de teclado navegar com e sem um link de salto.

Indicador de foco

Como você acabou de aprender, a ordem de foco é um aspecto importante do teclado acessibilidade. Também é importante decidir como esse foco será estilizado. Devido ao mesmo que a ordem de foco seja excelente, como um usuário pode saber onde está da página sem o estilo adequado?

Um indicador de foco visível é uma ferramenta vital para informar um usuário sobre onde ele está em todos os momentos da página. Isso é especialmente importante para os usuários que usam apenas o teclado virtual.

Estilo padrão do navegador

Hoje, cada navegador da Web moderno tem 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 outras. À medida que um usuário navega pela página, esse estilo é aplicado à medida que recebe o foco do teclado.

Se você permitir que o navegador manipule o estilo de foco, é importante analisar seu código para confirmar que o tema não modificará o padrão do navegador estilização. 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 foco padrão do navegador o que dificulta que os usuários naveguem em seu site ou app.

O que não fazer
a:focus {
  outline: none; /* don't do this! */
}
O que fazer
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 de navegador e criar um navegador indicador de foco que complementa seu tema. Ao criar um foco personalizado você tem muita liberdade para ser criativo!

A forma do indicador de foco pode assumir várias formas: contorno, borda, sublinhado, uma caixa, uma alteração no plano de fundo ou alguma outra alteração estilística óbvia que não depende apenas da cor para indicar que o foco do teclado está ativo em esse elemento.

É possível alterar o estilo de um indicador de foco para garantir que ele não seja perdido na plano de fundo. Por exemplo, quando uma página tem um fundo branco, você pode definir o indicador de foco do botão em um fundo azul. Quando a página tiver um ícone azul é possível 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 os links do corpo, mas escolher uma borda arredondada para um elemento de botão.

.
Estilo de foco, conforme demonstrado no CSS.
Veja o que acontece enquanto o usuário do teclado percorre cada elemento de foco estilizado.

Não há regra sobre quantos estilos de indicador de foco você tem em um página, mas mantenha um número razoável para evitar confusão.

Conclusão

Para que um site ou app seja considerado acessível, tudo o que pode ser acessado com um mouse, também precisa ser acessado com um teclado. Neste módulo, focado no aspecto visual da acessibilidade do teclado, principalmente no foco indicadores de ordem e 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;
Esse recurso não atende às diretrizes de contraste de cores das WCAG.
background-color:black;
Embora seja possível que ele seja acessível, esse design exige uma consideração adicional da cor do texto e do posicionamento no documento.
text-decoration: dotted underline 2px blue;
Esse design é a opção mais acessível da lista. No entanto, essa não é a única opção de design acessível. Lembre-se de que seu design precisa aderir à taxa de contraste de cores de 3:1, conforme definido pelas WCAG.
outline: none; text-decoration:none; background:none;
Um indicador visual é importante para alguns usuários de teclado. Sempre inclua estilo para o foco.

Qual é a finalidade de um link de salto?

Ajudam um usuário de teclado a pular grupos redundantes ou inúteis de links.
Isso é especialmente útil em menus de navegação longos, quando um usuário pode já ter acessado a página de interesse.
Ajude um usuário de teclado a pular conteúdo desinteressante.
Não é necessariamente possível saber qual conteúdo é ou não interessante para os usuários. Essa não é uma maneira útil de definir o uso do link de salto.