In HTML, the accesskey attribute is a feature that allows you to assign keyboard shortcuts to specific elements so users can quickly access them without using a mouse.
accesskey 属性とは？
accesskey
Webページを閲覧している際、キーボード操作のみで素早く特定のリンクやフォーム要素に移動できる方法があることをご存じでしょうか？ その代表的な仕組みとして、「アクセスキー（accesskey）」というHTML属性があります。accesskey は、特定の要素に対してキーボードショートカットを割り当てるために使用されます。
accesskey 属性とは？accesskey 属性は、HTMLの要素に「キーボードショートカット」を関連付けるための属性です。これを用いると、ユーザーがキーボードのみでページ内の特定要素にすぐにアクセスできるようになります。
accesskey の使用方法はブラウザやOSによってキーボードの組み合わせ（修飾キー）が異なり、混乱を招く可能性がある。HTML要素に accesskey 属性を追加することでキーボードショートカットを割り当てられます。最もよく使われる例としては、リンクに割り当てるパターンが挙げられます。
HTML
<a href="https://example.com" accesskey="h">ホームページ</a>上記の場合、ユーザーは割り当てられた修飾キー（ブラウザ・OSによって異なる）と「h」を同時に押すことで、リンク先に移動しやすくなります。
ブラウザやOSの組み合わせによってこのように異なるため、ユーザーに案内するときは注意が必要です。
accesskey 属性は、リンク (<a>) のほか、ボタン (<button>)、入力フォーム要素 (<input>、<textarea>、<select> など）にも設定できます。
HTML
<button type="button" accesskey="s">送信</button>HTML
<input type="text" name="username" accesskey="u" placeholder="ユーザー名">これにより、ユーザーはキーボードショートカットを使って直接ボタンにフォーカスを移したり、入力欄にカーソルを移したりできるようになります。
冒頭で述べたように、accesskey で割り当てたキーは、OSやブラウザがすでに使っているキーボードショートカットと競合する可能性があります。たとえば、Windows の Firefox でよく使われる Alt + Shift + S が、何らかの標準機能に割り当てられている場合は、ユーザーはページのショートカットを使えないかもしれません。
accesskey="h" をホーム用として使うのは直感的ですが、ユーザーが “H” のショートカットを他のツールやシステム設定で使っているかもしれません。
このようなシチュエーションを踏まえると、より「競合しにくい」文字を探す必要もあります。また、複数のaccesskeyを設定する場合は、a, s, k, f のように並べて割り当てるよりも、要素の目的に合った文字を検討することを推奨します。
accesskeyaccesskey は一見するとアクセシビリティによさそうですが、注意点も多く、実際にはあまり積極的に使われていない場面もあります。ユーザーのために導入するのであれば、以下の点をしっかり考慮しましょう。
一部のスクリーンリーダーでは accesskey を積極的にサポートしていないか、混乱を生むケースがあります。
また、スクリーンリーダー利用者は、ブラウザ自体のショートカットではなくスクリーンリーダー特有のコマンドを使っていることが多いため、accesskey を利用する習慣がない場合があります。
WCAGで明示的に accesskey が推奨・非推奨とされているわけではありませんが、ユーザーがキーボード操作可能であることを確保するという観点から、より柔軟かつ周知のショートカット実装が望ましいとされています。
たとえば、ランドマーク要素（<header>, <nav>, <main>, <footer>など）によりブラウザや支援技術が利用しやすい構造を整える方が、結果的にアクセス性を高めるケースもあります。
accesskey を割り当てても、ユーザーがその存在を知らなければ利用されません。
ここでは、より実践的な注意点やベストプラクティスについてまとめます。
accesskey は乱用するほど便利になるわけではありません。重要な操作（例：トップページへの遷移、検索欄へのフォーカス、送信ボタンなど）にのみ厳選して割り当てるほうが混乱が少なく、ユーザーも覚えやすいです。<a accesskey="h">ホーム (Alt + Shift + H)</a> のように、実際の要素ラベル内やツールチップでショートカットの存在を示すことで、ユーザーが学習しやすくなります。accesskey がどのように読み上げられるか確認するとよいでしょう。場合によっては誤作動したり、まったく機能しなかったりするケースもあります。tabindex 属性と絡めて、ユーザーがキーボードでスムーズに要素を巡回できる設計が重要です。accesskey だけあってもタブ順序が混乱していれば、ユーザー体験を損ねます。以下は、複数のリンクとフォーム要素にアクセスキーを設定したシンプルな例です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>accesskey サンプル</title>
</head>
<body>
<header>
<!-- "h" でトップページへ移動 -->
<a href="/" accesskey="h">ホーム (Alt + Shift + H)</a>
</header>
<nav>
<!-- "n" でナビゲーションにジャンプ -->
<a href="#navigation" accesskey="n">このサイトのナビゲーションへ</a>
</nav>
<main id="navigation">
<h1>アクセスキーのサンプル</h1>
<p>ここでは複数のアクセスキーを使って移動できるように設定しています。</p>
<!-- "s" で検索ボックスへフォーカス -->
<form action="/search" method="get">
<label for="searchBox">サイト内検索 (Alt + Shift + S):</label>
<input type="text" id="searchBox" name="q" accesskey="s" placeholder="キーワードを入力">
<button type="submit">検索</button>
</form>
<!-- "c" でコンタクトフォームへ移動 -->
<a href="#contact" accesskey="c">お問い合わせフォームへ (Alt + Shift + C)</a>
</main>
<footer>
<section id="contact">
<h2>お問い合わせ</h2>
<form action="/contact" method="post">
<label for="email">メールアドレス (Alt + Shift + E):</label><br>
<input type="email" id="email" name="email" accesskey="e" placeholder="your@example.com"><br><br>
<label for="msg">メッセージ:</label><br>
<textarea id="msg" name="message" rows="5" cols="40"></textarea><br><br>
<button type="submit" accesskey="m">送信 (Alt + Shift + M)</button>
</form>
</section>
</footer>
</body>
</html>説明
accesskey="h" を設定。トップページに戻りたい場合、ブラウザの組み合わせ（例: Windows + Firefox）なら Alt + Shift + H などでアクセス可能。accesskey="n"。ページ上部に戻らなくてもすぐにナビゲーションに移れる。accesskey="s"。検索機能が重要なサイトでは特に便利。accesskey="c" や accesskey="m" を割り当てて、リンクや送信ボタンにすぐアクセスできるようにした。ユーザーに対しては、リンクテキストやラベルなどで「(Alt + Shift + H)」のようにショートカットの存在を明記すると、利用率が高まります。
HTML
<div class="yn">
<label><input type="radio" name="yn" accesskey="y">Yes (Y)</label>
<label><input type="radio" name="yn" accesskey="n">No (N)</label>
</div>
<div class="os">
<label><input type="checkbox" accesskey="w"> Windows (W)</label><br>
<label><input type="checkbox" accesskey="m"> macOS (M)</label><br>
<label><input type="checkbox" accesskey="l"> Linux (L)</label>
</div>それぞれの( )にaccesskeyで割り当てたアルファベットを記載しています。
「代表的な修飾キーの例」を参考に実際にショートカットを使って動作を確認してみてください。
accesskey そのものではありませんが、JavaScriptでイベントリスナーを使ってカスタマイズしたキーボードショートカットを実装する方法もあります。たとえば以下のようにすれば、競合を避けやすかったり、ユーザーごとに割り当てキーを変更できたりします。
JavaScript
document.addEventListener('keydown', function(event) {
// 例: Ctrl + Shift + F で検索欄にフォーカス
if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'f') {
event.preventDefault();
const searchBox = document.getElementById('searchBox');
if (searchBox) {
searchBox.focus();
}
}
});ブラウザやOSによる修飾キーの差異を自力で制御できるため、より柔軟な設定が可能。
ただし、キーボードショートカットの競合リスクを0にできるわけではないので、ユーザーに設定変更の余地を提供するのが理想的です。
ECサイトやWebアプリなど、ユーザーが頻繁に利用するサービスであれば、ショートカットキーをユーザー自身が登録・変更できるインターフェイスを提供すると便利です。
たとえば、キー設定をユーザープロファイルに保存しておき、アクセスするたびに反映することで、慣れたショートカット操作が行えるようになります。
accesskey 属性は、Webページの要素にキーボードショートカットを付与する便利な手段であり、正しく運用すればアクセシビリティを向上させる効果が期待できます。一方で、ブラウザごとの実装やユーザーが利用する支援技術との相性など、注意点も多く存在するため、過度に頼りすぎず、適切な場面で活用することが大切です。
初めて accesskey を知った方は、まずは小さな機能から試してみて、どのように挙動するかブラウザ別・OS別に検証してみましょう。また、中級者以上の方は、ショートカットの競合を避けるテクニックやJavaScriptを使ったカスタムショートカットの実装など、より高度なアプローチにも挑戦してみてください。
キーボード操作を優先するユーザーの利便性を向上させる重要な機能であると同時に、あくまで「補助的な仕組み」という点を理解しておくと、よりトラブルの少ない実装ができるでしょう。