GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.3.1 情報及び関係性に関する達成基準:見出し

7.1.3.1 情報及び関係性に関する達成基準:見出し

表現を通じて伝達されている情報、構造及び関係性は、プログラムが解釈可能でなければならない。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は、それらはテキストで提供されていなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

HTMLでは、「表現を通じて伝達されている情報、構造及び関係性」を適切な要素や属性を用いてマークアップして、「プログラムが解釈可能」にしなければなりません。

「プログラムが解釈可能」というのは、ブラウザや支援技術(例:スクリーンリーダー)が、ソースコードからコンテンツの「情報、構造及び関係性」を解釈できることを指します。HTMLの場合には、仕様で定められている要素や属性を用いてマークアップすることによって、見た目などの表現に関係なく、ブラウザや支援技術(例:スクリーンリーダー)がコンテンツの「情報、構造及び関係性」を解釈することが可能になります。

本達成基準では、ウェブページに見出しがある場合には、その見た目だけでなく、ソースコードで見出しレベルに応じてh1~h6要素のいずれかを用いてマークアップすることが求められています。

例えば、HTMLのソースコードで見出しとしてマークアップせずに、CSSなどで見た目だけを太字にして文字サイズを大きめにした場合でも、見た目には同じように見出しに見えるかもしれません。しかし、それではソースコードを解析しているブラウザや支援技術は、その文字が見出しであることを解釈できません。これは、見出しにテキストではなく画像を用いる際も同様です。見出しを画像にする場合には、代替テキストを記述した上でその画像(img要素)をh1~h6要素のいずれかを用いてマークアップします。

このように、「表現を通じて伝達されている情報、構造及び関係性」を「プログラムが解釈可能」にすることによって、次のような場合でもユーザーがコンテンツの「情報、構造及び関係性」を知覚することができるようになります。

  • コンテンツが、音声ブラウザやスクリーンリーダーによって読み上げられたとき
  • スタイルシートが、ユーザー・スタイルシートに置き換えられたとき

例えば、音声ブラウザやスクリーンリーダーの多くは、h1~h6要素のマークアップを利用して、見出しの文言とあわせて見出しレベルを音声で伝えたり、見出しだけを拾い読みしたりする機能を提供しています。これにより、ユーザーはページの全体像が把握しやすくなるとともに、そのページの中で目的のコンテンツがあるセクションへより早く移動できるようになります。

つまり、見た目の表現だけではなく、HTMLのソースコードでもコンテンツの「情報、構造及び関係性」が分かるように、適切な要素や属性を用いてマークアップすることによって、ユーザーの様々な利用環境や多様化する閲覧デバイスに対応することが可能となります。

事例と実装

見出しのマークアップ

スクリーンショット:見出しのあるコンテンツ

メインコンテンツの開始位置にある「JIS X 8341-3:2010の概要」というそのウェブページの大見出しをh1要素でマークアップする。これにより、音声ブラウザやスクリーンリーダーは、例えば「JIS X 8341-3:2010の概要 見出しレベル1」というように見出しレベルをあわせて読み上げたり、ユーザーが "H" キーやテンキーの "1" を押すとこの見出しに移動できる機能を提供したりすることが可能になる(ただし、キー操作方法等は製品によって異なる)。

ソースコード例

< h1 >JIS X 8341-3:2010の概要< /h1 >
< p >JIS X 8341-3:2010には、主に次のような特徴があります。< /p >
< ul >
< li >WCAG 2.0と同一の達成基準を採用< /li >
< li >特定の技術に依存しない記述< /li >
< li >試験方法および試験結果の表示方法を定義< /li >
< /ul >

参考情報

関連する達成基準

等級A
等級AA
等級AAA