リンク以外にもショートカットキーを付ける
リンク以外の要素にショートカットキーを付ける場合も記述方法は一緒で、
accesskey="*"
という属性を加えるだけです。（「*」の部分に、ショートカットキーとして使いたいキーを半角英数字で記述します。）
テキスト入力欄に指定してみる
例えば、テキスト入力フォームにショートカットキーを付けるには次のようにします。
1行のテキスト入力フォームは下記のHTMLソースで作成できますね。（実際に入力フォームを使うには、もっと属性が必要になることが多いですが、ここでは省略しています。）
<input type="text">
これに、accesskey属性を加えます。
<input type="text" accesskey="k">
これで、[K]キーを使ったショートカットキーでこの入力フォームに移動するようになります。
キー名も表示させましょう
何も注釈がないと、閲覧者は「どのキーを押せば良いのか？」が分かりません。（そもそも、ショートカットキーで操作できるという事実に気付かないでしょう。）
ですから、入力欄の横にショートカットキー名を表示させておくのがお勧めです。
次のように、一般的なソフトウェアと同じような感じで記述しておくと分かりやすいでしょう。
お名前(N)： <input type="text" accesskey="n">
これを表示すると次のようになります。
これで、閲覧者にも、[Alt]＋[N]などのショートカットキーでこの入力フォームにフォーカスを移動できることが分かるでしょう。
その他のフォーム構成要素にも指定可能
ボタンにショートカットキーを付ける場合も同様に、accesskey属性を加えるだけです。
<input type="button" value="ボタン(B)" accesskey="b">
これを表示すると次のようになります。
これで、[Alt]＋[B]キーなどのショートカットキーで、このボタンをクリックしたことになります。
チェックボックスやラジオボタンでも同様です。
<input type="checkbox" accesskey="c" name="cb">チェックボックス(C)<br> <input type="radio" accesskey="r" name="sr">ラジオボタン(R)<br> <input type="radio" accesskey="a" name="sr">ラジオボタン(A)<br>
これを表示すると次のようになります。
フォーカスを移動できる要素なら、たいてい accesskey 属性を付加できます。（フォーカスが移動できるかどうかは、[Tab]キーを押して、フォーカスの移動を実際に見てみればすぐに分かります。）
終わりに
今回は、ホームページ内のリンクやフォームにもショートカットキーを割り振る方法をご紹介致しました。 ぜひ、みなさんのホームページでも使ってみて下さい。
【関連記事】
