Foco

Podcast do CSS - 018: foco

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 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 em torno dele. Por quê?

Isso ocorre porque o <main> tem um valor de atributo tabindex="-1", ou seja, ele pode ser focado de forma programática. Quando o <main> é segmentado, porque o #main-content na barra de URL do navegador corresponde a id, ou seja, recebe 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 mais acessível. Também pode ser um ótimo lugar para adicionar interesse às interações.

Por que o foco é importante?

Como desenvolvedor Web, é seu trabalho tornar um site acessível e inclusivo para todos. A criação de 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 comportamentos indesejados por exemplo, o link errado é seguido.

Como os elementos chamam a atenção

Certos elementos são focalizáveis automaticamente. são elementos que aceitam interação e entrada, como <a>, <button>, <input> e <select>. Resumindo, todos os elementos de 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, apenas quando um evento JavaScript ocorre ou uma mudança de hash (correspondente ao id do elemento no URL). Se você definir tabindex como algo maior que 0, ele será removido do índice de guias global, definido pela ordem da fonte do documento. A ordem de tabulação agora será definida pelo valor de tabindex, Portanto, um elemento com tabindex="1" vai receber o foco antes de um com tabindex="2", por exemplo.

Foco do estilo

O comportamento padrão do navegador quando um elemento recebe 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 :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 perto do texto de um link. mas a propriedade outline-offset pode ajudar com isso, já que adiciona padding visual extra sem afetar o tamanho geométrico que o elemento preenche. Um valor numérico positivo para outline-offset vai empurrar o contorno para fora, um valor negativo puxará 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 ignora na maioria das imagens as 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 valores positivos para tabindex em um elemento HTML apenas se isso 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