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
porbox-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>
<button>
<input>
<output>
<select>
Qual dos seguintes dispositivos de entrada pode definir o foco?