accesskey 属性

7.5 キーボード・ショートカットの割り当て

7.5.1 はじめに

このセクションは非規定です。

アクティベートまたはフォーカスできる要素には、accesskey 属性を使えば、その要素をアクティブにするためのキーの組み合わせひとつを、それぞれに割り当てることができます。

正確なショートカットは、ユーザーのキーボードに関する情報や、そのプラットフォームにはどんなショートカットがすでに存在しているのか、他にどんなショートカットがそのページに指定されているのか、に基づいて、accesskey 属性に提供された情報を使って、ユーザーエージェントによって決められます。

関連のキーボード・ショートカットが多様な入力デバイスで確実に利用できるようにするために、ウェブ制作者は accesskey 属性に複数の選択肢を提供することができます。

それぞれの選択肢は、英数字といったひとつの文字から構成されます。

ユーザーエージェントは、キーボード・ショートカットのリストをユーザーに提供することができます。しかし、ウェブ制作者もそうすることが推奨されます。accessKeyLabel IDL 属性は、ユーザーエージェントによって割り当てられた実際のキーの組み合わせを表す文字を返します。

この例では、ウェブ制作者は、ショートカットキーを使って呼び出すことができるボタンを用意しました。フルキーボードをサポートするために、ウェブ制作者は "C" を利用可能なキーとして用意しました。ウェブ制作者は、テンキーしかないデバイスをサポートするために "1" も利用可能なキーとして用意しました。

<input type=button value=Collect onclick="collect()"
       accesskey="C 1" id=c>

ユーザーにどんなショートカットキーが使えるのかを伝えるために、ウェブ制作者は、このスクリプトを使って、キーの組み合わせをボタンのラベルに明示的に追加しています:

function addShortcutKeyLabel(button) {
  if (button.accessKeyLabel != '')
    button.value += ' (' + button.accessKeyLabel + ')';
}
addShortcutKeyLabel(document.getElementById('c'));

違うプラットフォームのブラウザーは、同じキーの組み合わせに対してすら、そのプラットフォームで使われている慣例に基づいて、違うラベルを表示するでしょう。たとえば、キーの組み合わせが Control キーと Shift キーと文字 C の場合、Windows のブラウザーなら "Ctrl+Shift+C" と表示するでしょうし、Mac のブラウザーなら "^⇧C" と表示するでしょうし、Emacs ブラウザーなら "C-C" としか表示しないでしょう。同様に、キーの組み合わせが Alt キーと Escape キーの場合、Windows なら "Alt+Esc" を使うでしょうし、Mac なら "⌥⎋" を使うでしょうし、Emacs ブラウザーなら "M-ESC" または "ESC ESC" を使うでしょう。

ゆえに、一般的に、accessKeyLabel IDL 属性から返される値をパースしようとするのは賢明ではありません。

7.5.2 accesskey 属性

すべての HTML 要素には、accesskey コンテンツ属性をセットすることができます。accesskey 属性の値は、ユーザーエージェントがその要素をアクティベートまたはフォーカスするキーボード・ショートカットを作るための参考として使われます。

指定されたら、その値は、大文字・小文字を区別して順序付きスペース区切り固有トークンセットでなければいけません。 それぞれの値は、Unicode のコード・ポイント長ひとつ分でなければいけません。

次の例では、そのサイトに慣れ親しんだキーボード・ユーザーが関連のページへもっと素早くリンクをたどることができるよう、いろいろなリンクにアクセスキーが与えられています:

<nav>
 <p>
  <a title="コンソーシアムの活動" accesskey="A" href="/Consortium/activities">活動</a> |
  <a title="技術報告書と勧告" accesskey="T" href="/TR/">技術報告書</a> |
  <a title="アルファベット順のサイトの索引" accesskey="S" href="/Consortium/siteindex">サイトの索引</a> |
  <a title="このサイトについて" accesskey="B" href="/Consortium/">コンソーシアムについて</a> |
  <a title="コンソーシアムに連絡" accesskey="C" href="/Consortium/contact">連絡</a>
 </p>
</nav>

次の例では、検索フィールドに 2 つのアクセスキー "s" と "0" がこの順番で与えられています。フルキーボード装備のデバイスであれば、ユーザーエージェントは Ctrl+Alt+S をショートカット・キーとして採用するでしょう。一方、テンキーしか装備していない小さなデバイスなら、ユーザーエージェントは 0 だけを採用するでしょう:

<form action="/search">
 <label>検索: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

次の例では、ボタンにアクセスキーが記述されています。そして、ユーザーエージェントが選択したキーの組み合わせを知らせるために、スクリプトを使って、そのボタンのラベルをアップデートしようとしています。

<input type=submit accesskey="N @ 1" value="Compose">
...
<script>
 function labelButton(button) {
   if (button.accessKeyLabel)
     button.value += ' (' + button.accessKeyLabel + ')';
 }
 var inputs = document.getElementsByTagName('input');
 for (var i = 0; i < inputs.length; i += 1) {
   if (inputs[i].type == "submit")
     labelButton(inputs[i]);
 }
</script>

あるユーザーエージェントでは、ボタンのラベルは "Compose (⌘N)" となるかもしれません。別のユーザーエージェントでは、"Compose (Alt+⇧+1)" となるかもしれません。ユーザーエージェントがキーを割り当てることができないなら、"Compose" だけとなるでしょう。正確な文字列は、割り当てアクセスキーが何かに依存します。そして、ユーザーエージェントがキーの組み合わせをどうやって表すかにも依存します。

7.5.3 処理モデル

要素の割り当てアクセスキーは、その要素の accesskey コンテント属性から引き出されたキーの組み合わせです。期段階では要素は割り当てアクセスキーを持ちません。

要素に accesskey 属性がセット、変更、削除されるときは必ず、ユーザーエージェントは、次の手順を実行して、その要素の割り当てアクセスキーを更新しなければいけません:

  1. 要素に accesskey 属性がなければ、下記のフォールバック手順にスキップします。

  2. 上記に該当しなければ、属性値をスペースで分割し、keys を、その結果として得られたトークンとします。

  3. keys の値それぞれに対して順次、トークンが属性の値に現れた順番で、次の副手順を実行します:

    1. 値が Unicode コード・ポイント長ひとつ分でないなら、この値に対するこれらの残りの手順をスキップします。

    2. 値がシステムのキーボード上のキーに対応しないなら、この値に対するこれらの残りの手順をスキップします。

    3. ユーザーエージェントが、その属性に指定された値に対応するキーを結合して、アクセスキーとして使うことができる 0 個以上の修飾キーの組み合わせを見つけることができたなら、ユーザーエージェントは、そのキーの組み合わせを、その要素の割り当てアクセスキーとして割り当てることができます。これらの手順を中止します。

  4. フォールバック: オプションで、ユーザーエージェントは、ユーザーエージェントが自身で選択したキーの組み合わせを、その要素の割り当てアクセスキーに割り当てることができます。そのときは、これらの手順を中止します。

  5. この手順に到達したら、その要素は割り当てアクセスキーを持たないことになります。

ユーザーエージェントが要素に対してアクセス・キーを選択し割り当てたら、ユーザーエージェントは、accesskey 属性が変更されたり、該当の要素が別の Document に移動されない限り、その要素の割り当てアクセスキーを変更するべきではありません。

ユーザーエージェントは、accesskey 属性を持つ要素を別の方法でも見せることができます。例えば、特定のキーの組み合わせの応答で表示するメニューの中で見せる、などです。


accessKey IDL 属性は、accesskey コンテント属性を反映しなければいけません。

accessKeyLabel IDL 属性は、要素に割り当てアクセスキーがあれば、それを表す文字列を返さなければいけません。その要素にそれがなければ、この IDL 属性は空文字列を返さなければいけません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#assigning-keyboard-shortcuts