ショートカットキーを加える
それでは、ショートカットキーを割り当てる方法をご紹介致します。
方法はとても簡単で、以下のような記述を加えるだけです。
accesskey="k"
上記の記述は、「K」キーを用いたショートカットキーを加える、という意味になります。これによって、[Alt]+[K]などのようなショートカットキーが利用できるようになります。
※[Alt]キーと組み合わせるとは限りません。何のキーと組み合わせるかは、OSやブラウザによって異なりますので注意して下さい。(後述)
■記述例:
例えば、リンクにショートカットキーを加える場合は、以下のように記述します。
<a href="hoge.htm" accesskey="k">サンプルリンク</a>
このように記述すると、上記のリンクは、キーボードの「K」を使ったショートカットキーでもアクセスできるようになります。
2キーの組み合わせで使用
「K」などの1つのキーがショートカットキーになるわけではありません。もう1つのキーと組み合わせてショートカットキーになります。
- Windowsの場合なら、[Alt]+[K]キー
- Macintoshの場合なら、[command]+[K]キー
上記の例はともに Internet Explorer または Netscape Navigator を用いた場合です。 それ以外のブラウザでは、キーが異なる場合があります。
(例えば、Windows版Firefoxだと、[Alt]+[Shift]+[指定キー]という3つのキーを組み合わせる必要があります。)
※指定できるのは英数キー名の方だけで、[Alt]キーや[command]キーの方を指定することはできません。 ですから、[Ctrl]+[S]や、[Alt]+[Shift]+[S]などのショートカットキーにはできません。
サンプル
下記のソースは、ショートカットキー機能付きリンクのサンプルです。
<a href="hoge.htm" accesskey="m">NHK無料提供の映像素材集(M)</a> <a href="hoge.htm" accesskey="d">円グラフを簡単に表示させる(D)</a> <a href="hoge.htm" accesskey="h">HTML基礎(H)</a>
これらのコードは、次のように表示されます。(実際に機能しますので、試してみて下さい。)
NHK無料提供の映像素材集(M)
円グラフを表示する方法(D)
両端揃えで表示する方法(H)
Windows版Internet Explorerの場合、[Alt]+[M]で「映像素材集」リンクが、 [Alt]+[D]で「円グラフ」リンクが、 [Alt]+[H]で「両端揃え」リンクが選択されます。
■ブラウザごとの挙動の違い:
Windows版Internet Explorerの場合は、リンクにフォーカスが移動します。 リンク先へ移動するには、その後[Enter]キーを押す必要があります。
Netscape Navigatorの場合は、リンクをクリックしたのと同じ状態になり、キーを押すと同時にリンク先へ移動します。
なお、リンク以外の要素にもショートカットキーを付けることができます。 次にその方法をご紹介致します。