アクセシビリティを意識したハンバーガーメニューの作り方

今回は、「アクセシビリティを意識したハンバーガーメニューの作り方」についてまとめました。

ハンバーガーメニューは頻繁に実装するパーツなので、是非実装できるようになりましょう。

以下の記事を参考にさせて頂きました。

ハンバーガーボタン何で作ってる？僕なりの作り方を解説してみる。

ハンバーガーメニューの実装方法決定版

アクセシビリティを意識したハンバーガーメニューの作り方

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

マウスを使わずタブ操作でハンバーガーメニューを閉開できるので、アクセシビリティ的に良いです。

HTML

<div class="button">
  <button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false">
      <span class="p-hamburger__line">
        <span class="u-visuallyHidden">
          メニューを開閉する
        </span>
      </span>
  </button>
</div>

<div class="groval">
  <a href="">グローバルメニューです</a>
</div>

ハンバーガーメニューを作るポイントは、buttonタグで実装することです。

buttonタグを使うことで、タブ操作でハンバーガーメニューの閉開が可能となります。

CSS

.c-button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.p-hamburger {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  transition: all .3s ease-in-out;
  background-color: red;
}

.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: inherit;
          transition: inherit;
}
.p-hamburger__line::before,
.p-hamburger__line::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  content: '';
  -webkit-transition: inherit;
          transition: inherit;
}
.p-hamburger__line::before {
  top: -5px;
}
.p-hamburger__line::after {
  top: 5px;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line {
  background-color: transparent;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  top: 0;
  background-color: #f9d8ae;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
  transform: rotate(45deg);
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  transform: rotate(-45deg);
}

.u-visuallyHidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

.groval {
  background-color: pink;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  visibility: hidden;
  a {
    font-size: 2.2rem;
    margin-bottom: 25px;
  }
}
.is-drawerActive .groval {
    visibility: visible;
}

JavaScript

(function () {
  $('#js-buttonHamburger').click(function () {
    $('body').toggleClass('is-drawerActive');

    if ($(this).attr('aria-expanded') == 'false') {
      $(this).attr('aria-expanded', true);
    } else {
      $(this).attr('aria-expanded', false);
    }
  });
}) ();