ウェブアクセシビリティ支援
アクセシビリティに対応したハンバーガーナビ・ドロワーUIです。
キーボード操作・スクリーンリーダーに対応しています。
開いている時、フォーカスは開いているコンテンツでループします。
1ページに1つの想定です。
トリガーの設定
トグルさせたいボタンにdata-toggle-drawer属性を追加します。
aria-controls属性には、識別用のラベルを指定します。
コンテンツの設定
コンテンツ要素にdata-body-drawer属性とaria-controlsで指定したラベルをidとして紐づけます。
コンテンツ内のナビゲーションにページ内スクロールがある場合はdata-scroll-drawer属性を指定します。
閉じるボタンの設定
data-close-drawer属性を追加します。閉じるボタンは複数使用可能です。
背景の設定
data-bg-drawer属性を設定します。
フォーカスエンドの設定
data-focus-end-drawer属性を設定します。
ドロワー展開時のフォーカスエンドを指定します。
これ以降のフォーカスは上に戻ります。
data-focus-end-drawer tabindex="0"
フォーカススタートの設定
data-focus-start-drawer属性を設定します。
フォーカスエンドからの戻り位置を指定します。
指定しない場合はトグルボタンがスタート位置となります
data-focus-start-drawer
開閉時はbodyに次のクラスが付与されます。
.is-body-drawer-active
[2024-08-05] 1.1.0
-機能追加：複数の閉じるボタンを追加
[2024-06-28] 1.0.0
-NEW: 初期リリース
