要約

強調を適切に用いることで、ユーザーは音声の強調とキーワード、純粋にスタイル的な装飾を、区別できるようになります。

テクニック

HTML 5 では、 em 、 strong 、 i 、 b要素のより正確な使用方法が定義されていることに注意してください (以下の説明表を参照)。 WCAG 2.0 に準拠するためにこれらのルールに従う必要はありませんが、ベストプラクティスとして考慮する必要があります。 このセクションの例は、これらのガイドラインに従っています。

例

例1 — 声の強勢を表すemの使用
<p>
   … There was nothing so <em>very</em> remarkable
   in that; nor did Alice think it so <em>very</em>
   much out of the way to hear the Rabbit say to
   itself, <q>Oh dear! Oh dear! I shall be 
   late!</q> …
</p>
<p>
   … 'Really this is what is meant by the Fourth
   Dimension, though some people who talk about the 
   Fourth Dimension do not know they mean it. It is 
   only another way of looking at Time. <em>There 
   is no difference between Time and any of the 
   three dimensions of Space except that our 
   consciousness moves along it</em>. …
</p>
例2 — 重要性を示すためのstrongの使用
<p>
   <strong>Warning</strong>, all features should 
   be considered unstable …
</p>
<p>
   <strong>Do not feed the bears!</strong> 
</p>
例3 — ラテン語の用語に対するi要素の使用
<p>
   When hybrids are able to breed <i>inter se</i>, 
   they transmit …
</p>
<p>
   Among the sea-shells, the most abundant was the 
   <i>Patella deaurat</i> …
</p>

解説

太字と斜体には、強調する点、トーンや場所の変更、特別な名前など、テキストに関連するさまざまな情報が含まれます。ただし、正しいセマンティックタグを用いてこの書式設定を適用しないと、同じ情報を視覚障害のあるユーザーに伝えることはできません。

次の表は、太字と斜体にさまざまな HTML5 および CSS メソッドを適用する方法を示しています。

要素/プロパティ 目的
em em要素は、テキストが音声的に強調されることを示します。
strong strong要素は、命令文を述べるときや、「警告」や「警戒」などのシグナルワードを使用するときなどに、重要性を示します。
i i要素はイタリック体の使用が口調や声の変化を示す場合に使用されます。HTML5 仕様で例として挙げられているのは、夢の内容が長く続く場合ですが、メインの物語から思考や思い出へと話が逸れる場合など、同様の状況にも使用できます。i要素は、強調の背後に意味的な重要性がある場合（例：イタリック体の単語が、専門用語、外国語などを示す場合など）にも使用されます。
b b要素は、太字で意味を伝える場合に常に使用されます。これは、（キーワードなどの）セマンティックタグの付与にiが使用されるのと同様です。
font-style: italic
font-weight: bold 		太字と斜体の CSS プロパティは、太字と斜体が装飾の目的で使用される場合（見出しや導入語など）に必ず使用してください。CSS フォーマットにはセマンティクス（意味）が含まれないため、支援技術では強調が認識されません。

関連リンク