大きさで選ばれ、構造と合わない見出し

レンズ豆のスープのレシピのページには、大きなタイトル、短い紹介文、細い区切り線があります。線の下には「材料」と「作り方」の2つの項目があり、それぞれ太字の見出しが付いています。作り方の最後には小さな太字の「コツ」があり、ページの最後には「その他」という見出しの下に関連レシピのカードが並びます。見える人には、構成がはっきり分かります。作り方を知りたいスクリーンリーダー利用者は、長いページでよく行うように、見出し一覧を開くか、Hキーで見出しから見出しへ移動します。一覧には「レンズ豆のスープ 見出しレベル1」「見出しレベル2」「コツ 見出しレベル5」「その他 見出しレベル2」と並びます。ページの中心である「材料」と「作り方」がありません。1つは中身がなく、最後の見出しは何の「その他」か分かりません。

それぞれの見出しが、何であるかではなく、どう見せたいかでマークアップされています。1.3.1は、見て分かる構造をコードでも伝えることを求めます。ここでは、どの行が項目の見出しで、どの項目がどの項目の中にあるか、です。2.4.6は、見出しがその内容を表すことを求めます。このページでは、次の4か所で満たしていません。

• 「材料」と「作り方」は、大きな太字にするクラスを付けた div 要素です。見出しに見えますが見出しではなく、WCAGの失敗例F2に当たります。
• 「コツ」は、デザインのh5がちょうどよい大きさだったため h5 になっています。実際はレベル2の「作り方」に属するため、レベルが示す深さより3段浅い位置にあります。
• 紹介文の下の線は、上の枠線を付けた空の h2 です。見出し一覧に、中身のない項目が1つ増えます。
• 関連レシピの見出しは「その他」です。カードの隣では意味が通じますが、見出しの一覧では、何が続くのか分かりません。

画面上には何の問題もありません。大きさ、太さ、余白のすべてが構成を示しています。問題はマークアップにあるため、見た目ではなくコードからページの構造を知る人に影響します。

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

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

• 視覚を使わない スクリーンリーダー利用者は、見出し一覧やHキーで長いページを拾い読みします。「材料」と「作り方」がどちらにも出てこないため、手順を探すにはページを一行ずつ読むしかありません。
• 視覚が限られる 拡大表示とスクリーンリーダーを一緒に使う人は、ページを見回す代わりに見出しで移動することが多く、空の見出しや、上に「作り方」がない「コツ」の見出しにたどり着きます。

axe は空の h2（empty-heading）と、h1からh5への飛び（heading-order）を報告します。ただしどちらもベストプラクティスに分類されているため、多くの診断では報告されません。どちらのルールも、見出しに見える div は検出できないため、問題の大部分である2つの項目の欠落は、どのチェックも通ってしまいます。報告された箇所だけを直すと、かえって悪くなることもあります。h5をh2に変えれば heading-order は消えますが、「コツ」が「作り方」と同じレベルになります。AIによる手早い修正では、逆に太字の行をすべて見出しにしがちで、人数や調理時間まで見出しになり、誰も移動したくない項目で一覧が埋まります。各行が見出しかどうか、どのレベルか、言葉が内容を表しているかは、ページと照らし合わせて人が判断する必要があります。