A thread de hoje é sobre :focus
Porque usamos :focus? O que um indicador de foco precisa ter?
Nessa thread vou me aprofundar nos conceitos por detrás do foco, então se você é de UI talvez te ajude também!
Segue a thread -> 🧵
Focus
Pra começar, foco é uma ferramenta de semântica de interatividade. A web é uma superfície, logo questões como ergonomia e affordance se aplicam a ela.
As semânticas de ergonomia são as características que tornam um elemento interativo operável.
As semânticas de affordance tratam de como a superfície é percebida pelos mecanismos cognitivos do cérebro - percepção de relevo, toque, pressão e destaque fazem parte disso.
Ambos conceitos são necessários pra que a web como superfície "diga" pro usuário como operá-la
Fiz questão de trazer esses conceitos pra demonstrar a importância dos indicadores de foco, inclusive pra acessibilidade.
O critério de sucesso 2.4.7 da WCAG (Foco visível) explica que o foco ajuda tanto quem opera apenas pelo teclado como pessoas com problemas cognitivos
Link da WCAG sobre foco visível
w3.org/WAI/WCAG21/Understanding/focus-visible.html
O que um indicador de foco precisa ter?
- Bom contraste com a cor de fundo
- Pelo menos 1px de espessura
A especificação 2.4.11 (aparência do foco) trás uma ótima explicação sobre o pq desses itens
w3.org/WAI/WCAG22/Understanding/focus-appearance.html
Os elementos interativos "focáveis" são links, botões, campos de formulário, itens de menu, elementos engatilhados por hover como tooltips e widgets como calendários.
O site abaixo tem uma lista completa de elementos com foco e a sua compatibilidade
allyjs.io/data-tables/focusable.html
A Sara Soueidan tem um artigo incrível sobre como criar focos que atendem os critérios de sucesso de acessibilidade E de design, beneficiando devs e UI designers
sarasoueidan.com/blog/focus-indicators/#what-exactly-is-a-focus-indicator%3F
Pra finalizar, o papel da pessoa designer é se assegurar de que os padrões visuais de acessibilidade e heurísticas de layout estão sendo atendidos, sem abrir mão da identidade visual
O papel das pessoas devs é garantir que a mecânica de interação e gestão de foco faça sentido
Eu trouxe bastante conceitos de design e acessibilidade, me contem se quiserem algo mais aprofundado sobre esses tópicos. Essa thread vai ter que virar artigo pra caber tudo que tange essas questões
Até a próxima!