Comment définir un accesskey pour un élément HTML invisible

Question

J'ai un <button> associé à une clé d'accès. La clé d'accès fonctionne correctement tant que le bouton est visible, mais lorsque je règle display: none ou visibility: hidden, la clé d'accès ne fonctionne plus.

Également essayé sans succès:

• Utilisez un type d'élément différent: a, input (différents types, même sans type).
• Attribuez la clé d'accès à une étiquette qui enveloppe le contrôle invisible.

Remarque, je ne suis pas sûr qu'il s'agisse du comportement standard, mais avant Firefox 3, la clé d'accès semblait fonctionner quelle que soit la visibilité.

Answer 1

Le comportement que vous observez est correct, vous ne pouvez pas & "accéder &"; un élément qui n'est pas affiché. La suggestion de Sal fonctionnera presque certainement, mais puis-je vous demander quel est votre but? Il y a probablement une meilleure façon d'accomplir ce que vous essayez d'accomplir. Avez-vous envisagé d'utiliser un gestionnaire de frappe?

Je pense que vous voudrez probablement suivre les autres suggestions si vous ne voulez pas de gestionnaire de frappe. Essayez la position: absolue; à gauche: -9999px; pour extraire votre contenu de la page. Ou utilisez position absolue, réglez l'opacité sur zéro et z-index sur -1. En utilisant position absolue, l'élément n'affectera pas le positionnement d'un autre contenu sur la page, le réglage de l'opacité le rendra invisible. Même si l'opacité est définie sur zéro, vous pouvez toujours cliquer sur l'élément. Bien que vous ne puissiez pas le voir, il vous empêchera de cliquer sur d'autres éléments de la page. Utilisez donc un index z négatif pour le tirer derrière un autre contenu.

Answer 2

Vous pouvez appliquer une marge négative pour pousser l'élément en dehors de la page visible. Je pense que de nombreux navigateurs et lecteurs de texte ignorent les éléments avec display:none et éventuellement aussi visibility:hidden.

Answer 3

La solution la plus simple: height: 0px; margin: 0px; padding: 0px; dans votre CSS.

Answer 4

Au lieu d'attributs de visibilité ou d'affichage, positionnez le bouton en dehors de la page

<button accesskey="a" style="position: absolute; top: -9999px">button</button>

Attention: utiliser left au lieu de top provoque un bug d'affichage étrange dans ie7