HTML accesskey属性でラベル(labelタグ)にショートカットのキーを付与する

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
<label accesskey="値">
label要素にaccesskey属性を追加します。
WindowsのGoogle Chromeではalt+keyです。
ラベルにショートカットのキーを付与できます。
accesskey グローバル属性は、現在の要素のショートカットキーを生成するためのヒントを与えます。

使用例

<!DOCTYPE html>
<html>
<body>

<label accesskey="a"><input type="radio" name="city" value="to" checked>東京(a)</label>
<label accesskey="b"><input type="radio" name="city" value="os">大阪(b)</label>
<label accesskey="c"><input type="radio" name="city" value="fu">福岡(c)</label>


</body>
</html>

結果

「Alt + a」キーを押すと、「東京(a)」が選択されます。
「Alt + b」キーを押すと、「大阪(b)」が選択されます。
「Alt + c」キーを押すと、「福岡(c)」が選択されます。

 

Html

Posted by arkgame