ヘッダー

サンプル

デザイン上の考慮事項

• 長いテキストが入った場合の表示を確認してください。
• 画面幅が狭い場合に、画面からはみ出さないことを確認してください。
• 追従するヘッダーに高さがある場合は、コンテンツの表示領域を確保するために、一定量スクロールした時に高さを抑える見た目にするなどの検討を行ってください。

実装上の考慮事項

• ヘッダー内ロゴのマークアップはページによってはh1要素の方が適切な場合があります。その場合はページによって出し分けるなどの検討を行ってください。
• button要素を使用する場合、基本的にtype="button"を指定します（type属性のデフォルトはsubmitであるため）。
• SP時にハンバーガーメニューになる場合は、メニューを開いた時に後ろのコンテンツの位置が固定されるようにスクロールロックの機能を実装してください。data-header-scroll-lock属性を付与することで、スクロールロック機能が動作します。
• サブメニューの開き方はアクセシビリティの観点からクリック開閉がおすすめです（ユーザーの意思で開閉できるため、意図しない挙動が起きにくい）。
• ただしクリック開閉の場合はサブメニューを開かずに第2階層にリンクさせること（以後この挙動を「直リンク」とする）ができないので、直リンクさせたい場合はホバー開閉になります。
• SP時にアコーディオン開閉となる場合（PC時は直リンク）は、アコーディオンメニューの中に第2階層へのリンクを置くこと（アコーディオンボタンエリアにはメニュー開閉のみの機能を持たせる）を推奨します。
• 直リンクさせる場合は、キーボード操作時にサブメニューの開閉挙動が機能しなくならないように注意してください。
• サンプルにはホバーで開閉し、クリックで開閉状態が固定されるパターンも用意していますが、デザインからその仕様が予測できない場合は、他の開閉パターンを検討してください。
• 現在のページのリンクにはaria-current='page'を付与してください。
• スクロール時のヘッダーの見た目を変更することが可能です。必要に応じてスタイルを調整してください。（本フレームワークでは、スクロール時is-scrollクラスが付与される）

アクセシビリティ上の考慮事項

• キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
• フォーカスインジケータが正しく表示されることを確認してください（達成基準 2.4.7 フォーカスの可視化 (レベル AA)）。（特にoverflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります）
• ホバーでサブメニューを表示する場合、「（Escキーで）非表示にできる」ことを確認してください（達成基準 1.4.13 ホバー又はフォーカスで表示されるコンテンツ (レベル AA)）