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 geralmente chamados de links de salto ou links fixos. 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> é direcionado, 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 lidar com o foco de forma adequada e com cuidado ajuda a criar uma experiência do usuário boa e acessível. Também é 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 ajudam as pessoas que usam um dispositivo, como um teclado ou um controle de interruptor para navegar e interagir com um site. Se um elemento receber o foco e não houver uma indicação visual, o usuário pode perder o controle do que está em foco. Isso pode criar problemas de navegação e resultar em comportamento indesejado se, por exemplo, o link errado for seguido.

Como os elementos chamam a atenção

Alguns 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 é a ordem em que os elementos são focados, sempre que alguém pressiona a tecla Tab, ou o foco é mudado com uma mudança de hash no URL ou por um evento JavaScript. Se tabindex em um elemento HTML estiver definido como 0, ele poderá receber foco pela chave tab e vai respeitar o índice de guia global, que é definido pela ordem da origem 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.

Estilo de foco

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

Esse comportamento pode ser alterado com CSS, usando as pseudoclasses :focus, :focus-within e :focus-visible que você aprendeu na lição 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 uma border-radius definida no elemento e usar outline, ela não vai corresponder. O contorno terá cantos afiados. Por isso, é tentador usar um box-shadow com um pequeno raio de desfoque, porque box-shadow é cortado para a forma, honrando border-radius, mas esse estilo não será mostrado 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

Criar um estado de foco que contraste com o estado padrão de um elemento é extremamente importante. 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 eles 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 do foco é muito claro em comparação com o estado padrão.

Teste seu conhecimento

Teste seu conhecimento sobre foco