【HTML Living Standard】accesskey属性の使い方
accesskey属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
accesskeyプロパティは、HTML要素にキーボードショートカットを割り当てるためのプロパティです。このプロパティは、すべてのHTML要素に対して指定できる「グローバル属性」の一つであり、ユーザーがキーボード操作のみでウェブページ上の特定の要素に素早くアクセスできるようにすることを目的としています。
具体的には、accesskeyプロパティにアルファベットや数字などのキーを割り当てると、そのキーとブラウザやオペレーティングシステムで定められた修飾キー（例えば、WindowsではAltキー、macOSではCtrl+Optionキーなど）を同時に押すことで、対象のHTML要素がアクティブになります。これにより、ユーザーはマウスを使わずに、リンクをクリックしたり、フォームの入力フィールドにフォーカスを移動させたり、ボタンを実行したりすることが可能になります。
この機能は、特にキーボード操作を好むユーザーや、身体的な制約によりマウス操作が難しいユーザーにとって、ウェブサイトのアクセシビリティを大幅に向上させます。ウェブアプリケーション全体の操作性を改善し、より多くの人々が快適に利用できるページを提供するために非常に有効です。ただし、システムやブラウザの既存のショートカットキーと重複しないように、慎重にキーを選ぶ必要があります。また、修飾キーの組み合わせはユーザーの環境によって異なるため、すべてのユーザーに共通の操作方法として案内する際には注意が必要です。accesskeyプロパティを適切に活用することで、ユーザー体験の向上に貢献できます。
構文(syntax)
1<button accesskey="s">送信</button>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML accesskey属性でショートカットを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML accesskey属性のサンプル</title> 7 <!-- 8 accesskey属性は、ユーザーがキーボードショートカットを使って特定の要素に直接アクセスできるようにします。 9 この例では、ボタン、入力フィールド、リンクにショートカットを設定しています。 10 --> 11</head> 12<body> 13 <h1>accesskey属性の使用例</h1> 14 15 <p>以下の要素は、対応するキーボードショートカットでアクセスできます。</p> 16 17 <!-- 's' キーをショートカットとして持つボタン --> 18 <button accesskey="s" onclick="alert('送信ボタンがクリックされました！')">Submit (ショートカット: Alt + s)</button> 19 <br><br> 20 21 <!-- 'u' キーをショートカットとして持つテキスト入力フィールド --> 22 <label for="username">ユーザー名:</label> 23 <input type="text" id="username" accesskey="u" placeholder="ユーザー名を入力 (ショートカット: Alt + u)"> 24 <br><br> 25 26 <!-- 'h' キーをショートカットとして持つリンク --> 27 <a href="https://www.example.com" accesskey="h">Home (ショートカット: Alt + h)</a> 28 29 <p style="margin-top: 20px;"> 30 <b>ヒント:</b> WindowsのChromeでは「Alt + accesskey」で要素にフォーカスが当たります。<br> 31 他のブラウザやOSでは、異なる修飾キー（例: Ctrl + Alt + accesskey）が使われることがあります。 32 </p> 33</body> 34</html>
HTMLのaccesskey属性は、ウェブページの特定の要素にキーボードショートカットを設定するためのグローバル属性です。これにより、ユーザーはマウスを使わずに、指定したキーの組み合わせで要素に直接アクセスできるようになります。この属性は、主にウェブページのアクセシビリティ（利用しやすさ）を向上させるために利用されます。
サンプルコードでは、accesskey属性をボタン、入力フィールド、リンクに適用しています。例えば、accesskey="s"が設定された「Submit」ボタンは、WindowsのChromeであれば「Alt + s」キーを押すことで、そのボタンにフォーカスを移動させ、さらにEnterキーでクリック動作を行えます。同様に、accesskey="u"の入力フィールドや、accesskey="h"のリンクも、対応するショートカットキーで素早く操作可能です。
ただし、ショートカットキーとして使用される修飾キー（Alt、Ctrlなど）の組み合わせは、使用するブラウザやOSによって異なる場合があります。これは、ブラウザやOSがそれぞれ独自のキーボードショートカットを定義しているためです。
accesskey属性は、特定の文字を値として設定しますが、プログラミング言語における関数のように引数を取ったり、何らかの値を戻り値として返したりするものではありません。単に、その要素に対するキーボードショートカットを指定する設定項目として機能します。
accesskey属性は、キーボードショートカットで要素に素早くアクセスさせるためのものです。キーはシングルキャラクターで指定します。環境によって修飾キーが異なるため、ショートカットキーは画面上で必ず明示しましょう。既存のブラウザやOSのショートカットと競合しないよう、一般的なキーは避け慎重に選んでください。重要な機能や頻繁に使う要素に限定して利用し、乱用するとユーザーを混乱させる可能性があるため注意が必要です。
HTML accesskey属性でキーボードショートカットを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>accesskey 属性のサンプル</title> 7 <style> 8 /* accesskeyが設定されている要素を視覚的に分かりやすくするスタイル */ 9 a[accesskey], button[accesskey] { 10 border: 1px solid #007bff; 11 padding: 8px 12px; 12 margin: 5px; 13 display: inline-block; 14 text-decoration: none; 15 color: #007bff; 16 background-color: #e9f5ff; 17 border-radius: 4px; 18 font-family: sans-serif; 19 font-size: 16px; 20 cursor: pointer; 21 transition: background-color 0.2s, color 0.2s; 22 } 23 24 a[accesskey]:hover, button[accesskey]:hover { 25 background-color: #007bff; 26 color: white; 27 } 28 29 button[accesskey] { 30 color: #333; 31 background-color: #f0f0f0; 32 border-color: #ccc; 33 } 34 35 button[accesskey]:hover { 36 background-color: #007bff; 37 color: white; 38 border-color: #007bff; 39 } 40 41 kbd { 42 display: inline-block; 43 padding: 2px 4px; 44 font-family: monospace; 45 font-size: 0.9em; 46 color: #333; 47 background-color: #f5f5f5; 48 border: 1px solid #ccc; 49 border-radius: 3px; 50 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset; 51 } 52 </style> 53</head> 54<body> 55 <h1>HTMLの<code>accesskey</code>属性の使用例</h1> 56 57 <p> 58 <code>accesskey</code>属性は、キーボードショートカットをHTML要素に割り当てるためのグローバル属性です。<br> 59 これにより、ユーザーはマウスを使わずに特定の要素に直接アクセスできるようになります。 60 </p> 61 62 <p> 63 <strong>ショートカットキーの使用方法:</strong><br> 64 ショートカットキーの組み合わせは、お使いのブラウザやOSによって異なります。<br> 65 一般的には、以下の修飾キーと<code>accesskey</code>で指定した文字を同時に押します。<br> 66 <br> 67 Windows: <kbd>Alt</kbd> + <kbd>accesskey</kbd><br> 68 macOS (Chrome/Firefox): <kbd>Ctrl</kbd> + <kbd>Option</kbd> + <kbd>accesskey</kbd><br> 69 macOS (Safari): <kbd>Ctrl</kbd> + <kbd>accesskey</kbd><br> 70 Linux: <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>accesskey</kbd> または <kbd>Alt</kbd> + <kbd>accesskey</kbd> 71 </p> 72 73 <h2>デモンストレーション</h2> 74 <p> 75 以下の要素に<code>accesskey</code>が設定されています。<br> 76 それぞれのリンクやボタンをショートカットキーで試してみてください。 77 </p> 78 79 <div> 80 <!-- accesskey="h" を設定したリンク --> 81 <a href="#section-home" accesskey="h">ホームへ移動 (Accesskey: H)</a> 82 83 <!-- accesskey="s" を設定したボタン --> 84 <button type="button" accesskey="s">サービス情報を表示 (Accesskey: S)</button> 85 86 <!-- accesskey="c" を設定したリンク --> 87 <a href="#section-contact" accesskey="c">お問い合わせへ移動 (Accesskey: C)</a> 88 </div> 89 90 <hr> 91 92 <h3 id="section-home">ホームセクション</h3> 93 <p>このセクションはウェブサイトのホームコンテンツを表します。</p> 94 <p>ホームセクションのコンテンツがここに表示されます。</p> 95 96 <h3 id="section-services">サービスセクション</h3> 97 <p>このセクションはウェブサイトのサービスに関するコンテンツを表します。</p> 98 <p>サービスの詳細情報がここに表示されます。</p> 99 100 <h3 id="section-contact">お問い合わせセクション</h3> 101 <p>このセクションはウェブサイトのお問い合わせに関するコンテンツを表します。</p> 102 <p>お問い合わせフォームや連絡先情報がここに表示されます。</p> 103 104 <script> 105 // accesskey="s" が設定されたボタンがクリックされた時の処理 106 document.querySelector('button[accesskey="s"]').addEventListener('click', () => { 107 alert('「サービス情報を表示」ボタンがクリックされました！\nサービスセクションに移動します。'); 108 // ボタンクリックで特定のセクションにスクロールする例 109 window.location.hash = 'section-services'; 110 }); 111 </script> 112</body> 113</html>
HTMLのaccesskey属性は、ウェブページの特定の要素にキーボードショートカットを割り当てるためのグローバル属性です。これにより、ユーザーはマウスを使わず、キーボード操作だけで指定された要素に素早くアクセスできます。ナビゲーションリンクやボタンなどに設定することで、ウェブサイトのユーザビリティとアクセシビリティを向上させることが可能です。
この属性は引数や戻り値を持ちません。属性値には単一の文字（例: "h"や"s"）を指定し、その文字がショートカットキーの一部となります。accesskeyが設定された要素を作動させるには、OSやブラウザに応じた修飾キー（WindowsではAltキー、macOSではCtrlキーとOptionキーなど）と、指定した文字を同時に押します。
サンプルコードでは、アンカータグ（<a>）やボタンタグ（<button>）にaccesskey属性が設定されており、ショートカットキーによってリンク先への移動やボタンのクリックイベントの発火を直接実行できる様子を示しています。
accesskey属性はキーボードショートカットで要素に素早くアクセスできる便利な機能ですが、いくつか注意が必要です。ショートカットキーの組み合わせは、お使いのブラウザやOSによって動作が異なるため、必ずテストを行い、その違いをユーザーに伝える必要があります。既存のブラウザやOSのショートカットキーと競合すると、予期せぬ動作を引き起こし、ユーザー体験を損なう可能性があるため、割り当てるキーは慎重に選んでください。また、ユーザーは設定されたaccesskeyを知り得ないので、どのキーが割り当てられているかを視覚的に明示することが非常に重要です。例えば、サンプルコードのように説明文を加えたり、kbd要素で表示したりすると良いでしょう。全ての要素にaccesskeyを設定するのではなく、ウェブサイトの主要な機能や頻繁に利用されるナビゲーションに限定することで、ユーザーにとって分かりやすく、アクセシビリティの向上にも繋がります。