[Résolu] Semantique interactive

Re-bonjour,
Lorsque je regarde le menu accessibilité de mon navigateur, on me dit :
(En savoir plus).
Je rajoute donc tabindex="0" et on me dit :
(En savoir plus).

Je ne comprend pas pourquoi il y a toujours un avertissement.
Quel est le problème ? Comment le corriger ?

Merci beaucoup !

Désolé, voici le code : https://jsfiddle.net/exercices/xuaqfvdc/.

Bonjour,

Si tu ajoutes un action au click, et que tu rends l'élément focusable via le clavier avec un tabindex="0", c'est bien. Mais il faut aussi que l'utilisateur puisse faire la même chose que l'action du clic via le clavier. C'est à dire qu'il faut que ton javascript prévoit une action lors d'un évènement "keydown" ou "keyup" par exemple en plus de l'évènement "click" (sinon, l'utilisateur pourra bien donner le focus à l'élément via le clavier, mais il ne pourra rien en faire ensuite avec le clavier seul => c'est probablement pour ça que ton navigateur râle).

Note : la fonction de diagnostic des navigateurs concernant la navigation clavier n'est pas toujours parfaite. Des fois ils disent rien alors qu'ils auraient dû, et des fois ils disent quelque chose alors qu'ils devraient pas.

Amicalement,

Bonjour,

Il faut dans ton javascript détecter quelle touche c'est. En général, on ne fait pas une action se déclenchant pour "toutes" les touches, mais seulement pour "certaines" touches ou "certaines combinaisons" de touches. Et il faut éviter ce qui sert par ailleurs au navigateur (comme la touche "tab" qui sert à naviguer). Sinon, évidemment, ton action va se déclencher même quand tu ne veux pas qu'elle se déclenche.

EDIT: Je vois que tu utilises jquery. Pour la touche "entrée", tu peux ajouter au code jsfidle que tu as donné plus haut :

$('.more').keypress(function(ev) {
  if (ev.which == 13) {
    window.open($(this).attr("data-url"))
  }
});

Amicalement,
Modifié par parsimonhi (23 Nov 2020 - 16:23)