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.

Il y a quelques années, quand j’utilisais Pluxml, j’avais mis un pattern (un motif à respecter) sur mon champs email pour vérifier sa bonne conformité car je m’étais rendu compte que les adresses de type mail@mail sont considérées comme valides, même sans l’extension du domaine (.fr, .com, .eu, etc).

Voir : https://lokoyote.eu/pattern-des-input-mail-ou-comment-verifier-les-mails-en-html5/

J’ai cru à l’époque à un bug.

Et en cherchant d’autres infos récemment, je suis tombé sur ça : https://www.wikiwand.com/en/Email_address#/Examples

Et via cette discussion, on apprend qu’en fait ce type de mail est surtout utilisé en intranet dans des entreprises notamment par les admins.

Du coup, il ne s’agit pas d’un bug mais d’une spécificité bien pensée !

Si vous savez que votre champs d’adresse mail n’est pas destiné en intranet, n’hésitez pas à utiliser l’option pattern si vous avez accès au code HTML.

Il arrive au démarrage ou en sortie de veille que le module Bluetooth s’allume automatiquement avec le Wifi.

Pour le désactiver, ouvrir un terminal et entrer la commande suivante :

sudo gedit /etc/bluetooth/main.conf

Dans le fichier, tout en bas, changer la ligne :

AutoEnable=true

en

AutoEnable=false