HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのaccesskey属性とは？要素にショートカットキーを設定する方法を解説

HTMLのaccesskey属性とは

HTMLのaccesskey属性は、要素をアクティブ化したりフォーカスを移動したりするためのショートカットキーを設定できる属性です。マウスを使わずにキーボード操作だけでリンクやボタンを実行できるため、操作性やアクセシビリティの向上に役立ちます。

基本構文

<element accesskey="char">

「char」の部分には、ショートカットキーとして割り当てたい半角英数字を1文字指定します。

Windows環境でのブラウザ別キー操作

accesskey属性で設定したショートカットキーは、ブラウザごとに組み合わせる修飾キーが異なります。Windows OSにおける主なブラウザの操作方法は以下のとおりです。

WebブラウザWindows OSでの操作
Safari[Alt] + accesskey
Chrome[Alt] + accesskey
Firefox[Alt] + [Shift] + accesskey

このように、Firefoxでは他のブラウザと異なり「Shift」キーも同時に押す必要がある点に注意してください。

実装例：Chrome（Windows）でaccesskey属性を使う

それでは、Google Chrome上でaccesskey属性を実装する具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>参考リンク</h2>
    <a href="https://www.tutorialspoint.com/online_dev_tools.htm" accesskey="t">ツール</a><br>
    <a href="https://www.tutorialspoint.com/codingground.htm" accesskey="c">オンラインコンパイラ</a><br>
    <a href="https://www.tutorialspoint.com/whiteboard.htm" accesskey="w">ホワイトボード</a><br>
<p>Chromeでは <kbd>ALT</kbd> + <kbd>accesskey</kbd> で起動できます</p>
</body>
</html>

出力結果

このコードをブラウザで表示すると、「Alt + T」「Alt + C」「Alt + W」のそれぞれのキー操作で、対応するリンク先へ素早くアクセスできるようになります。

accesskey属性を使用する際の注意点

  • ショートカットキーがブラウザ本来の機能（Alt + D でアドレスバーへ移動など）と競合する場合があります。
  • モバイル端末では物理キーボードがないため、基本的にaccesskey属性は機能しません。
  • スクリーンリーダー利用者向けに、どのキーが割り当てられているかをページ内で明示しておくと親切です。

このようにaccesskey属性は簡単に実装できる一方で、環境による挙動の違いにも配慮しながら活用することが大切です。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以