要約

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

テクニック

HTML 5では、emstrongib要素のより正確な使用方法が定義されていることに注意してください (以下の説明表を参照)。 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フォーマットにはセマンティクス(意味)を含まないので、強調は支援技術を通じて認識されません。

関連リンク