【決定版】ハンバーガーメニューの作り方

ハンバーガーメニューは、現在多くのウェブサイトで使われている一般的なナビゲーションパターンです。しかし、その実装には多くの注意点があり、単に見た目を再現するだけでは不十分です。アクセシビリティやユーザーエクスペリエンスを考慮した実装が求められます。ここでは、ハンバーガーメニューの効果的な実装方法を紹介します。

まずは完成形をご覧ください。

See the Pen Untitled by maeda (@opcuo) on CodePen.

1. メニューボタンの実装方法

まず、メニューボタンはbutton要素で作成します。これにより、キーボードでの操作が可能になり、スクリーンリーダーでも正しく読み上げられます。以下のWAI-ARIA属性を使用してアクセシビリティを向上させます。

aria-expanded : メニューの開閉状態を示します。
aria-controls : このボタンが制御するメニューのIDを示します。

JavaScriptでボタンが押されたときにクラスを追加し、aria-expanded属性を更新してメニューの開閉を制御します。

2. メニュー展開時の背景固定

メニューが展開されたときに背景（メインコンテンツ）がスクロールしないようにすることが重要です。背景がスクロールするとユーザー体験が損なわれるため、以下の方法で背景を固定します。

position: fixed; と height: 100vh; を使って背景を固定します。
スクロール位置を保存し、メニューを閉じたときに元の位置に戻すようにします。
これにより、メニューが展開されている間、背景が固定され、ユーザーが誤ってスクロールしてしまうことを防ぎます。

3. 非表示時のメニューフォーカス制御

メニューが閉じているときは、その中身にフォーカスが当たらないようにします。これにはCSSのvisibility: hidden;を使用します。メニューが開いたときにはJavaScriptでvisibilityをvisibleに変更します。

4. アコーディオンメニューのフォーカス管理

アコーディオンメニューについても、閉じているときにフォーカスが当たらないようにします。これは先ほどのメニューと同様に、visibility: hidden;で制御し、開いたときにはvisibilityをvisibleに変更します。

5. アコーディオンボタンの実装

アコーディオンメニューのボタンもbutton要素を使用し、aria-expandedなどのWAI-ARIA属性を追加します。これにより、アクセシビリティを高めることができます。

6. エスケープキーでメニューを閉じる

ユーザーがエスケープキーを使ってメニューを閉じることができるようにします。これは直感的で使いやすい操作方法です。JavaScriptでevent.keyを使用してエスケープキーを検出し、メニューを閉じます。このとき、メニューが閉じた後にメニューボタンにフォーカスを戻すことも重要です。

7. キーボードフォーカスの循環

メニュー内の項目をキーボードで操作する際、最後の項目までフォーカスが移動したら、メニューボタンまたはメニューの最初の項目にフォーカスを戻すようにします。これを実現するために、フォーカストラップを使用します。



<div id="js-focus-trap" tabindex="0"></div>

この要素にフォーカスが当たったときに、JavaScriptでメニューボタンまたは最初の項目にフォーカスを移します。

まとめ

ここで紹介したハンバーガーメニューの実装方法は、ユーザーの利便性とアクセシビリティを重視したものです。他にもさまざまなアプローチがありますので、ぜひ自分のプロジェクトに最適な方法を見つけてください。