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

本達成基準では、ウェブページに強調、引用と参照元、上付き文字や下付き文字などのテキストがある場合には、その見た目だけでなく、ソースコードでテキストの意味に応じてセマンティックな要素を用いてマークアップすることが求められています。『WCAG 2.0 実装方法集』の「H49: セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする」では、主なセマンティックな要素として次のような例を挙げています。

  • 強調:em要素
  • より強調:strong要素
  • 長い引用文:blockquote要素
  • 参照元(タイトル):cite要素
  • 短い引用:q要素
  • 上付き文字:sup要素
  • 下付き文字:sub要素

これらのセマンティックな要素を用いてテキストをマークアップすることによって、そのテキストに意味や構造を付与することができます。例えば、これらのマークアップを利用して、ほとんどのブラウザは他のテキストとは見た目の異なる視覚表現にしたり、スクリーンリーダーは聴覚表現で異なる読み上げ音声やピッチにしたりすることが可能になり、ユーザーにとってより理解しやすい形でコンテンツを提供することができるようになります。

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

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

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

事例と実装

良い例 1:強調

スクリーンショット:em要素とstrong要素で強調されたテキストを含む文章

文中のテキストを強調する際にはem要素、より強調したい際にはstrong要素を用いてマークアップする。多くのブラウザでは、em要素をイタリック、strong要素を太字にして表示する。もし見た目を変更したい場合には、CSSを用いて指定する。

ソースコード例

< p >文章中で「< em >強調したい部分< /em >」は< code >em< /code >要素でマークアップし、「< strong >より強調したい部分< /strong >」は< code >strong< /code >要素でマークアップします。なお、HTML5では、< code >strong< /code >要素は重要性を伝えるための要素になります。< /p >

良い例 2:長い引用文と参照元

スクリーンショット:blockquote要素で引用文、cite要素でその参照元を示したテキストを含む文章

文中で長い引用文を使用する際にはblockquote要素、その参照元のタイトルにはcite要素を用いてマークアップする。多くのブラウザでは、blockquote要素をインデントして、cite要素をイタリックにして表示する。もし見た目を変更したい場合には、CSSを用いて指定する。

ソースコード例

< p >次の文章は、日本工業規格の< cite >JIS X 8341-3:2010「1. 適用範囲」< /cite >からの引用です。< /p >
< blockquote >< p >この規格は,主に高齢者,障害のある人及び一時的な障害のある人(以下,高齢者・障害者という。)がウェブコンテンツを利用するときに,情報アクセシビリティを確保し,向上させるために,ウェブコンテンツを企画,設計,制作・開発,検証及び保守・運用するときに配慮すべき事項について規定する。< /p >< /blockquote >

良い例 3:短い引用

スクリーンショット:q要素で短い引用文を含む文章

文中で短い引用を使用する際にはem要素を用いてマークアップする。なお、ブラウザの多くがこの要素をサポートしておらず、引用符を適切に表示しないことがある。そのため、次のソースコード例では、CSSで引用符を自動生成しないように設定し、コンテンツ制作者がHTMLのソースコードに記述した引用符が表示されるようにしている。

ソースコード例

q:before { content: ""; }
q:after { content: ""; }
< p >JIS X 8341-3:2010では、想定するユーザーとして「< q >主に高齢者,障害のある人及び一時的な障害のある人< /q >」としている。< /p >

参考情報

関連する達成基準

関連する達成基準はありません。