accesskey属性 - ショートカットキー
公開日:
accesskey属性は、ショートカットキーを設定するための属性です。ショートカットキーを入力すると、例えば、対象のハイパーリンクやボタンをクリックできます。
説明
accesskey属性の値にはボタンを指定して下さい。そのボタンがショートカットキーとなります。
HTML
<!-- sをショートカットキーにする -->
<a href="./" accesskey="s">リンク</a>
複数ある場合は、半角スペースで区切って指定します。複数指定した場合は、同時押しではなく、どちらかを押せば、という条件になります。下記の例ではs、または、0のボタンがショートカットキーとなります。
HTML
<!-- s、または、0をショートカットキーにする -->
<a href="./" accesskey="s 0">リンク</a>
ショートカットキーは、利用している端末のOSによって操作方法が違います。OSによっては、値を複数指定した場合に対応していないかもしれません。2017年2月現在、私のMacでは、複数の値を指定した時に反応しませんでした。
- Mac
- Control + Option + ???の同時押し。
- Windows
- Control + Alt + ???の同時押し。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】accesskey属性 - ショートカットキー</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/accesskey/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>accesskey属性は、ショートカットキーを設定するための属性です。</p>
<p>Macは<kbd><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>???</kbd></kbd>、Winodwsは<kbd><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>???</kbd></kbd>の同時押しでショートカットキーになります。</p>
<h2>s</h2>
<a href="https://syncer.jp/" target="_blank" accesskey="s"><kbd>s</kbd>でリンクを開く</a>
<h2>1 or b</h2>
<a href="https://syncer.jp/" target="_blank" accesskey="1 b"><kbd>1</kbd>か<kbd>b</kbd>でリンクを開く</a>
</body>
</html>