アクセスキーは、マウスの使えない環境でも、リンクにジャンプする、ボタンを押す、入力フォームにフォーカスを移すなどの操作を簡単に行うことができるように考慮されたものです。Windows の「ファイル(F)」メニューについている、F と同じような働きをします。
HTML4.01 ではアクセスキーには 1文字のみ指定可能と定義されています。HTML5 ではスペース文字で区切って複数の文字を指定可能となりましたが、HTML5.1 で再度 1文字のみ指定可能な仕様に戻されました。
OS やブラウザによって、アクセスキーの操作が異なります。
OS | ブラウザ | 説明 |
---|---|---|
Windows | Internet Explorer | [Alt]+[アクセスキー] |
Chrome | [Alt]+[アクセスキー] | |
Firefox | [Alt]+[Shift]+[アクセスキー] | |
Safari | [Alt]+[アクセスキー] | |
Opera | [Alt]+[アクセスキー] ※ 古いOperaでは [Shift]+[Esc]+[アクセスキー] | |
Mac | Chrome | [Control]+[Alt]+[アクセスキー] |
Firefox | [Control]+[Alt]+[アクセスキー] ※ Firefox 13までは [Control]+[アクセスキー] | |
Safari | [Control]+[Alt]+[アクセスキー] | |
Opera | [Control]+[Alt]+[アクセスキー] ※ 古いOperaでは [Shift]+[Esc]+[アクセスキー] | |
i-mode | i-mode | [数字キー] |
ラベルを持つ入力コントロールの場合は、<label> で指定したラベルに accesskey を指定するのが作法のようです。下記の「使用例」を参照してください。
<form action="#"> <div> <a href="accesskey.htm" accesskey="j">ジャンプ(<u>J</u>)</a> </div> <div> <label for="t1" accesskey="b">ブラウザ名(<u>B</u>):</label> <input type="text" id="t1" name="BROWSER"> </div> <div> <input type="radio" id="r1" name="YESNO" value="YES" checked> <label for="r1" accesskey="y">はい(<u>Y</u>)</label> <input type="radio" id="r2" name="YESNO" value="NO"> <label for="r2" accesskey="n">いいえ(<u>N</u>)</label> </div> <div> <input type="checkbox" id="c1" name="Win"> <label for="c1" accesskey="w">Windows(<u>W</u>)</label> <input type="checkbox" id="c2" name="Mac"> <label for="c2" accesskey="m">Macintosh(<u>M</u>)</label> </div> </form>
Alt キー(Mac の場合は Ctrl キー)を押しながら、J、B などのキーを押してみてください。
Internet Explorer 5.0 では、フォーム部品に限らず、<b> や <h1> など、ほとんどのタグに accesskey を指定できるようになりました。この場合、tabindex 属性と共に使用します。
<h1 tabindex=1 accesskey="h" onfocus="alert('HELLO')">ようこそ</h1>
何故か HTML4.01 では、<select> に対して accesskey が定義されていません。これに従って、Netscape 6 でも <select> に accesskey を指定することができません。ちょっと変ですね。