accesskey属性

Updated / Published

accesskey属性はポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)が操作できない環境でもリンクや入力フォームの部品をキーボードのキー操作で実行または選択状態(フォーカス)にできるようアクセスキーを設定します。accesskey属性の値にはアクセスキーとなる半角英数字1文字を指定します。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
半角英数字1文字

OS/UA毎のアクセスキー実行方法

アクセスキーの実行方法は、ユーザ環境(OSUA)によって異なります。たとえば、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によって実装方法がバラバラであることからも、実態としては活用するのが困難な状況にあります。ポインティングデバイスが操作できない環境において、アクセスキーが設定されていなくとも、ユーザはTabEnterでリンクやフォームのコントロールの実行や選択が可能です。

そのためアクセスキーはフィーチャー・フォンの携帯電話端末用のサイトを作るときだけ指定するなど、割り切って使用するようにした方が効率的かつ実用的です。

accesskey属性を指定できる要素型

A
B
I
L
T

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はまだありません。