ランドマークがない、または正しく置かれていないページ

ある書店のページは、どれも同じレイアウトを使っています。いちばん上の細い帯に「$30以上のご注文で送料無料」とあり、その下にロゴの Harbour Books と4つのリンクのメニュー、次にページごとの本文（ここでは新刊の一覧）、最後に「お問い合わせ」と「返品」のあるフッターが続きます。新刊を見たいスクリーンリーダー利用者は、どのショップでもするように、ページ内の領域へ移動するためにスクリーンリーダーが用意しているランドマークの一覧を開くか、ランドマークからランドマークへ移動するキーを押します。このページでは一覧が空で、キーを押しても何も見つからないため、見出しで移動しない限り、帯、ロゴ、メニューのリンクをすべて上から順に聞くことになります。

その後のリニューアルで、ページは新しいアプリのレイアウトに移り、一覧は「メイン」「ナビゲーション」「メイン」と読むようになりました。最初の「メイン」はページのほぼ全体なので、選ぶとロゴに着きます。2つ目が本文です。ヘッダーとフッターにあたるバナーとコンテンツ情報は一覧になく、送料無料の帯はどのランドマークにも入っていないため、ランドマークごとに移動すると通り過ぎてしまいます。

ページには見て分かる4つの領域があり、1.3.1は見て分かる構造をコードでも伝えることを求めます。HTMLには、ちょうどこれらの領域のための要素があります。ページの最上位にある header はバナーランドマーク、nav はナビゲーションランドマーク、main はメインコンテンツ、最上位にある footer はコンテンツ情報ランドマークです。WCAGの達成方法H101とARIA11は、これらを使って1.3.1を満たします。最初の版は4つすべてに div を使っているため、コードからはどれも伝わりません。

2つ目の版にはランドマークがありますが、置き場所が誤っています。

• レイアウトがすべてを main で囲んでいるため、メインランドマークがロゴから始まり、ヘッダーとフッターまで本文として扱います。
• main、article、aside、nav、section の中にある header や footer は、バナーやコンテンツ情報のランドマークになりません。そのため、サイトのヘッダーとフッターはランドマークではなくなります。
• ページが、レイアウトの main の中に自分の main を加えています。HTMLで認められるのは、隠されていない main が1つで、その祖先が html、body、div、アクセシブルな名前のない form、自律カスタム要素だけの場合です。それでも2つの要素はどちらも main として公開されるため、スクリーンリーダーには2つの「メイン」が並びます。
• 送料無料の帯は外側の main より上にあり、どのランドマークにも入っていません。

WCAGはランドマークを十分な達成方法として挙げていますが、必須とはしておらず、ランドマークのないページを失敗とする失敗例もありません。そのため、見出しが同じ構造を伝えていれば、合格とする診断者もいます。この例では、ほかに構造を伝えるものがありません。メニューとフッターには見出しがなく、見出しは本文のものだけです。

どちらの版も見た目は正しいため、目で読む人は誰も気づきません。問題はマークアップにあり、同じレイアウトを使うすべてのページで繰り返されます。

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

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

• 視覚を使わない スクリーンリーダー利用者は、ランドマークの一覧を開くか、ランドマークのキーを押して、本文、メニュー、フッターへ直接移動します。div だけのページでは一覧が空で、1つの main がページのほぼ全体を囲んでいると、メインへ移動してもサイトのヘッダーに着きます。
• 視覚が限られる 拡大表示とスクリーンリーダーを一緒に使う人は、広いページを動き回る代わりにランドマークで移動することがあり、ヘッダーの上の送料無料のお知らせのように、どのランドマークにも入っていない内容を見逃します。

axe には、この問題の多くに対応するルールがあります。どのランドマークにも入っていない内容には region、main のないページには landmark-one-main、入れ子になった2つ目の main には landmark-no-duplicate-main と landmark-main-is-top-level、2回使われたり別のランドマークの中に置かれたりしたバナーやコンテンツ情報には、さらに4つのルールがあります。ただし axe はどれもベストプラクティスに分類しているため、WCAGのルールだけを実行する診断では報告されません。main の中のヘッダーとフッターには、どのルールも気づきません。そこにある header は記事の header と同じく普通の header であるべきなので、axe は対象にしないからです。この診断ツールは、この場合を人の確認に回します。バナーやコンテンツ情報がなく、最初の header や footer が main や区分コンテンツの要素の中にあるページを、確認対象として挙げます。手早い修正は、ランドマークを動かす代わりに足すことがあります。さらに別の囲みに role="main" を付けたり、main の中に残ったヘッダーに role="banner" を付けて本文の中にバナーを作ったり、すべての section にラベルを付けて、誰も移動したくない領域でランドマークの一覧を埋めたりします。各領域が正しいランドマークに入っているか、入れ子の header がサイトのものか記事のものかは、ページと見比べて人が判断する必要があります。