HTML DOMのaccessKeyプロパティとは？ショートカットキーの設定・取得方法を解説
accessKeyプロパティとは
HTML DOMのaccessKeyプロパティは、要素のaccessKey属性を取得・設定するために使用されるプロパティです。HTMLにおけるaccesskey属性は、キーボードのショートカットキーを使って要素をアクティブ化（クリック）したり、フォーカスを移動したりするためのものです。
リンクやボタンなどにaccesskeyを設定しておけば、ユーザーはマウスを使わずにキーボード操作だけで目的の要素へアクセスできます。アクセシビリティ向上の観点からも有用なプロパティです。
accessKeyプロパティの構文
ショートカットキーを設定する場合
HTMLElementObject.accessKey = キー文字
「キー文字」には、ショートカットキーとして割り当てたい1文字を指定します。
ショートカットキーを取得する場合
HTMLElementObject.accessKey
ブラウザごとのアクセスキーの組み合わせ（Windows）
Windows環境でアクセスキーを使用する際のキー組み合わせは、ブラウザによって異なります。主なブラウザでの組み合わせは以下の通りです。
| Webブラウザ | Windows OS |
|---|---|
| Safari | [Alt] + アクセスキー |
| Chrome | [Alt] + アクセスキー |
| Firefox | [Alt] + [Shift] + アクセスキー |
それでは、WindowsのChromeブラウザでaccesskeyプロパティを実装する具体的な例を見ていきましょう。
実装例
次のサンプルコードでは、Googleへのリンクに「g」というアクセスキーを設定し、ボタンをクリックするとそのaccessKeyの値を画面に表示します。
<!DOCTYPE html>
<html>
<body>
<a id="myid" accesskey="g" href="https://www.google.com/">Google</a>
<p>accessKeyを取得します</p>
<button onclick="display()">クリックしてaccessKeyを表示</button>
<p id="pid"></p>
<script>
function display() {
var a = document.getElementById("myid").accessKey;
document.getElementById("pid").innerHTML = a;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、「Google」リンクとボタンが表示されます。続いて、ボタンをクリックしてみましょう。
ボタンをクリックすると、JavaScriptのdisplay()関数が実行され、リンク要素に設定されているaccessKeyの値「g」が画面に出力されます。このように、accessKeyプロパティを使えば、JavaScriptから動的にショートカットキーを確認・変更することが可能です。
-
【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード
offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな
-
HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使