アクセシビリティ対応済みのドロワーメニュー「hiraku.js」
コンテンツが多いとメガメニューやドロップダウンメニューが使われることが多いですが
アクセシビリティとかスマホ向けの処理を分けたりなどが必要になります
スマホでよく使われるドロワーメニューならパソコンもスマホも同じ処理でいけるので
探したところ、アクセシビリティ対応をあげているjQueryプラグインhiraku.jsにたどり着きました
オフキャバスメニューとも言うそうです。初めて知りました。
キーボードでの操作も可能、ボタンにはスクリーンリーダー向けのテキストも挿入されていました。
アニメーション部分はCSS3での動作になるので、コンテンツのスライドを止めたり左開き・右開きなどの処理もほぼCSSで調整できそうでした。
ただ、「オフキャンバスメニュー開閉時に Body 自体は固定する」処理を行った際、メニューを閉じる際にFirefoxで右スクロールバーが閉じる瞬間消え、完全に閉じたら復活するので画面がカクカクする問題に遭遇しました。
この手の処理だとhtml { overflow-y:auto; } を入れて常にスクロールバーを表示させて対処することが多いのですが、こちらのスクリプトはコンテンツをスクロールさせないようにbodyにheightとネガティブのmargin-topが入っていたので、コンテンツが切れてしまうという事態になりました。
とりあえずhiraku.js 138行目の$('body').css({ width: '', height: '' });を145行目scrollToの上に入れることにより、カクカクを回避することが可能でした。
設定も簡単で今後アクセシビリティへの対応を求められることも増えそうなので、是非これからも使わせていただきたいスクリプトでした。
ありがとうございます。
