ヘッダー要素は配置する場所や順番を守る
ヘッダー要素 H1、H2、H3、H4、H5、および H6 は、ページの構造をユーザーに一意に知らせる為に使用します。ヘッダー要素は一般ユーザーが認知しやすいように、スタイルを設定する時はできる限りCSSを使用して必要なスタイルを定義します。
P 要素も同様です。スタイルを設定する場合は CSSを使用して定義してください。そして、ヘッダー要素自体のスタイルをある一部分だけ変えることの無いように、ヘッダー要素前後にスタイル定義を入れないようにしてください。
実装方法
・H1 の次に H3 等にならないように階層の順番を守る
・H1~6 および P 要素の前後にスタイルを変える設定は入れない
悪い例
(見た目にこだわり、H1 の次に H2 を使わずに H3 要素を使用する)
<H1>ページタイトル</H1>
<H3>第1章</H3>
(P 要素のスタイルをその部分だけ変更する)
<P><strong>ここ重要!</strong></P>
ヘッダー要素はアクセシビリティ面で重要な存在
ヘッダー要素はページリーダーや、テキストブラウザでは重要な役割があります。例えばテキストブラウザでは、まずヘッダー要素だけを表示して、それらを選択する事で詳細を表示させる機能などがあります。こういった場合、ヘッダー要素が場所および順番を間違って記載していた場合、ブラウザの動作が正常に働かないことがあります。
重要度
★★★(必須)
ガイドライン
JIS X 8341-3:2010 7.1.3.1 A
WCAG 2.0 checkpoint 1.3.1 A
以上