Come posso definire una chiave di accesso per un elemento HTML invisibile

Question

Ho un <button> con una chiave di accesso assegnata ad esso. La chiave di accesso funziona bene finché il pulsante è visibile, ma quando imposto display: none o visibility: hidden, la chiave di accesso non funziona più.

Anche provato senza successo:

• Utilizza un tipo di elemento diverso: a, input (vari tipi, anche senza tipo).
• Assegna la chiave di accesso a un'etichetta che avvolge il controllo invisibile.

Nota, non sono sicuro che si tratti del comportamento standard, ma prima di Firefox 3 la chiave di accesso sembrava funzionare indipendentemente dalla visibilità.

Answer 1

Il comportamento che stai vedendo è corretto, non puoi " accedere a " un elemento che non viene visualizzato. Il suggerimento di Sal funzionerà quasi sicuramente, ma posso chiederti qual è il tuo scopo nel fare questo? C'è probabilmente un modo migliore per realizzare ciò che stai cercando di ottenere. Hai mai pensato di utilizzare un gestore di pressione dei tasti?

Penso che probabilmente vorrai seguire gli altri suggerimenti se non vuoi un gestore di tasti. Prova posizione: assoluto; a sinistra: -9999px; per estrarre i tuoi contenuti dalla pagina. Oppure usa la posizione assoluta, modifica l'opacità su zero e l'indice z su -1. Utilizzando la posizione assoluta l'elemento non influirà sul posizionamento di altri contenuti sulla pagina, l'impostazione dell'opacità non lo renderà visibile. Anche con l'opacità impostata su zero, è comunque possibile fare clic sull'elemento e sebbene non sia visibile, potrebbe impedirti di fare clic su altri elementi della pagina, quindi utilizza un indice z negativo per trascinarlo dietro altri contenuti.

Answer 2

Puoi applicare un margine negativo per spingere l'elemento al di fuori della pagina visibile. Penso che molti browser e lettori di testo ignorino gli elementi con display:none e possibilmente anche visibility:hidden.

Answer 3

Soluzione più semplice: height: 0px; margin: 0px; padding: 0px; nel tuo CSS.

Answer 4

Invece di attributi di visibilità o visualizzazione, posizionare il pulsante fuori dalla pagina

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

Avvertenza: l'uso di left invece di top provoca uno strano bug di visualizzazione in ie7