見出しの構造とランドマーク

スクリーンリーダーでページを読むよくある方法は見出しから見出しへ飛ぶことなので、h2 要素のないページは章のない本のように読まれます。

見出しは目次

目の見える読み手は流し読みをします。大きな太字の行にさっと目を通し、読みたいセクションを見つけてそこから読み始めます。スクリーンリーダーの利用者は同じことを見出しで行います。MDNによると、見出しから見出しへすばやく飛んでページの内容をつかむのはよくあるやり方で、ほとんどのスクリーンリーダーはページのすべての見出しを一覧にできます。これがうまくいくのは、見出しが本物の h1 から h6 の要素であるときだけです。CSSで大きな太字にした段落は見出しのように見えますが、ふつうのテキストとして読み上げられます。

WCAG 2.2はこれを、レベルAの達成基準1.3.1「情報及び関係性」で扱っています。見た目で示される構造は、コードでも使えなければなりません。レベルAAの達成基準2.4.6「見出し及びラベル」はさらに、見出しがそのセクションの話題を説明していることを求めます。「その他」や「セクション2」という見出しは、1つ目の基準には合っても、2つ目には合いません。

MDNの3つのルール

1つ目に、レベルを飛ばさないこと。h1、h2、h3 の順に進みます。h1 のすぐ後に h4 を聞いた人は、抜けたレベルがどこへ行ったのかと迷ってしまいます。2つ目に、title 要素と同じように、ページの内容を名前で示す h1 を1ページに1つだけ置くのがよいでしょう。HTMLの標準は複数を認めていますが、MDNは h1 を1つにするのがふつうのよい方法だとしています。3つ目に、見出しのレベルを大きさで選ばないこと。h3 が小さすぎると感じたら、CSSで文字の大きさを変え、レベルは構造に合ったものを残します。

使える見出しを書く

見出しの一覧の良し悪しは、その言葉しだいです。役に立つ言葉を先に置きましょう。20の見出しの一覧を流し読みする人は、それぞれの最初だけを聞いて次へ進むからです。「お越しいただける時間」よりも「営業時間」のほうがうまく伝わります。見出しは短くし、互いに違うものにして、2つのセクションがどちらも「詳細」という名前にならないようにします。それからアウトラインを確かめます。ブラウザーの開発者ツールにあるアクセシビリティパネルや、スクリーンリーダーの見出し一覧には、見出しだけが表示されます。順に読んでみて、目次として意味が通るかを考えましょう。通るなら、流し読みする目の見える読み手にも役立ちます。

ランドマーク

見出しは内容を区切り、ランドマークはページを領域に分けます。header、nav、main、footer の各要素には役割が組みこまれているので、スクリーンリーダーは領域の一覧を示し、メインコンテンツやナビゲーションへ直接飛ぶことができます。ふつう、1ページに main は1つです。正しい要素を選ぶだけでこの役割が無料で手に入ります。これがARIAの第一のルールの実例で、属性を足す必要はありません。

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>