Usar :hover
para exibir informações ou elementos adicionais é uma técnica muito útil, mas uma grande desvantagem em usar a pseudoclasse do hover é que eles geralmente não são fáceis de acessar. Nem todo mundo usa um mouse e alguns usuários têm deficiências visuais, então eles confiam nos leitores de tela ou no teclado – duas funcionalidades que tecnicamente não pairam.
Felizmente a especificação CSS nos dá um presente a emparelhar com :hover
::focus-within
. Com os :focus-within
desenvolvedores podem modificar estilos de elementos quando um elemento ou seu pai tem o foco do teclado!
Considere o seguinte modelo HTML com o estilo CSS padrão:
<ul id="sports"> <li> <label> <input type="checkbox" name="sports[]"> Soccer <button class="remove">Remove</button> </label> <!-- ... --> </li> </ul>
#sports .remove { display: none; } #sports li:hover .remove { display: inline-block; }
Com o código acima, passar o mouse sobre um item da lista mostraria o botão “remover”. Isso é ótimo para usuários de mouse, mas totalmente inútil para usuários de teclado. Vamos consertar isso usando :focus-within
:
#sports .remove { display: none; } #sports li:hover .remove, #sports li:focus-within .remove { display: inline-block; }
Quando o foco atinge a caixa de seleção, o foco está tecnicamente dentro do item da lista e, portanto, podemos empregar :focus-within
para mostrar o botão “Remover”.
A acessibilidade é algo que é considerado por último, mas não deve ser uma reflexão tardia; de certa forma, :focus-within
é um aliado útil mesmo quando a acessibilidade foi uma reflexão tardia. Mesmo considerando acessibilidade na frente, :focus-within
deve estar na caixa de ferramentas de todos os desenvolvedores!