現在のページを見た目だけで示すパンくずリスト

ショップのマグカップのカテゴリーページは、Home / Kitchen / Mugsというパンくずリストで始まります。見慣れた、すっきりしたデザインです。HomeとKitchenは下線付きの青いリンクで、今いるページのMugsは下線のない灰色です。目で見る人は、検索エンジンから来ても、KitchenのなかのMugsにいること、クリック一つで上の階層へ戻れることがすぐに分かります。

スクリーンリーダーの利用者がTabキーで同じページを移動すると、「Home、リンク」「Kitchen、リンク」「Mugs、リンク」と聞こえます。Mugsが今いるページであることも、三つのリンクがパンくずリストであることも伝わりません。1行ずつ読むと、パンくずの間のスラッシュも読まれることがあります。パンくずリストはナビゲーションとして読み上げられず、スクリーンリーダーのランドマーク一覧にも出ないので、そこへ移動することもできません。ヘッダーのリンクに続く、ただの三つのリンクです。

パンくずリストは関係を示しています。そのリンクはサイト内を移動するためのまとまりで、トップページからこのページまで順に並び、最後の一つが表示中のページです。WCAG 1.3.1「情報及び関係性」は、見た目で示した情報をコードかテキストでも伝えることを求めています。この例では、まとまりはレイアウトにしかありません。パンくずリストは div で、支援技術に対しては何もまとめないからです。達成方法H97は、関連するリンクを nav に入れることで1.3.1を満たします。順序も一行の文字の並びにしかなく、パンくずがいくつあるかを伝えるリストがありません。現在のページも見た目にしかありません。current クラスはMugsを灰色にするだけで、ブラウザーにとって意味がないためです。

パンくずリストは、ショップのカテゴリーや商品ページ、ヘルプセンター、ドキュメントのサイトなど、ほぼどのサイトにもあります。たいていは一つの共通コンポーネントから作られるため、一か所直せばすべてのページに届きます。特に重要なのは、検索エンジンや共有されたリンクから来たページです。パンくずリストが、どこに着いたかを知るいちばんの近道になります。階層の深い大きなサイトでも同じです。

10グループ中1グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーではパンくずがばらばらのリンクとして読まれるため、パンくずリストであることも、どれが今いるページかも分からず、ランドマーク一覧から移動することもできません。検索エンジンから来た人は、どこに着いたかを知るいちばんの近道を失います。

自動チェックは、名前のあるリンクが三つあるとして合格にします。current や active といったクラス名には意味がないので、一つのリンクが現在地として装飾されていることは分かりません。div に並んだリンクがパンくずリストであることも分かりません。EaseWebの診断では、クラスや名前からパンくずリストと分かる場所で、表示中のページへのリンクが隣のパンくずと違う見た目なのに、aria-current も現在のページだと伝えるテキストもないものを報告します。ナビゲーションのランドマークの外にあるパンくずリストは、そのリンクを添えて、人が確認する項目として渡します。AIによるコード生成もこの穴を確実には埋めません。Aaron Gustafsonが2025年に公開したGPT-4の検証では、nav に名前がなく、aria-current="page" もないパンくずリストが生成されました。二つのページでパンくずリストを聞いて確かめてください。