初心者向け！ハンバーガーメニューの作り方入門編

まずは3本線を作ろう

先程も書いたとおり、今回はインラインSVGで三本線を作成します。インラインSVGによる三本線のコードは以下のとおりです。 横幅23px 縦14px(全体で15px)でレイアウトしています。線の色やsvgのサイズは、CSSでレイアウトしていきます。 線をそれぞれ、top,middle,bottomというclassで設定しています。
また、svgのtitle要素には、ハンバーガーボタンの説明を入れるようにします。一般的にtitle要素は描画されませんが、音声支援技術などでは読み上げることができます。

<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 23 15">
<title id="global-menu-title">メインメニューを開く</title>
<g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
<line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
<line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
</svg>

ボタンとして機能させよう!

次にこの三本線に”メニューを開く”という役割を与えます。ハンバーガーメニューの目的は、隠されたサブメニューを開くというものです｡ 一般的にユーザーと対話するインタラクティブ要素であるbutton要素は、フォームの送信、ダイアログやメニューのオープン、アクションのキャンセル、新しいレコードの挿入や情報の表示などのアクションを実行するために使用するウィジェットです｡ ここでは､メニューを開くという目的のためにボタン要素を使用してハンバーガーメニューを作成していきます。

<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 23 15">
<title id="global-menu-title">メインメニューを開く</title>
<g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
<line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
<line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
</svg>
</button>

次にボタン要素をタップ(クリック)可能な要素として配置するため、今回は49px × 49pxの大きさでボタン要素を作成し､ 下記CSSを用いて､一般的なブラウザで表示されるボタンレイアウトをリセットします｡

/* ボタンデザインのリセット */
button {margin:0; padding:0; border-radius:0;background:transparent; border:none;outline:none; appearance:none; }

ここまでの確認

ナビゲーションメニューに組み込もう

HTMLのnav要素は、現在のページから別のページへのナビゲーションリンクを提供するために使用されます｡ナビゲーションの各項目はul要素で作成されます｡ 先程作成したボタン要素をナビゲーションの一部として組み込んでみましょう｡(少しずつコードが増えていきますので､じっくり見て下さい｡)
また､レイアウトしやすいように各要素にclass名､id名を設定しています｡

<nav id="global-menu">
  <ul class="mobile" id="mobile-menubar" >
    <li>
        <button type="button" id="global-menu-button">
        <svg 
        id="global-menu-img"
        xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 23 15">
        <g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
        <line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
        <line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
        </svg>
        </button>
    </li>
    <li class="logo" ><a href="#">タイトル</a></li>
    </ul>
</nav>

オーバーレイメニューを作ろう

次に､ハンバーガーメニューをタップした際に表示するメニューを作成します｡ やることは､単純でナビゲーション内にハンバーガーメニューをタップした際に表示したい内容（サブメニュー）を追加していきます｡

<nav id="global-menu">
    <ul class="mobile" id="mobile-menubar" >
      <li>
          <button type="button" id="global-menu-button">
          <svg 
          id="global-menu-img"
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 23 15">
          <g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
          <line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
          <line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
          </svg>
          </button>
      </li>
    <li class="logo" ><a href="#">タイトル</a></li>
    </ul>
    
    <!-- ハンバーガーメニューをタップした場合に表示する内容 -->
    <div id="global-menu-overlay" >
      <ul>
          <li class="link"><a href="#">SP MENU1</a></li>
          <li class="link"><a href="#">SP MENU2</a></li>
          <li class="link"><a href="#">SP MENU3</a></li>
      </ul>
    </div>
</nav>

デスクトップメニューを作ろう

パソコン画面で閲覧した場合と､スマートフォン等で閲覧した場合のナビゲーションメニューの切り替えを行う場合､ デスクトップ用のメニューを追加する必要があります｡nav要素内にPC向けメニューを記載したul要素をさらに追加します｡ (共通のメニューを使用する場合には不要です｡)

  <nav id="global-menu">
      <!-- PC向けメニュー -->
      <ul class="desktop" id="desktop-menubar">
        <li class="logo"><a href="#">タイトル</a></li>
        <li class="link"><a href="#">PC MENU1</a></li>
        <li class="link"><a href="#">PC MENU2</a></li>
        <li class="link"><a href="#">PC MENU3</a></li>
      </ul>
      
      <!-- SP向けメニュー -->
      <ul class="mobile" id="mobile-menubar" >
        <li>
          <button type="button" id="global-menu-button">
           <svg 
            id="global-menu-img"
            xmlns="http://www.w3.org/2000/svg" 
            viewBox="0 0 23 15">
            <g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
            <line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
            <line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
            </svg>
          </button>
        </li>
        <li class="logo" ><a href="#">タイトル</a></li>
      </ul>
      
      <!-- ハンバーガーメニューをタップした場合に表示する内容 -->
      <div id="global-menu-overlay" >
        <ul>
          <li class="link"><a href="#">SP MENU1</a></li>
          <li class="link"><a href="#">SP MENU2</a></li>
          <li class="link"><a href="#">SP MENU3</a></li>
        </ul>
      </div>
    </nav>

ここまでの確認

ロール、プロパティ、状態

早速ナビゲーションで利用されるWAI-ARIAの各項目を詳しく見ていきましょう｡

メニューボタン関連（ハンバーガーメニュー）

aria-haspopup="true"

[対象:button要素]ボタン要素が他のメニューを開くことを表します｡ aria-haspopupの状態は､trueまたはmenuが最適です｡他の値としては､"false"、"listbox"、"tree"、"grid"、"dialog"があります｡

aria-controls="IDREF"

[対象:button要素]メニュー ボタンによって制御されるメニュー要素（サブメニュー）を参照(id名を指定)します。 今回の場合､aria-controls="global-menu-overlay"と指定します｡

aria-expanded="true"

[対象:button要素]メニュー ボタンによって制御されるメニュー要素が展開しているのか、折りたたまれているかを表します｡
true:展開中の状態
false:折りたたまれている状態

aria-labelledby="IDREF"

[対象:svg要素]音声読み上げ等の支援技術を利用するユーザーがハンバーガーメニューの目的を理解することを手助けします｡

メニューバー関連（永続的に見えるメニュー）

role="menubar"

[対象:ul要素]視覚的に永続的なメニューは、メニューバーとして定義します。

aria-label="string"

[対象:ul要素]音声読み上げ等の支援技術を利用するユーザーがメニューバーの目的を理解することを手助けします。

role="menuitem"

[対象:a要素]メニューバーの項目として定義します。

aria-current="page"

[対象:a要素]現在のページのURL同じURLのリンクを持つ要素に定義します。

aria-haspopup="true"

[対象:a要素]メニュー項目にサブメニューが含まれているかどうかを表します。
true:サブメニュー有り
false:サブメニュー無し

role="none"

[対象:li要素]要素の暗黙のロールを削除します。

隠されたメニュー

aria-hidden="true"

[対象:div要素]視覚的・聴覚的に隠された要素を表します。

role="menu"

[対象:ul要素]永続的ではないメニューは、メニューとして定義します。

role="menuitem"

[対象:a要素]メニューの項目として定義します。

WAI-ARIAの実装

では、早速先ほど説明したWAI-ARIAを用いて、ナビゲーションメニューにWAI-ARIAを取り入れてみましょう。

<nav id="global-menu" aria-label="グローバル">
    
    <!-- PC向けメニュー -->
    <ul role="menubar" class="desktop" id="desktop-menubar" aria-label="メインナビゲーション">
        <li role="none" class="logo"><a role="menuitem" href="#">タイトル</a></li>
        <li role="none" class="link"><a role="menuitem" href="#">PC MENU1</a></li>
        <li role="none" class="link"><a role="menuitem" href="#">PC MENU2</a></li>
        <li role="none" class="link"><a role="menuitem" href="#">PC MENU3</a></li>
    </ul>

    <!-- SP向けメニュー -->
    <ul role="menubar" class="mobile" id="mobile-menubar"  aria-label="メインナビゲーション">
        <li role="none">
            <button 
            id="global-menu-button"
            type="button"
            aria-expanded="false" 
            aria-controls="global-menu-overlay"
            data-close-label="メインメニューを閉じる"
            data-open-label="メインメニューを開く"
            aria-haspopup="true"
            >
            <svg 
            role="img"
            id="global-menu-img"
            aria-labelledby="global-menu-title"
            xmlns="http://www.w3.org/2000/svg" 
            viewBox="0 0 23 15">
            <title id="global-menu-title">メインメニューを開く</title>
            <g><line class="top" x1="0" y1="0.5" x2="23" y2="0.5"/>
            <line class="middle" x1="0" y1="7.5" x2="23" y2="7.5"/>
            <line class="bottom" x1="0" y1="14.5" x2="23" y2="14.5"/></g>
            </svg>
            </button>
        </li>
        <li role="none" class="logo" ><a role="menuitem" href="#">タイトル</a></li>
    </ul>

    <!-- ハンバーガーメニューをタップした場合に表示する内容 -->
    <div id="global-menu-overlay" aria-hidden="true" aria-labelledby="global-menu-title">
        <ul role="menu">
            <li role="none" class="link"><a role="menuitem" href="#">SP MENU1</a></li>
            <li role="none" class="link"><a role="menuitem" href="#">SP MENU2</a></li>
            <li role="none" class="link"><a role="menuitem" href="#">SP MENU3</a></li>
        </ul>
    </div>

</nav>

ここまでの確認

{
    const globalMenuButton = document.querySelector('#global-menu-button');
    const globalMenuImg    = document.querySelector('#global-menu-img');
    const body             = document.querySelector('body');

    let openLabel   = globalMenuButton.dataset.openLabel;
    let closeLabel  = globalMenuButton.dataset.closeLabel;

    let overlayMenu = document.querySelector(`#${globalMenuButton.getAttribute('aria-controls')}`);
    let menuTitle   = document.querySelector(`#${globalMenuImg.getAttribute('aria-labelledby')}`);

    const toggleRegion = () => {
        if (globalMenuButton.getAttribute('aria-expanded') == 'false') {
            globalMenuButton.setAttribute('aria-expanded', 'true');
            overlayMenu.setAttribute('aria-hidden', 'false');
            menuTitle.innerHTML = closeLabel;
            globalMenuButton.focus();
            body.classList.add('clip');
        } else {
            globalMenuButton.setAttribute('aria-expanded', 'false');
            overlayMenu.setAttribute('aria-hidden', 'true');
            menuTitle.innerHTML = openLabel;
            body.classList.remove('clip');
        }
    };
    globalMenuButton.addEventListener('click', toggleRegion);
}

ここまでの確認