Accessibilité sur internet : CSS compliqué à mettre en place pour tous

Attention, cet article date de 5 ans, les informations peuvent ne plus être à jour...

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.

4 avis sur l'article “Accessibilité sur internet : CSS compliqué à mettre en place pour tous”

  1. Mh… C’est possible (dans une certaine mesure) en pure-CSS.
    Si tu navigues au clavier, tu peux avoir un :focus, sans :hover. Donc suffit de faire

    input:focus:not(:hover) { … }

    Évidemment, si la souris se trouve au dessus de l’élément par hasard, ça ne marchera pas (c’est la limite). Mais pour un lien ou un bouton, relativement petits (donc rarement :hover par hasard), ça devrait aller. C’est plutôt pour les gros champs texte que ça pose problème.

    Une autre approche, davantage rétro-compatible, c’est ça :

    input:focus { background: red; } /* rouge au focus */
    input:hover { background: white; } /* remis à blanc (ou par défaut) au hover */

    Ça devrait marcher, je pense : le style du « hover » est prioritaire sur le « focus » si on l’écrit dans cet ordre.

    (là encore, on a le même problème qu’avant avec un pointeur se trouvant par hasard au dessus d’un lien, mais il n’utilise pas de « :not() » supporté depuis seulement quelques années).

    • Lokoyote dit :

      @le hollandais volant :

      J’avoue avoir complètement zappé le :not
      Le problème c’est que sa prise en charge est assez hasardeuse en fonction des navigateurs, c’est un peu ce qui m’embête aussi du coup.
      Mais je sais, si on résonne comme ça, on ne fait plus de CSS à cause de IE (troll gratuit évidemment).
      Mais je vais tenter ! Merci du rappel !

  2. PS :

    Pour le JS, il y a une façon simple : il suffit de mettre un « flag » sur l’élément. Ce flag est modifié au .mouseover() ET au .focus(), et il contient la date (à la seconde près) où il a été activé.

    Si la souris se :hover à t=1 et que le clavier vient ensuite faire un :focus à t=2, le focus prend le dessus : vu qu’il a été fait après.

    Si le clic a été fait avec la souris, les événements de .mouseover() et de .focus() sont quasi-simultanés : on détecte donc un clic/hover souris et non un truc au clavier.

    Au besoin, on calculera la durée entre les deux actions, et on mettra une durée raisonnable après laquelle on considère que les deux actions sont d’origines différentes (souris ou clavier).

    En pratique, j’aurais :
    – au hover/mouseover : on met le flag avec (dans les attributs « data-* ») : element.dataset.mouseOverAt = new Date().toTimeString()
    – avec le focus : on lit la valeur et on compare avec la Date() actuelle (c’est précis à la µs). Si >50ms : alors le :hover et le :focus sont décorrélés et on assume que le focus vient du clavier : on annule le flag : element.dataset.mouseOverAt = 0;

    En CSS, on applique le style seulement si le flag vaut 0 :

    element[data-mouse-over-at= »0″] { background: red; }

    (c’est sûrement pas idéal, mais c’est une idée)

Répondre à le hollandais volant Annuler la réponse

Votre adresse de messagerie ne sera pas publiée.

Possibilité d'ajouter une balise de SPOILER via la syntaxe suivante :
[spoiler] Texte à cacher [/spoiler]