CODEWITHSUNDEEP
javascripthtmlcssfirefox
Chris Noe
Chris Noe

Reputation: 37181

How can I define an accesskey for an invisible HTML element

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:

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

Upvotes: 1

Views: 1978

Answers (4)

Sal
Sal

Reputation: 211

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.

Upvotes: 3

gdesjardins
gdesjardins

Reputation:

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

Upvotes: 0

Catalin Z. Alexandru
Catalin Z. Alexandru

Reputation: 11

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

Upvotes: 1

Prestaul
Prestaul

Reputation: 85184

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.

Upvotes: 6

Related Questions