How can I define an accesskey for an invisible HTML element

Question

I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.

Also tried without success:

• Use a different element type: a, input (various types, even typeless).
• Assign the accesskey to a label that wraps the invisible control.

Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.

Answer 1

The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?

I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.

Answer 2

You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.

Answer 3

Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.

Answer 4

Instead of visibility or display attributes, position the button outside of the page

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

Warning: using left instead of top causes a weird display bug in ie7