深い階層と長いページで現在位置を保つ | Web Parts Library

解決する問題

階層が深い画面や長い本文で、利用者が現在位置と次の移動先を把握できない。

発生条件

上位階層へ戻る必要がある詳細画面。
反復する共通領域と複数章を持つ長いページ。

原因候補

階層移動とページ内移動を同じ部品で表している
リンクの意味と移動距離を予測できない。
現在位置を装飾だけで示している
支援技術や高コントラスト環境で位置が伝わらない。

推奨判断

階層にはパンくず、反復領域の回避にはスキップリンク、章移動にはページ内ナビゲーションを使い、現在位置を意味と文章で示す。

修正手順

移動範囲を分ける
サイト階層とページ内見出しを別のnavとして構成する
期待する結果: 移動先を予測しやすくなる。
本文入口を用意する
最初のキーボード操作でmainへ移動できるリンクを置く
期待する結果: 共通headerを毎回通らずに済む。
現在位置を同期する
表示中の章と対応リンクを同じ状態へ更新する
期待する結果: 視覚とfocusの位置が一致する。

失敗例

パンくずに現在ページへの操作可能リンクを置く
起こること: 同じページへ移動して混乱する
代わりに: 現在項目は非リンクで示す。
固定navだけで本文を覆う
起こること: 章へ移動しても見出しが隠れる
代わりに: focusとscroll位置を確認できる余白を保つ。

検証方法

パンくずを読む
上位リンクと現在ページが区別される。
Tab開始後に本文へ移動する
mainへfocusが移り見出しが見える。
章を切り替える
対応する見出しと現在項目が一致する。