Pour celles et ceux qui me lisent régulièrement, vous savez que j’ai décidé de mettre à jour mon petit blog aux normes CSS, notamment en ce qui concerne l’accessibilité.

Demain, possiblement, je pourrai être amené à utiliser Internet sans souris, avec un lecteur d’écran ou que sais-je encore, et que ça me ferait bien ch*er de galérer à trouver des infos ou à apprendre par simple mauvaise accessibilité au web.

En prenant conscience de cela, je me suis donné comme objectif d’améliorer au maximum le confort et la navigation de recherche sur mon blog.

J’ai donc modifié pas mal ma partie CSS (celle qui fait la mise en page), notamment avec le sélecteur :focus, qui permet de modifier un lien, un bouton ou autre quand il est ciblé, essentiellement par le clavier en navigant avec Tab.

Le hic sur lequel je bute, c’est que le style appliqué est aussi retrouvé lors du clique de la souris sur certains éléments. Dans les faits, ce n’est pas grave mais ça peut impacter l’ergonomie d’un site pour les personnes utilisant la souris.

Pour régler cela, la solution simple est de mettre le même style (la même règle CSS) pour le survol de l’élément en question à la souris (:hover), au clique souris (:active) et pour le focus de l’élément pour la navigation au clavier (:focus ou :focus-within).

Solution simple et efficace.

Admettons maintenant que l’on souhaite juste améliorer le contraste des liens à la navigation au clavier mais pas à la souris, qu’on veuille justement se lâcher un peu en animation et en *bling-bling* pour les utilisateurs souris et donc différencier totalement le style CSS pour la navigation souris et clavier.

Il s’avère en fait qu’il y a un problème à ce niveau.

Il n’est pas possible actuellement de le faire en pur CSS. Avec un peu de JS (Javascript) ça semble marcher, mais en CSS uniquement non.

La seule piste que j’ai trouvé est appelée :focus-visible (https://wicg.github.io/focus-visible/explainer.html) qui n’est malheureusement pas encore implémenté et reste expérimental mais j’avoue que l’idée est sympa.

Il est, semble-t-il, possible de l’installer sur son site via Polyfill, mais je n’ai pas réussi.

En attendant, j’ai donc mis la même animation de contraste pour les lien et certains boutons. Je verrai si je ne me mettrai pas un peu au JS en attendant que l’implémentation de ce nous focus soit mis en place… Ou laisser en l’état, après tout, ce n’est que du visuel.