accesskey属性
accesskey属性はポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の使えない環境でもリンクや入力フォームの部品をキーボードのキー操作で動作を実行できるようアクセスキーを設定します。accesskey属性の値にはアクセスキーとなる半角英数字1文字を指定します。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 必須
- -
- 非推奨
- -
- 属性値
- 半角英数字1文字
OS/UA毎のアクセスキー実行方法
アクセスキーの実行方法は、ユーザーのパソコンのプラットフォーム(OS)やInternet Explorer, Firefox, Safari, Chrome, Operaなどの各UAによっても異なります。特にInetrnet Explorerにおいては動作の仕方まで異なり、アクセスキーを実行すると指定したリンクが選択状態（フォーカス）になり、さらにEnter を押すと指定のリンク先にジャンプします。
- Win IE 6/7/8/9
- Alt+アクセスキー+Enter
- Win Firefox 3+
- Alt+Shift+アクセスキー
- Win Opera 10+
- Shift+Esc+アクセスキー
- Win Safari 5+
- Alt+アクセスキー
- Win Chrome
- Alt+アクセスキー
- Mac Safari 5+
- Control+Alt+アクセスキー
- Mac Firefox 3+
- Control+アクセスキー
- Mac Opera 10+
- Shift+Esc+アクセスキー
- Mac Chrome
- Control+Alt+アクセスキー
なお、PCにおける閲覧環境を中心に取り上げましたが携帯電話端末のUAであればアクセスキーはボタンを押すだけで実行できるので、アクセスキーを上手に設定することでユーザは 0-9 までの数字キー, アスタリスク（*）, ハッシュ（#）を押すだけでページ内の指定のリンク先へ容易にジャンプすることが可能です。
アクセスキー設定のポイント
アクセスキーを設定する際は、ページ内で同じアクセスキーが重複したり、各UAが実装しているショートカットキーと競合しないように配慮して指定する必要があります。まず、Windowsの各種UAとの競合を避けるためにA, B, D, E, F, G, H, J, L, M, O, P, R, T, Vあたりのキーの使用は避けた方が無難です。
通常、ポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)の使えない環境でもリンクはTabで移動してEnterを押すことで指定のリンク先にジャンプできるので、ページ内にある全部のリンクにアクセスキーを設定する必要はありません。サイト内の全ページに共通するナビゲーションなどユーザを誘導するにあたって重要な部分に設定しているだけで十分なので、アクセスキーを有効に使いたい場合は残ったキーで工夫してみると良いでしょう。
特定の環境においてキーが競合してしまうことを除外すれば、アクセスキーとリンク先は、できるだけ関係性のあるキー配列にすることで、より使いやすくなります。たとえば、当該文書から前後関係の文書へ移動するナビゲーションがある場合、ひとつ次の文書へのリンクには Next という意味を込めて N をアクセスキーに、ひとつ前の文書のリンクには Previous という意味を込めて P をアクセスキーに設定するなどの使い方が考えられます。
また、アクセスキーを設定した際は、ユーザへの配慮としてアクセスキーを設定していること（リンク横にキーを付記するなど）、アクセスキーの実行方法をページの隅に付記しておくか、別にヘルプページを用意するなどユーザーが利用しやすいように工夫しておくとより有用ではないでしょうか。
accesskey属性を指定できる要素型
accesskey属性のサンプル
<ul>
<li>前の文書は、<a href="common" accesskey="P" rel="prev">共通属性の一覧</a><kbd>P</kbd>です。</li>
<li>次の文書は、<a href="class" accesskey="N" rel="next">class属性</a><kbd>N</kbd>です。</li>
</ul>サンプルのように accesskey属性はユーザーがキーボードから入力するテキストを示す kbd要素と組み合わせてアクセスキーを示すのに使うと良いでしょう。さらに kbd要素を CSS で如何にもキーボードのキーらしく装飾（例：kbd { padding:.1em .3em; border:1px outset gray; margin:0 .3em; }）を施すと視覚的認知により効果的です。