Foco

The CSS Podcast - 018: Focus

Na sua página da Web, você clica em um link que leva o usuário ao conteúdo principal do site. Eles são frequentemente chamados de links de pular ou de âncora. Quando esse link é ativado por um teclado, usando as teclas tab e enter, o contêiner de conteúdo principal tem um anel de foco ao redor. Por quê?

Isso ocorre porque o <main> tem um valor de atributo tabindex="-1", o que significa que ele pode ser focado programaticamente. Quando o <main> é segmentado, porque o #main-content na barra de URL do navegador corresponde ao id, ele recebe o foco programático. É tentador remover os estilos de foco nessas situações, mas o processamento adequado e cuidadoso ajuda a criar uma boa e acessível experiência do usuário. Também pode ser um ótimo lugar para adicionar interesse às interações.

Por que o foco é importante?

Como desenvolvedor da Web, seu trabalho é tornar um site acessível e inclusivo para todos. Criar estados de foco acessíveis com CSS faz parte dessa responsabilidade.

Os estilos de foco auxiliam as pessoas que usam um dispositivo como um teclado ou um controle do interruptor para navegar e interagir com um site. Se um elemento receber foco e não houver indicação visual, um usuário pode perder o controle do que está em foco. Isso pode criar problemas de navegação e resultar em um comportamento indesejado se, por exemplo, o link errado for seguido.

Como os elementos recebem foco

Certos elementos são focalizáveis automaticamente. são elementos que aceitam interação e entrada, como <a>, <button>, <input> e <select>. Em resumo, todos os elementos do formulário, botões e links. Normalmente, é possível navegar pelos elementos focalizáveis de um site usando a tecla Tab para avançar na página e Shift + Tab para voltar.

Há também um atributo HTML chamado tabindex, que permite mudar o índice de tabulação, que é o ordem em que os elementos estão focados. Sempre que alguém pressiona a tecla Tab, ou foco for alterado com uma alteração de hash no URL ou por um evento JavaScript. Se tabindex em um elemento HTML for definido como 0, pode receber foco pela chave tab e respeitar o índice de guias global, que é definido pela ordem da fonte do documento.

Se você definir tabindex como -1, ele só poderá receber foco de forma programática, ou seja, somente quando um evento JavaScript ocorrer ou uma mudança de hash (que corresponde ao id do elemento no URL) ocorrer. Se você definir tabindex como um valor maior que 0, ele será removido do índice de guias global, definido pela ordem da origem do documento. A ordem de tabulação agora será definida pelo valor de tabindex. Assim, um elemento com tabindex="1" vai receber o foco antes de um elemento com tabindex="2", por exemplo.

Foco do estilo

O comportamento padrão do navegador quando um elemento recebe o foco é apresentar um anel de foco. Esse anel de foco varia entre navegadores e sistemas operacionais.

Isso pode ser alterado com CSS, usando :focus, :focus-within e :focus-visible pseudoclasses que você aprendeu aula sobre pseudoclasses. É importante definir um estilo de foco que tenha contraste com o estilo padrão de um elemento. Por exemplo, uma abordagem comum é usar a propriedade outline.

a:focus {
  outline: 2px solid slateblue;
}

A propriedade outline pode aparecer muito próxima do texto de um link, mas a propriedade outline-offset pode ajudar nisso, porque adiciona padding visual extra sem afetar o tamanho geométrico que o elemento preenche. Um valor numérico positivo para outline-offset empurra o contorno para fora, e um valor negativo puxa o contorno para dentro.

Atualmente, em alguns navegadores, Se você tiver um border-radius definido no elemento e usar outline, não serão iguais, porque o contorno terá cantos retos. Por isso, é tentador usar uma box-shadow com um raio de desfoque pequeno porque box-shadow é cortada na forma, homenageando border-radius, mas ele não aparece no modo de alto contraste do Windows. Isso ocorre porque o modo de alto contraste do Windows não aplica sombras e, na maioria das vezes, ignora imagens de plano de fundo para favorecer as configurações preferidas do usuário.

Resumo

É extremamente importante criar um estado de foco que contraste com o estado padrão de um elemento. Os estilos padrão do navegador já fazem isso por você, mas se você quiser mudar esse comportamento, lembre-se do seguinte:

  • Evite usar outline: none em um elemento que possa receber o foco do teclado.
  • Evite substituir os estilos outline por box-shadow. porque elas não aparecem no modo de alto contraste do Windows.
  • Defina um valor positivo para tabindex em um elemento HTML apenas se for absolutamente necessário.
  • Verifique se o estado de foco é muito claro em comparação com o estado padrão.

Teste seu conhecimento

Teste seu conhecimento sobre foco

Quais das opções a seguir são elementos focalizáveis automaticamente?

<a>
🎉
<p>
Tente novamente.
<button>
🎉
<input>
🎉
<output>
Tente novamente.
<select>
🎉

Qual dos seguintes dispositivos de entrada pode definir o foco?

Gamepad
Os gamepads geralmente enviam eventos de teclado quando os botões são pressionados.
Teclado
Com certeza causa foco quando usado para navegar na Web.
Camundongo
Um mouse exige visão e não coloca mais o foco nos elementos quando usado. Todos os navegadores costumavam colocar o foco em coisas como botões quando clicados, mas isso mudou.
Tecnologia adaptativa (leitor de tela, switch etc.)
Definitivamente causa foco quando usado para navegar na Web.
Uma batata
Embora uma batata possa ser usada como ponteiro em telas sensíveis ao toque, ela não causa foco após a interação com as entradas na tela.