パンくずリストもメニューの現在地表示もない下層ページ

生活雑貨のショップ「Fernhill」は、商品ページをランディングページとしてデザインしています。訪れる人の多くは検索エンジンや広告から商品ページに直接来るため、商品との間に何も置かない方針です。ヘッダーの下には大きな写真、商品名、価格、「かごに入れる」ボタンが並びます。パンくずリストは、写真の上を散らかすものとして外しました。ヘッダーのメニュー（キッチン、テーブル、バス、ベッドルーム）には現在地の見た目があり、リンクの下にバーを引く形で、カテゴリーのページ用に描かれています。テーブルのページでは、テーブルに下線が付きます。

リネンのナプキンを検索した人が、「リネンのナプキン 4枚組」のページに着きました。ほかのテーブルリネンも見たいし、どこで見つけたかも覚えておきたいところです。ところが、このナプキンがテーブルの商品だと示すものは、ページのどこにもありません。パンくずリストはなく、バーの付いたメニューのリンクもなく、ブラウザーのタブには「リネンのナプキン 4枚組 – Fernhill」とあるだけです。バーはデザインにあるものの、ページのアドレスがメニューのリンクと一致したときにしか表示されず、商品のアドレス /products/linen-napkins はどのリンクとも一致しません。スクリーンリーダーの利用者には、読み込み時に同じタイトルが読まれ、続いてメニューのただの四つのリンクが聞こえます。

達成基準2.4.8「現在位置」（レベルAAA）は、一連のページの中で利用者が今どこにいるかという情報を得られることを求めています。解説書は、その目的を、利用者がサイトの中で自分の位置をつかめるようにすることだとし、恩恵を受ける人として、注意の持続時間が短く混乱しやすい人を挙げています。十分な達成方法は、パンくずリスト（G65）、サイトマップ（G63）、ナビゲーションバーでの現在地の表示（G128）、aria-current による現在の項目の指定（ARIA26）、そしてページがサイト全体のどこにあるかを示すタイトル（G127）です。どれか一つで足ります。この商品ページには、そのどれもありません。パンくずリストはなく、メニューにも目印がなく、タイトルはページと店の名前を示すだけで、その間のセクションは示しません。

メニューの現在地の見た目は、アドレスの比較で決まります。ショップのプラットフォームもCMSもルーターも、ページ自身のアドレスを持つリンクに目印を付けます。Shopifyのテンプレートでは、リンクの current はページのパスがリンクのアドレスと一致するときに、active はパスがリンクのアドレスを含むときにtrueになり、Shopifyがテーマ作りの手本として公開しているDawnは、これらの値からメニューのリンクに下線と aria-current="page" を付けます。商品のパス /products/linen-napkins は /collections/table と一致せず、含んでもいないため、テーブルのリンクに商品ページで目印が付くことはありません。デザインファイルでは、うまく働くカテゴリーのページでこの状態を見せ、商品ページは単独で描くので、商品ページでは一度も表示されないことに誰も気づきません。

検索エンジン、広告、共有されたリンクなど、外から直接来ることが多いのは、商品ページ、ヘルプ記事、ブログ記事、ドキュメントのページです。Baymard Instituteは2020年に、調査対象のショップのモバイルサイトの65%で商品ページにパンくずリストがなかったと報告しています。デスクトップでは20%でした。スマートフォンではメニューもボタンの奥に畳まれるため、画面に見えている範囲には、位置を示すものが何もないことも珍しくありません。

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

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

• 言語・認知・学習の能力が限られる ほかのナプキンを見たい人や、あとでこのページを探し直したい人は、どのセクションにあるかをメニューから推測するしかありません。注意や記憶に制限のある人ほど迷いやすいのに、ページにはその手がかりが何もありません。
• 視覚を使わない ページが読み込まれると、スクリーンリーダーはタイトルの「リネンのナプキン 4枚組 – Fernhill」を読み、メニューはただの四つのリンクとして読まれます。聞こえる内容のどこにも、ナプキンがテーブルの商品だという情報はありません。
• 視覚が限られる 画面拡大ソフトで見えるのは写真と見出しだけです。メニューはその上の視界の外にあり、しかも何も示していないので、ページを動かして探しても答えは見つかりません。

ページの要素に誤りはありません。リンクには名前があり、タイトルも空ではなく、見出しもあります。足りないのはセクションを示すものですが、スキャンはサイトのセクションを知りません。この診断では、3つ以上のリンクを持つメニューがあるトップページ以外のページで、パンくずリストがなく、メニューのどのリンクにも aria-current がなく見た目も隣のリンクと同じで、タイトルの部分が3つ未満なら、ew:location-manual-check として確認に回します。見出しや内容がすでにページの位置を示しているかどうかは、人にしか判断できないためです。AIのコーディングツールに商品ページを頼むと、デザインのとおりに作ります。デザインにパンくずリストがなければ、作りません。