accesskey属性
Updated / Published
accesskey
属性はポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)が操作できない環境でもリンクや入力フォームの部品をキーボードのキー操作で実行または選択状態(フォーカス)にできるようアクセスキーを設定します。accesskey
属性の値にはアクセスキーとなる半角英数字1文字を指定します。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 必須
- -
- 非推奨
- -
- 属性値
- 半角英数字1文字
OS/UA毎のアクセスキー実行方法
アクセスキーの実行方法は、ユーザ環境(OSやUA)によって異なります。たとえば、Inetrnet Explorerにおいては動作の振る舞い方も異なり、リンクに対するアクセスキーを実行すると指定したリンクが選択状態(フォーカス)となり、さらにEnter を押すと指定のリンク先にジャンプします。
Windows
- IE 6-11
- Alt(IE7のみ +Shift)+アクセスキー(リンクの場合は +Enter)
- Firefox 2+
- Alt+Shift+アクセスキー
- Opera 9-12
- Shift+Esc+アクセスキー
- Opera 15+
- Alt+アクセスキー
- Chrome 1+
- Alt+アクセスキー
- Safari 3+
- Alt+アクセスキー
Mac
- Firefox 2-13
- Control+アクセスキー
- Firefox 14+
- Control+Alt+アクセスキー
- Opera 9-12
- Shift+Esc+アクセスキー
- Opera 15+
- Control+Alt+アクセスキー
- Chrome 1+
- Control+Alt+アクセスキー
- Safari 4+
- Control+Alt+アクセスキー
なお、フィーチャー・フォンの携帯電話端末のUAであればアクセスキーはボタンを押すだけで実行できるので、アクセスキーを上手に設定することでユーザは 0-9
までの数字キー, アスタリスク(*
), ハッシュ(#
)を押してページ内の指定のリンク先へ容易にジャンプすることができる非常に有能な機能として働きます。
アクセスキー設定のポイント
アクセスキーを設定する際は、ページ内で同じアクセスキーが重複したり、各UAが実装しているショートカットキーと競合しないように配慮して指定する必要があります。まず、Windowsの各種UAとの競合を避けるためにA, B, D, E, F, G, H, J, L, M, O, P, R, T, Vあたりのキーの使用は避けた方が無難です。
そして、アクセスキーとリンク先は、ひとつ次の文書へのリンクには Next という意味を込めて N を、ひとつ前の文書のリンクには Previous という意味を込めて P をアクセスキーに割り当てるなど、アクセスキーとリンク先は、できるだけ関係性のあるキー配列にすることで、その有効性を発揮しますが、特定の環境でキーの競合を招く恐れが多々あること、また現在のOS、UAによって実装方法がバラバラであることからも、実態としては活用するのが困難な状況にあります。ポインティングデバイスが操作できない環境において、アクセスキーが設定されていなくとも、ユーザはTabとEnterでリンクやフォームのコントロールの実行や選択が可能です。
そのためアクセスキーはフィーチャー・フォンの携帯電話端末用のサイトを作るときだけ指定するなど、割り切って使用するようにした方が効率的かつ実用的です。
accesskey属性を指定できる要素型
accesskey属性のサンプル
<ul>
<li>前の文書は、<a href="wbr" accesskey="P" rel="prev">wbr要素</a><kbd>P</kbd>です。</li>
<li>次の文書は、<a href="class" accesskey="N" rel="next">class属性</a><kbd>N</kbd>です。</li>
</ul>
サンプルのように accesskey
属性はユーザがキーボードから入力するテキストを示す kbd要素と組み合わせてアクセスキーを示すのに使うと良いでしょう。さらに kbd
要素を CSS で如何にもキーボードのキーらしく装飾を施すと視覚的認知により効果的です。
HTML5におけるaccesskey属性
HTML 5では、複数のアクセスキーを候補に割り当てることが可能になりました。しかしながら、2013年現在で複数指定されたアクセスキーに対応するUAはまだありません。