ランドマークの一覧に出てこない検索欄と関連コンテンツ

ある生活雑貨のショップの商品ページは、多くのショップと同じ形をしています。ヘッダーにはロゴの Tidewater Home、3つのリンクのメニュー、検索欄があります。その下に商品のホーローのマグ（$18）、続いて「こちらもおすすめ」という見出しの下にほかの商品が並び、最後に「お問い合わせ」と「返品」のあるフッターがあります。ページの骨組みはきちんと作られています。ヘッダー、メニュー、本文、フッターはランドマークになっていて、ランドマークの一覧には「バナー」「ナビゲーション」「メイン」「コンテンツ情報」が並び、どのランドマークの外にも内容は残っていません。

ページを領域ごとにたどる人が、検索へ行こうとして、スクリーンリーダーや SkipTo のようなランドマークの拡張機能でこの一覧を開きます。一覧に検索はありません。バナーを選んでヘッダーの中から検索欄を探すか、Tabキーでロゴとメニューを通り過ぎて欄までたどることになります。次にマグの説明を読もうと「メイン」を選ぶと、一覧のメインには「こちらもおすすめ」まで含まれていて、ほかの商品もマグのページの一部のように扱われます。メインのどこまでが商品で、どこからがショップのおすすめなのかは、一覧からは分かりません。

1.3.6は、ページの各領域の目的をプログラムで解釈できること、つまり見た目だけでなく、それぞれの領域が何のためにあるかをコードでも伝えることを求めます。理由は解説書にあります。ページの領域が特定されていれば、利用者はユーザーエージェントで領域を取り除いたり、強調したりできます。解説書が最初に挙げる例も、ランドマークで領域を示したサイトで、利用者が main のロールを持たない部分を隠せるというものです。領域についての十分な達成方法はランドマークを使うARIA11で、そのランドマークには、検索のための search と、メインの内容を補いながら単独でも意味を持つ内容のための complementary が含まれています。

このページは、骨組みにはランドマークを使っていますが、そこで止まっています。

• 検索は、名前もロールもない form です。form 要素は名前があるときだけランドマークになり、その場合も「検索」ではなく「フォーム」です。そのため、検索がどこにあるかを示すランドマークがコードになく、ページの領域を並べるツールにも検索は載りません。
• 関連コンテンツは main の中の div です。コードの上ではおすすめもメインの内容、つまりページの存在理由の一部になるため、メインを残してほかを隠すツールではおすすめも残ります。

抜けや置き間違いがあり、内容を囲みきれないランドマークで説明している1.3.1の点では、このページに問題はありません。4つの領域はランドマークで、内容はすべてどれかの中にあります。1.3.6はさらに、ページの領域の目的まで求めます。このページでは、利用者が名前で呼ぶ2つの領域、検索とおすすめの目的がコードに表れていません。1.3.6には失敗例がなく、ARIA11の確認手順も、ページにあるランドマークを調べるもので、ないランドマークは調べません。そのため、どの領域にランドマークが必要かは、達成基準の文言と例から判断することになります。また、レベルAAAなので、求める診断はあまりありません。

ページ上部の検索欄も、見出しの下に並ぶ商品も、見た目は利用者が期待するとおりです。問題があるのはコードが伝える内容だけで、同じヘッダーと商品のテンプレートを使うページすべてで同じことが起きます。

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

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

• 言語・認知・学習の能力が限られる SkipTo や Landmarks などのブラウザー拡張機能は、ページの領域を短い言葉でメニューに並べ、選んだ領域へ移動させます。込み入ったページを近道でたどる手段です。このページではメニューに検索がなく、おすすめも商品の一部として数えられます。そのため、1.3.6が想定するような、メインの内容だけを残してほかを隠すツールを使っても、おすすめは残ってしまいます。
• 視覚を使わない スクリーンリーダー利用者は、ランドマークのキーを押すか、ランドマークの一覧を開いて、ヘッダーを読まずに検索へ移動します。このページでは一覧に検索がないため、フォームの入力欄へ移動するキーなど、別の方法で検索欄を探すことになります。

axe には1.3.6のルールがありません。axe のレベルAAAのルールは3つで、コントラスト（1.4.6）、リンクの目的（2.4.9）、ページの再読み込み（2.2.4と3.2.5）を調べます。ランドマークのルールも、main、バナー、コンテンツ情報が1つずつあり、その外に何もないこのページを合格にします。search ランドマークの外にある検索欄はコードから見つけられるため、この診断ツールは、そうした検索欄を、欄の名前とボタンの文言を添えて確認対象に挙げます。一方、あるまとまりが単独で成り立つ関連コンテンツなのか、ページの目的の一部なのかは、ツールには判断できません。商品のレビューやサイズの目安は main に入り、おすすめは入りませんが、その違いはコードには表れません。ページを読んで人が判断する必要があります。ランドマークを加えるよう頼まれたAIツールは、付けすぎる傾向があります。ニュースレターの登録フォームに role="search" を付けたり、商品自身の説明を aside で囲んだり、あらゆるまとまりを名前付きの section にして、誰も移動したくない領域でランドマークの一覧を埋めたりします。