Estado de foco — A guerra entre UI e UX
Escrito por: Marília Gabriele Suzart
O estado de foco é um recurso nativo do HTML, mas por falta de conhecimento Designers sacrificam a experiência em prol da estética.
Nesse artigo, vou te explicar o que é o estado de foco, para que ele serve e como unir UI e UX.
O que é
O estado de foco é uma comunicação visual para informar qual elemento está selecionado, quando estamos navegando pelo teclado ou controle remoto.
Ele é essencial para pessoas com deficiências motoras e muito útil para alguém que eventualmente quebrou o mouse.
Esse é um atributo do CSS chamado outline, o HTML coloca ele automaticamente para os elementos interativos, como botões e links. Mesmo sendo um recurso automático, ainda sim é uma barreira por causa das más práticas de codificação.
WCAG, critério de sucesso 2.4.7 Foco Visível (Nível AA): Qualquer interface de usuário operável por teclado deve ter um modo de operação em que o indicador de foco do teclado é visível.
Porque existem barreiras com o foco
Designers
O estado de foco automático também é acionado no clique, muitas pessoas que atuam como Designer pedem para as pessoas desenvolvedoras remove-lo, só porque acham que é “feio”.
Pessoas desenvolvedoras
Removem o outline porque a pessoa Designer pediu ou porque aprendeu a fazer assim em um curso. Além disso, fazem piadas com o HTML e não se preocupam em aprender semântica básica.
Cursos de programação
Seja na faculdade ou em bootcamps, as pessoas que ensinam programação negligenciam a acessibilidade nos projetos educacionais. As pessoas em início de carreira aprendem tudo errado e replicam isso na vida profissional.
Eu participei de alguns cursos de programação, no qual ensinaram a remover o outline sempre que começar um novo projeto. Conforme exemplo a seguir:
Uma dessas escolas é muito famosa e influente na comunidade de tecnologia, ensinando milhares de pessoas todos os anos.
Até quando as escolas de programação vão continuar ensinando a implementar barreiras de acesso na web?
Removendo a barreira
Designers
Ao criar o protótipo dos componentes, além dos estados de hover, pressed e disabled, também forneça o estado de focus.
Você pode usar as cores padrão do HTML, mas também é possível customizar a largura e cor da borda. Para isso certifique-se que o foco visível não ficará invisível.
A espessura ideal é 2 pixels, com cor sólida, contraste mínimo de 4.5:1 e área mínima de 1 pixel entre o elemento e a borda para destacar melhor o contraste.
Lembre que estamos falando de experiência (UX) e não estética (UI), o foco não é para ser bonito, ele precisa ser operável e perceptível.
Verifique as regras em rascunho da WCAG versão 2.2:
critério de sucesso 2.4.11 Aparência do foco (mínimo) (Nível AA)
critério de sucesso 2.4.12 Aparência do Foco (Aprimorado) (Nível AAA)
Pessoas desenvolvedoras
Procure no código os lugares onde tem outline: none; ou outline: 0; e substitua pelo trecho de código a seguir:
Caso precise customizar a cor e a espessura da borda, coloque essas configurações no focus-visible, conforme imagem a seguir:
Como testar
Navegue pela aplicação usando a tecla TAB para avançar para o próprio elemento e SHIFT + TAB para voltar.
Tente executar a tarefa, como por exemplo realizar o cadastro, sem o mouse, usando apenas o teclado. Verifique se é possível interagir com todos os campos, botões e links e se eles possuem o estado de foco visível.
Caso sinta dificuldade de localizar o elemento que está com o foco ativo, abra um bug descrevendo o problema encontrado.
Esse artigo é o material de apoio do nosso vídeo sobre o estado de foco:
Obrigada por ler. Espero que esse conteúdo seja útil para você e seu time☺
