強調[文書構造]
見た目で強調しているテキストは、<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 適応可能のガイドライン」
何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。