Webアクセシビリティに配慮した見出しのつけ方
2020年1月6日
見出しをマークアップする際の注意点
『JIS X 8341-3:2016』および『WCAG 2.0』の達成基準1.3.1（レベルA）を達成するために、文書構造や意味から適切な見出しレベルの要素を選ぶ必要があります。
見出しをマークアップする際は、以下の内容に注意して、適切な見出し要素（h1〜h6）を用います。
- コンテンツの冒頭に見出しを置く
- 文章構造（コンテンツの階層構造）を反映して見出しをつける
見出しの付け方の悪い例
見出しレベルがスキップしている
以下のコードのように、見出しレベルがスキップしているWebページをときどき見かけます。
<h1>見出しレベル1</h1>
<h3>見出しレベル3</h3>
見出しレベルがスキップしていると、スクリーンリーダーの利用者に誤解を与える恐れがあります。
見出しレベルを飛ばしてページを作成する (例えば、
h1要素の次にh3要素を置く) と、スクリーンリーダーの利用者がそのページの見出しをナビゲートするときに、ページには存在しないh2要素を誤って飛ばしてしまったのではないかと誤解する恐れがあることに注意する。
「見た目」で見出しレベルを決めていることが原因
なぜ見出しレベルがスキップしてしまうのか、その原因を私の経験をもとに考察してみました。
見出しレベルがスキップする要因として、「文書構造」ではなく「見た目」で見出しレベルを決めていることが考えられます。その背景には、見出し要素（h1〜h6）に直接スタイルを当てているケースが多いです。見出し要素にスタイルを当てるのではなく、classを用いてスタイルを当てることによって、文書構造によって見出しレベルを決めやすくなります。
ただし、classの命名にも注意が必要です。「.style_h2」のようにclass名に見出しの要素名を含めて命名しているのを見かけることがあります。この命名方法は、コーディングの際に混乱を招いてしまうので、オススメしません。
見出しでない箇所に見出し要素を使用している
画像のキャプションのマークアップに見出し要素を使っているケースもよく見かけます。このように、見出しでないコンテンツに見出し要素でマークアップすることは良くないです。
- コンテンツが見出しであるときに、見出しマークアップを利用している。
- コンテンツが見出しでないときは、見出しマークアップを利用していない。