【jQuery】アクセシビリティ対応のドロワーメニュー-hiraku.js-を使ってみた
アクセシビリティに対応したドロワーメニューのjQueryプラグインhiraku.jsを使ってみました。
この記事では、基本的な導入部分しか書いていないので、詳しいカスタマイズ方法は作成されたアップルップルさんのブログを見るのがいいと思います。名古屋の会社なので日本語で使い方書いてくれていて、ありがたいですね。
特徴で挙げられている「HTMLの構造に左右されない」ところや「スクリーンリーダーに対するアクセシビリティ対応」のあたりが、いいところかなと思います。「オフキャンバスメニューのスクロール時にメインのコンテンツはスクロールされない」については、PCでは綺麗ですがiOSでは「overflow-scrolling」というCSSプロパティを使っていて、若干動きが微妙なところもあります。
簡単にデモを作ってみました。
ダウンロード
ドキュメントサイトかGitHubからzipをダウンロードし解凍しておきます。
ドキュメント
読み込み
読み込むのはjQueryとhiraku.jsのJSファイルとCSSの3つです。パスは自分の環境に合わせて変えてください。
<link rel="stylesheet" href="hiraku.min.css"> <script src="jquery-3.1.1.min.js"></script> <script src="hiraku.min.js"></script>
HTMLの記述
ざっくりですが、こんな感じでトグルボタンやメニュー部分はコンテンツ部分に関係なく配置することができます。
<button class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1"> <span class="hiraku-open-btn-line"></span> </button> <div class="offcanvas-right"> <ul> <li>リスト1</li> <!-- 省略 --> </ul> </div> <div> <p>Lorem ipsum dolor sit amet, consectetuer </p> <!-- 省略 メインのコンテンツ部分 --> </div>
jQueryの記述
ドキュメントに書かれている通り以下の記述でOKです。
$(".offcanvas-right").hiraku({ btn:"#offcanvas-btn-right", fixedHeader:"#header", direction:"right" });
CSSの記述
ドロワーに関するCSSは先ほど読み込んだCSSに書かれているので、何もしなくても使えます。自分がやりたいようにカスタマイズしていけばいいかなと思います。
さいごに/類似プラグインなど
導入が簡単でいいプラグインですね。
アクセシビリティ
アクセシビリティの部分に関しては、開閉の状態管理に「aria-expanded」と「aria-hidden」を使ってブラウザに状態を伝えているためできているのだと思います。
一応このブログでも使っております。
メニューのスクロール
冒頭でも書いたメニューのスクロールとコンテンツの固定ですが、CSSのoverflow-scrollingを使うと、メニューを一番下までスクロールして、さらに下にスクロールする動作をした後、上に戻ろうとするとメニューが動かなくなるんですよね。。。
overflow-scrollingはiOSで慣性スクロールさせるのに必要なんですが、ドロワーみたいにレイヤーが重なるような構造の時に使うと下のレイヤーにスクロールが奪われて、肝心のメニューが動かなくなったりけっこう使いどころに悩まされます。
メニューを開いてるときはコンテンツを固定かつ、メニューはスクロールさせるのはぜひやりたいところなんですが、overflow-scrollingを使うと、気になる人は気になってしまいます。。
類似プラグイン
上記のスクロール問題は細かいので、気にならなければhiraku.jsはすごくいいプラグインだと思います。
だた、そのスクロールをうまく解決しているプラグインもあって、「Drawer」というものがすごく綺麗に動作します。このプラグインはメニューのスクロールをiScrollという別のプラグインにもたせています。
もう一つプラグインを読み込むことになりますが、綺麗に動作するので仕様や要望によって選んでみるといいと思います。
Drawerの公式サイト
以下、使い方の記事