強調[文書構造]

見た目で強調しているテキストは、<em>要素を用いてマークアップする。

解説

文中で強調したい部分は、<em>要素を用いてマークアップします。そうすることによって、文中で強調されている部分がマシンリーダブルになります。

HTML5では、<em>要素と<strong>要素の意味合いが若干変更になっています。

  • <em>要素:コンテンツの強調を示す。
  • <strong>要素:コンテンツの重要性、深刻さ、緊急性を示す。従来の「より強い強調」という意味ではなくなった。

もしコンテンツの一部の重要性を示したい場合には、<em>要素ではなく、<strong>要素を用いてください。

<em>要素は、多くのブラウザのデフォルトではイタリック(斜字)で表示されますが、文字の見た目をイタリックにするための要素ではありません。文中にあるテキストをイタリックにして、その他の部分から際立たせようとすることがありますが、強調やする意図がない場合は<i>要素を用いるほうが適切だとされています。

事例 1. 強調のマークアップ

悪い例


<p>アクセシビリティは、<i>Webコンテンツの品質基準</i>である。</p>

文中で強調したい部分をイタリックにしようとして<i>要素を用いている。しかし、<i>要素には強調という意味はないため、ユーザーエージェントにはその部分が強調されていることが分からない。

良い例


<p>アクセシビリティは、<em>Webコンテンツの品質基準</em>である。</p>

<em>要素用いて、強調したい部分をマークアップしている。多くのブラウザでは、イタリックで表示されるが、見た目のスタイルはCSSを用いて変更することができる。

『JIS X 8341-3:2016 / WCAG 2.0』の達成基準

1.3.1 情報及び関係性(レベル A)
何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

JIS X 8341-3:2016 / WCAG 2.0「1.3 適応可能のガイドライン」