2010年11月2日火曜日

アクセシビリティJIS チェックポイント(8)― H1~6,P 要素

ヘッダー要素は配置する場所や順番を守る

ヘッダー要素 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

以上