Gerenciando o foco do usuário com :focus-visible

Este será o segundo post de uma pequena série que estamos fazendo sobre acessibilidade de formulários. Se você perdeu o primeiro post, confira Formulários Acessíveis com Pseudo Classes. Neste post veremos :focus-visible e como usá-lo em seus sites!

Ponto de contato de foco

Antes de avançarmos com :focus-visible, vamos revisitar como :focus funciona no seu CSS. Foco é o indicador visual de que um elemento está interagindo por meio de teclado, mouse, trackpad ou tecnologia assistiva. Certos elementos são naturalmente interativos, como links, botões e elementos de formulário. Queremos ter certeza de que nossos usuários saibam onde estão e as interações que estão realizando.

Lembre-se de não fazer isso em seu CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Quando você remove o foco, você o remove por TODOS! Queremos ter certeza de que estamos preservando o foco.

Se por algum motivo você precisar remover o foco, certifique-se de que também haja alternativa :focus estilos para seus usuários. Esse substituto pode corresponder às cores da sua marca, mas certifique-se de que essas cores também estejam acessíveis. Se o marketing, o design ou a marca não gostarem dos estilos de anel de foco padrão, então é hora de começar a conversar e colaborar com eles sobre a melhor maneira de adicioná-los novamente.

O que é a focus-visible?

A pseudoclasse, :focus-visible, é exatamente como nosso padrão :focus pseudoclasse. Dá ao usuário um indicador de que algo está sendo focado na página. A maneira como você escreve :focus-visible está cortado e seco:

:focus-visible {
  /* ... */
}

Ao usar :focus-visible com um elemento específico, a sintaxe é mais ou menos assim:

.your-element:focus-visible {
  /*...*/
}

A grande vantagem de usar :focus-visible é que você pode fazer seu elemento se destacar, brilhante e ousado! Não há necessidade de se preocupar em mostrar se o elemento foi clicado/tocado. Se você optar por não implementar a classe, o padrão será o anel de foco do agente do usuário, o que para alguns é indesejável.

história de fundo de focus-visible

Antes tínhamos o :focus-visible, o estilo do agente do usuário seria aplicado :focus para a maioria dos elementos da página; botões, links, etc. Aplicaria um contorno ou “anel de foco” ao elemento focável. Isso foi considerado feio, a maioria não gostou do anel de foco padrão fornecido pelo navegador. Como o anel de foco era desfavorável de se olhar, a maioria dos autores o removeu... sem alternativa. Lembre-se, quando você remover :focus, diminui a usabilidade e torna a experiência inacessível para usuários de teclado.

No estado atual da web, o navegador não indica mais visivelmente o foco em torno de vários elementos quando eles estão em foco. Em vez disso, o navegador usa heurísticas variadas para determinar quando ajudaria o usuário, fornecendo em troca um anel de foco. De acordo com Khan Academy, uma heurística é, “uma técnica que orienta um algoritmo para encontrar boas escolhas.”

O que isso significa é que o navegador pode detectar se o usuário está ou não interagindo com a experiência a partir de um teclado, mouse ou trackpad e, com base nesse tipo de entrada, adiciona ou remove o anel de foco. O exemplo nesta postagem destaca a interação de entrada.

Nos primeiros dias de :focus-visible estávamos usando um polifill para lidar com o anel de foco criado por Alice Boxhall e Brian Kardell, a Mozilla também lançou sua própria pseudoclasse, :moz-focusring, antes da especificação oficial. Se você quiser saber mais sobre os primeiros dias do anel de foco, confira Elencos A11y com Rob Dodson.

Importância do foco

Existem muitos motivos pelos quais o foco é importante em sua aplicação. Por um lado, como afirmei acima, nós, como embaixadores da web, temos que ter certeza de que estamos fornecendo a melhor experiência acessível possível. Não queremos que nenhum de nossos usuários adivinhe onde estão enquanto navegam pela experiência.

Um exemplo que sempre vem à mente é o Site Dois Irmãos Cegos. Se você acessar o site e clicar/tocar (funciona no celular), no olho fechado no canto inferior esquerdo, você verá o olho aberto e uma simulação começa. Ambos os irmãos, Bradford e Bryan Manning, foram diagnosticados ainda jovens com a doença de Stargardt. A doença de Stargardt é uma forma de degeneração macular do olho. Com o tempo, os dois irmãos ficarão completamente cegos. Visite o site e clique no olho para ver como eles veem.

Se você estivesse no lugar deles e tivesse que navegar por uma página, você gostaria de ter certeza de que sabia exatamente onde estava durante toda a experiência. Um anel de foco oferece esse poder.

Demo

A demonstração abaixo mostra como :focus-visible funciona quando adicionado ao seu CSS. A primeira parte do vídeo mostra a experiência de navegar com o mouse, a segunda mostra navegar apenas com o teclado. Eu também me gravei para mostrar que mudei do mouse para o teclado.

O navegador está prevendo o que fazer com o anel de foco com base na minha entrada (teclado/mouse) e, em seguida, adicionando um anel de foco a esses elementos. Neste caso, quando estou navegando neste exemplo com o teclado, tudo ganha foco. Ao usar o mouse, apenas a entrada fica em foco e os botões não. Se você remover :focus-visible, o navegador aplicará o anel de foco padrão.

O código abaixo está sendo aplicado :focus-visible aos elementos focáveis.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Se você quiser especificar o label ou o botão para receber :focus-visible apenas acrescente a classe com input or button respectivamente.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Suporte

Se o navegador não suportar :focus-visible você pode ter uma alternativa para lidar com a interação. O código abaixo é do Parque MDN. Você pode usar o @apoia em regra ou “consulta de recurso” para verificar o suporte. Uma coisa a ter em mente: a regra deve ser colocada no topo do código ou aninhada dentro de outro grupo de regras.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Outras preocupações de acessibilidade

Preocupações de acessibilidade que você deve ter em mente ao desenvolver sua experiência:

• Certifique-se de que as cores escolhidas para o seu indicador de foco, se existirem, ainda estejam acessíveis de acordo com as informações documentadas no WCAG 2.2 Contraste sem texto (Nível AA)
• A sobrecarga cognitiva pode causar sofrimento ao usuário. Certifique-se de manter os estilos consistentes em vários elementos interativos

Suporte do navegador

Ligações Úteis

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
• PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
• PlatãoESG. Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
• PlatoHealth. Inteligência em Biotecnologia e Ensaios Clínicos. Acesse aqui.
• Fonte: https://css-tricks.com/managing-user-focus-with-focus-visible/