jQuery AccessKey Demo

Hold down the Alt key to see the AccessKeys; press Alt+key, or Alt+Shift+key to use it. Hover over a label or button to see its AccessKey highighted. Links and buttons perform their onClick action when the AccessKey is used; non-action elements usually just get focus. AccessKeys in the web page take precedence over accelerators in the browser menu. Tap and release the Alt key (or F10) to focus the browser menu, making the browser's accelerator keys active.

Appearance is controlled by the style sheet, using the "access" class. In this demo the AccessKey values are highlighted on mouseover, but this is optional. Button elements can be styled to emphasize their AccessKey, but input[type=button] and input[type=submit] cannot. For that situation, the demo uses labels that display only when the Alt key is active. I don't know how these labels affect screen readers or other assistive technologies.

Picking mnemonic AccessKeys becomes a challenge with many elements on the page. It may be adequate to assign an AccessKey to the first element in a form and to the submit button. That allows the user to get to the start of the form, use the tab key to move to subsequent fields, and submit the form as soon as the required fields have been filled.

Get me out of here!

Shirt Size: